Egy weblapnak lehet egyzserre 2 háttere? Vagy ezt hogy oldhatnám meg?
Szóval adott a sablonom (kép: [link] és ebben azt szeretném, hogy a 2 egyszínű terület folyamatosan folytatódjon lefelé de a szivárvány minta is jobbra. Így lenne az a kérdésem, hogy ezt, hogy oldhatnám meg.
Megjegyzésként: az egész oldal CSS alapú, szóval ilyen megoldásra számítanék.
válasza:A képeket nem a teljes háttrének rakod be, hanem egy doboznak, ami vagy Div, vagy táblázat.
a kép ismétlődése:
background-repeat:repeat-y; vagy repeat-z ( atól függően milyen irányban akarod, hogy ismétlődjön.
Ha csak anyit írsz, hogy: background-repeat:repeat; akkor minden irányban ismétlődik.
válasza:neki nem ismétlődés kell.
kell egy kis darab a jobb oldalából és egy kis darab az aljából,
és akkor azt repeatra berakni hozzá
válasza:Tegnapi 20:39-es vagyok.
mivel csak a fejlécben van többszínü kép ezért csak ezt raktam ismétlésre, a tartalom ha jól veszem ki, akkor 3 színü balszélen halványszürke, középen fehér, jobboldalt fekete.
A bal szélső és középső között pedig van egy fekete választóvonal szerűség. ezért, hogy ez megmaradjon az oldal háttérszínét feketére állítottam és a tartalmi dobozok között hagytam hézagot.
Azt nem mondtad, hogy teljes szélességű oldalt szeretnél vagy fix szélességűt. ezért teljes szélességben csináltam ami azt jelenti, hogy szélességben aszerint nő a mérete milyen felbontásban van a monitor.
Tessék a komplett szerkezet kódja:
<html>
<head>
<title> Oldalneve </title>
</head>
<body style="margin:0; padding:0; background: #151515;">
<!-- fejléc doboz -->
<div style="width:100%; height:200px; border:0px; background: url('img/header.gif') repeat;">
<!-- fejléc szövegrész doboz -->
<div style="position:absolute; left:10px; top:10px; width:100%; height:100px; border:0px; text-align:center;">
<h1 style="font-size:40pt; color:#6C6C6C; font-family:arial;">Oldal címfelirata</h1>
</div>
</div>
<!-- tartalmi dobozok -->
<!-- Baloldal -->
<div style="width:20%; height:100%; float: left; background: #D3D3D3;">
tartalom
</div>
<!-- jobboldal -->
<div style="width: 20%; height:100% ;float: right; background: #151515;">
tartalom
</div>
<!-- középső -->
<div style=" margin: 0 22%; height:100%; background: #FFFFFF;">
tartalom
</div>
</body>
</html>
A fejléc képe: http://kepfeltoltes.hu/100208/header_www.kepfeltoltes.hu_.gif
amit egy img nevű almappába raktam header.gif néven.
bizonyos dolgokat I.explorer, másképp jelenít meg mint firefox vagy Chrome. Ezért ha alakítasz akkor teszeteld több böngészővel, hogyan jeleníti meg.
A formázást pedig szedd ki külön egy CSS fájlba akkor átláthatóbb (ha úgyis azzal szerkeszted).
A tartalmi dobozokba berakhatsz új dobozokat a szövegeknek amit szintén kedvedre tudsz formázni css-el.
Ha azt a fickó képét is oda akarod szerkeszteni akkor vágd ki képszerkesztővel mentsd el GIF ben átlátszó háttérrel, majd illeszd be abszolút pozícióba.
pl így:
<img src="img/ember.gif" style="border:0px; position:absolute; left:200px; top:120px;">
csak ezzel az lesz a baj, hogy mivel nem fix szélességü az oldal ezért az abszolút pozíció miatt balról 200 pixel fentről 120 pixelre fog megjelenni. függetlenül attól, hogy a tartalmi dobozok milyen szélesek.
tehát ez az ember más helyen fog megjelenni egy 1024x768 as felbontásban, és máshol egy 1280x1024 es felbontásban.
Kapcsolódó kérdések:
Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!