Ez miért nem működik?
html:
<html>
<head>
<style type="text/css">
@import url("div.css");
</style>
</head>
<body>
<div id="one">
<h1>Névtelen</h1>
<div id="two">
Tantárgy
<ul>Matek</ul>
<ul>info</ul>
<ul>kémia</ul>
<ul>fizika</ul>
</div>
<div id="three">óra összesen
<ul>10</ul>
<ul>20</ul>
<ul>40</ul>
</div>
</div>
</body>
</html>
css:
#one {
width: 900px;
margin: 40px auto
}
0. Tessék kódmegosztó oldalt használni - pastebin, hastebin, ghostbin,... - könyebben átláthatóvá teszi a kódot.
1. <!DOCTYPE html>-et ne felejts el az elejéről.
2. Karakterkódolás és a <title> megadása is javallott
3. Az <ul> egy nem sorszámozott lista - nem a sor bentebb kezdésére szolgál - a lista elemeit <li> és </li> tagek közé kell tenni.
4. Ha egymás mellé akarsz tenni két elemet, használj például lebegtetést (float).
Példa - HTML:
CSS:
Nem egymás mellett helyezkedik el a két div.
Ez a baj.
#4: Azért nincs egymás mellett a két - two és three azonosítójú - div, mert blokkszintű elemek, amik alapértelmezésben egymás alá kerülnek. Ezt például lebegtetéssel tudod egymás mellé tenni.
Erről írtam a #3-as hozzászólásom 4. pontjában és mutattam rá kódot is.
(Meg nem mellesleg egy rakat olyan dolog volt a kódban/hiányzott a kódból, ami nem szabványossá tette az egészet - erről is írtam hozzászólásom 1-3. pontjaiban.)
Értem.
Nekem csak az lenne a lényeg, hogy legyen két egymás mellett lévő oszlopom, és azokon belül legyen felsorolás.
#6: Ott van a kijavított forráskód - mind a HTML és mind a CSS - az "egymás mellé tevést" a CSS-ben a float végzi el.
Bővebben erről például:
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!