wrapperből kilépés
Sziasztok!
Adott a következő HTML5 struktúra:Képzeljetek el egy olyan weboldalt ami zebracsíkos. A html-nek adtam háttérszínt, a body a wrapper.
A top tartalma középre igazítva(body) és a html a háttérszíne, ez így jó.
A header tartalma középre igazítva(body) és szeretnék neki egy teljesen más színt adni, ami teljesen kitölti horizontálisan a böngészőt.
Tudom hogyan kell ezt csinálni, de én most azt szeretném, hogy a body legyen a wrapper.
Tehát a body marad wrappernek és nem veszek fel a header alá divet. Maradnia kell mindennek így ahogy a megadott forrásban van.
Tudom, hogy szabad használni divet, de én így szeretném megoldani:)
Dióhéjban:
A wrapperből hogyan lépjek ki úgy a headerel, hogy a tartalom marad középen de a háttérszín width: 100% és nem veszek fel újabb tagot.
Köszönöm,
gl3am
[Szerk.]
A body relative:
■ Adott a következő HTML5 struktúra:
<body>
<section id="top">
<aside id="postal_address">
</aside>
</section>
<header id="header">
<a href="#"><img src="logo"></a>
<nav id="primary_nav">
</nav>
</header>
</body>
A top tartalma középre igazítva(body) és a html a háttérszíne, ez így jó.
A header tartalma középre igazítva(body) és szeretnék neki egy teljesen más színt adni, ami teljesen kitölti horizontálisan a böngészőt.
Tudom hogyan kell ezt csinálni, de én most azt szeretném, hogy a body legyen a wrapper.
Tehát a body marad wrappernek és nem veszek fel a header alá divet. Maradnia kell mindennek így ahogy a megadott forrásban van.
Tudom, hogy szabad használni divet, de én így szeretném megoldani:)
Dióhéjban:
A wrapperből hogyan lépjek ki úgy a headerel, hogy a tartalom marad középen de a háttérszín width: 100% és nem veszek fel újabb tagot.
Köszönöm,
gl3am
[Szerk.]
A body relative:
body { width: 978px; margin: 0 auto; position: relative; }
Egyelőre megoldottam before
position:absolute
Szintén a #header-ben elhelyezel egy text-align:center-t, így középen lesznek a benne lévő dolgok.
Valahogy így: http://jsfiddle.net/ZsA32/1/
Köszönöm. hogy segíteni
Ha így csinálnám, akkor elveszítené az értelmét az, hogy a body a wrapper. A center meg abszolút nem jó :)
Egyelőre így oldottam meg(negatív margó):
http://jsfiddle.net/gl3am/SbwAt/3/embedded/result/
A before és az after dobva lett. Van benne overflow-x: hidden; ami nem hagy nyugodni IE fronton:)
Mindegy, egyelőre jó így.
Elolvastam a témanyitásom és
text-align :center nem kell, nagyon ritkán használom. :) A wrapper van középen.
Ha a body relatív szélességű
http://jsfiddle.net/tvZrE/1/
De passz, úgy ahogy leírtad nincs ötletem.:)
A section elemet szerintem egyébként nem erre szánták, mármint hogy nagyobb strukturális egységeket fogjon közre.
Amit itt leírtál az ott van a
A topban az egyik oldalon cím, tel. szám, email... a másik oldalán pedig egy kosár van ami darabszámot mutat, etc.
Szívesen megmutatom:
Igen, bár ha nem fix
Szerintem használhatsz div-et. Itt egy cikk erről:
http://html5doctor.com/you-can-still-use-div/
Igen, bár ha nem fix
De fix szélességű a body, lásd a témanyitásom.
Egy kicsit több odafigyeléssel olvass.:) Leírtam, hogy tisztában vagyok azzal, hogy használhatok divet, de én pont ott most nem fogok. Egyébként is, ez a forráskód csak egy részlete egy egésznek.
section