Hogyan tudnám a szöveget lentebb kezdetni a menütől?
Szóval valamiért sehogy se tudom lentebb kezdetni a szöveget a menürésztől. jobbról és balról működik de fentről már nem. itt lenne a kód:
<div id="container">
<ul id="menu">
<li><div><a href="#">Főoldal</a></div></li>
<li><div><a href="#">Főoldal</a></div></li>
<li><div><a href="#">Főoldal</a></div></li>
<li><div><a href="#">Főoldal</a></div></li>
<li><div><a href="#">Főoldal</a></div></li>
</ul>
<div id="szoveg">fewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewpfewpfelpfewplfpewflewp<div>
</div>
css:
*{
padding: 0px;
margin: 0px;
}
body{
background-color: grey;
}
#container{
width: 756px;
height: 800px;
margin-right: auto;
margin-left: auto;
margin-top: 50px;
background-color: #B800E6;
opacity: 0.7;
}
#menu{
list-style: none;
}
#menu li{
float: left;
}
#menu li div{
text-align: center;
width: 130px;
height: auto;
padding: 10px;
border-right: 1px solid #fff;
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
background-color: red;
}
#menu li:first-child div{
border-left: 1px solid #fff;
}
a{
text-decoration: none;
}
#menu div:hover{
background-color: blue;
}
a:hover{
color: white;
}
#szoveg{
word-wrap: break-word;
margin-right: 20px;
margin-left: 20px;
margin-top: 40px;
}
válasza: válasza:li-ből szedd ki a div-eket, szemantikailag sehogy sem valók oda, szerintem w3c szerint tiltva is vannak ott.
válasza: válasza:viperM: azért benned most nagyot csalódtam. margin-bottom a lista elemekre? ha az ul tagra teszed, azt is könnyebben fogadtam volna, de a valódi (JÓ) megoldás a #szoveg div-re rakott padding.
Kedves kérdező a kódod sok helyen kívánni valót hagy maga után, ezért a javításhoz néhány jó tanács:
- Az ul elemet is tedd konténerbe, mert önmagában kicsit szegényes. Erre tökéletes a nav elem.
- a css stílusokat ahol lehet vond össze (margin, padding, border, ...)
- szöveges tartalmi konténernek ne adj fix magasságot, nem tudhatod mikor kerül bele a tervezettnél több szöveg. Mivel a weboldalak általában lefelé terjednek, célszerű ezt a lehetőséget megadni a tartalmi konténereknek. Helyette a min-height tulajdonságot javaslom.
- ilyen szörnyű blabla szöveget ne használj. Kitöltőszövegnek régen kitalálták a Lorem ipsum frázisokat, rengeteg generátor van a neten.
- az anchor tag alapszínét mindig határozd meg a css-ben, mert az alapbeállítás böngészőnként, illetve környezeti beállítáonként változhat.
- a teljes konténerre tett opacityvel nem tudom mi volt a célod, de a háttér áttetszőségét inkább rgba-val old meg, mert így a teljes konténer (beleértve a benne lévő menüt is) áttetszővé válik, ami nem túl előnyös.
- a lista elemek formázásakor inkább a bennük lévő tartalmat formázd. (a div valóban kerülendő), de egy blokká konvertált anchor tökéletesen teszi a dolgát, ráadásul nagy előnye, hogy a teljes lista blokk kattintható válik, nemcsak a szöveg.
- lista elemeknél nem kell ragaszkodni a balra floatolt blokkokhoz, jó az inline blokk is, főleg, mivel ilyenkor a nav-ra helyzett text-align is hat rá, így jobbra/balra vagy középre is tudod csúsztatni a menüt a nav boxban, ha nem töltené ki azt.
Sok sikert!
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!