háttérkép lentebbről indítása
Kedves Bárki!
Egy weblap "page" részében a backgroundot három képből építeném fel:
1, kezdő (left, top elhelyezésű) felül lekerekített sarkú kép (átlátszó a kép felső két sarkánál a szín)
2, utána egy négyszög alakú repeat-y irányban addig amíg kell
3, zárásul egy (left, bottom elhelyezésű) alsó sarkainál lekerekített kép
Ezzel egy kellemes kerekített sarkú szöveghátteret kapok.
Csakhogy a sokszorosított 2. kép mivel nem kerekített sarkú, ezért a kezdő kép alatt kilátszik és megszünteti a lekerekített sarok jelleget.
Próbálkoztam már mindennel, de nem bírtam elérni, hogy a 2. kép sokszorosítását az első után kezdje el, vagy legalább lentebbről, hogy azt a néhány pixelnyi saroklekerekítésnél ne jelenjen meg hátulról.
Mivel lehet ezt megoldani?
mert amiket én próbáltam eddig nem jött össze.
Köszönöm a segítséget.
CSS-sel készítem a stílust
#page {
width: 800px;
margin: 0px auto;
background: url(images/img03.png) repeat-y left top;}
#page-bgtop {
background: url(images/bogyo_2.png) no-repeat left top;}
#page-bgbtm {
padding: 20px 30px;
background: url(images/img04.png) no-repeat left bottom;}
■ Egy weblap "page" részében a backgroundot három képből építeném fel:
1, kezdő (left, top elhelyezésű) felül lekerekített sarkú kép (átlátszó a kép felső két sarkánál a szín)
2, utána egy négyszög alakú repeat-y irányban addig amíg kell
3, zárásul egy (left, bottom elhelyezésű) alsó sarkainál lekerekített kép
Ezzel egy kellemes kerekített sarkú szöveghátteret kapok.
Csakhogy a sokszorosított 2. kép mivel nem kerekített sarkú, ezért a kezdő kép alatt kilátszik és megszünteti a lekerekített sarok jelleget.
Próbálkoztam már mindennel, de nem bírtam elérni, hogy a 2. kép sokszorosítását az első után kezdje el, vagy legalább lentebbről, hogy azt a néhány pixelnyi saroklekerekítésnél ne jelenjen meg hátulról.
Mivel lehet ezt megoldani?
mert amiket én próbáltam eddig nem jött össze.
Köszönöm a segítséget.
CSS-sel készítem a stílust
#page {
width: 800px;
margin: 0px auto;
background: url(images/img03.png) repeat-y left top;}
#page-bgtop {
background: url(images/bogyo_2.png) no-repeat left top;}
#page-bgbtm {
padding: 20px 30px;
background: url(images/img04.png) no-repeat left bottom;}
margin
fura mód a margóval (pl:
és a padding paranccsal sem sikerült...
Mutasd meg
uh, hát azt itt nehezen
de ha kapnék egy emilcímet, akkor arra szívesen elküldöm az egészet
vagy hogyan tudnám megmutatni?
Megvan! Az a kérdésem, hogy
Az a kérdésem, hogy a #page -nél hogy tudom megadni, hogy az adott kép, melyet sokszoroz lefelé egy adott margin hagyásával induljon el a page tetejétől viszonyítva!
Ezzel a page kezdő háttérképét tudom megadni.
#page-bgtop {
background: url(images/bogyo_2.png) no-repeat left top;}
Ehhez hasonlóan mi az a kód, amellyel a repeatelt általános háttérképet meg tudom határozni? mert ha abban megadom a margint is
akkor már lehet jó lesz.
Sajnos én csak a következő kódbeli megadást tudom és itt az egész page margintját tudom megadni csak
#page {
width: 800px;
margin: 0px auto;
background: url(images/img03.png) repeat-y left top;}
Az egész a html struktúrádtól
<!DOCTYPE html PUBLIC
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="hu">
<head>
<meta http-equiv="content-type"
content="text/html; charset=iso-8859-1">
<title>GojiMester</title>
<meta
content=""
name="keywords">
<meta
content=""
name="description">
<link media="screen" type="text/css"
rel="stylesheet" href="style.css">
<link rel="stylesheet"
type="text/css" href="style.css">
<meta name="robots"
content="index, follow">
<meta name="Revisit-After"
content="7 days">
<meta http-equiv="Content-Language"
content="HU">
</head>
<body>
<!-- start header -->
<div id="header"></div>
<!-- menu -->
<div id="menu">
<ul>
<li class="active">
<table
style="text-align: right; width: 751px; height: 25px;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="width: 170px;"></td>
<td style="width: 510px;">
<div style="text-align: left;"><a
href="index_leiras.html">Mit
tud a goji? </a></div>
</td>
</tr>
</tbody>
</table>
</li>
</ul>
</div>
<!-- end menu --><!-- end header -->
<!-- start page -->
<div id="page">
<div style="text-align: center;"></div>
<div id="page-bgtop">
<div style="text-align: center;"></div>
<div id="page-bgbtm">
<div style="text-align: center;"></div>
<!-- start content -->
<div id="content">
<div class="post">
<h1 class="title">Gojimester</h1>
<p class="byline">ITT LEHET
VALAMI</p>
<div class="entry">
</div>
</div>
</div>
<!-- end content --><!-- start sidebar -->
<div id="sidebar">
<ul>
</ul>
<ul>
<li> <br>
</li>
<br>
<li>
</li>
</ul>
</div>
<!-- end sidebar -->
<div style="clear: both;"> </div>
</div>
<!-- end page -->
<div id="footer">
<p>©2010 Minden jog
fenntartva
• </p>
</div>
</div>
</div>
</body>
</html>
kivettem belőle a töltelék
A kezdő képet tudom lentebb igazítani, de amelyiknél az y irányú sokszorosítást kérem ott már nem. fixen köti magát valamiért
khm..
A kódod formázva így néz ki:
Miért nem emeled ki a
A #page-nél a top helyett
repeat-y
Attól hogy 50px-nél indítja a hátteret, a repeat-y miatt a felső 50px-en is meg fog jelenni a háttér.
A legjobb megoldás tényleg az, ha a pagetop-ot a page elé, a pagebottom-ot a page után teszi.
remény...sem sajna
Köszönöm az eddigi ötleteket.
Ha jól értettem, akkor annyit kellett csinálnom, hogy a <div id="page és page-bgtop sorrendjét a html-ben felcserélni.
Sajnos ezzel azt értem el, hogy a felső képet elfedi a hátsó y irányba sokszorosított.
Próbáltam a css-ben a page-nek lenntebbi margint adni, de akkor az egész page-et vitte lentebb, holott a page-bgtop előrébb lévő parancs, aminél 0px a margin.
Szóval egyenlőre nagy kérdőjellel állok szembe...
ja és a html részébe már bele lehet kukkantani, mert nem lehetett várni tovább, fel kellett rakni a világ szeme elé.
www.gojimester.hu