Hogyan kell elrendezni weblapot css-el?
Nem ertem a pozicionalast. Fellul legyen a <header> abban jobb oldalon a <nav>, alatta bal oldalon az <article> jobb oldalon az <aside> ertelemszeruen a footer legallul.
Itt a kod:
<!DOCTYPE html>
<html>
<head>
<title>Weblap cime</title>
<style>
body {
width: 100%;
}
article
{
border-style: solid;
}
header
{
border-style: solid;
}
aside
{
border-style: solid;
}
footer
{
border-style: solid;
clear: both;
}
nav
{
border-style: solid;
}
ul li
{
display:inline;
}
</style>
</head>
<body>
<header>
Weblap cime
<nav>
<ul>
<li><a href="#">Menu1</a></li>
<li><a href="#">Menu2</a></li>
<li><a href="#">Menu3</a></li>
<li><a href="#">Menu4</a></li>
</ul>
</nav>
</header>
<article>
<h1>Heading1</h1>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</article>
<aside>
<h2>Heading2</h2>
<p>
Hello world! Hello world! Hello world!
Hello world! Hello world! Hello world!
</p>
</aside>
<footer>
2015. Weblap
</footer>
</body>
</html>
válasza:a header ne legyen fix magas (ha valami megtörik, vagy később responsive miatt)
article, aside floattal egymás mellett, igen
és a float után következő elemre(footer) clear:both;
(szoktak külön clearfix classt csinálni, és külön divet tesznek be)
válasza:Csak óvatosan a sok html5-ös elemmel, mert a régebbi böngészők (IE8) nem fogják tudni megjeleníteni őket. Ha ez nem gond, használd nyugodtan, de próbálj valami hierachiát kialakítani. Az article ne legyen egyenrangú az aside-dal.
Az article(ket) be lehet pakolni egy asideba.
Ha több oszlopos elrendezést szeretnél, használj konténereket (div), amik összefogják az egyes szekciókat, mert ezek így csak egymásra dobált dobozok.
A css-t szervezd ki külön fájlba: kezelni is könnyebb, és több oldalban is használhatod.
Sok sikert.
Kapcsolódó kérdések:
Minden jog fenntartva © 2025, 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!