Új hozzászólás Aktív témák
-
Sk8erPeter
nagyúr
válasz
zotya678 #2692 üzenetére
Az egész sidebar div-et pakold bele a container div-be, hisz szerves részét képezi, és jelenleg külön elemként szerepel. A container div ne egy osztály (class) legyen, hanem inkább egy azonosító (id), mivel ebből úgyis csak egyetlen darab van, és a struktúra szempontjából így sokkal logikusabb. Amiből úgyis csupán egyetlen elem van, az inkább legyen azonosítóval (id) ellátott elem, és akkor a CSS-fájlban ne ponttal hivatkozz rá ( div.container), hanem kettőskereszttel:
#container{
/* ... */
}
Ezenkívül a HTML-részben írd át a <div class="container"> részt
<div id="container">
-re.
A container div-nek adj meg valami fix szélességet, pl.
#container {
width:1024px;
margin: 0px auto; /* középre helyezi */
}
Az összes padding-et és margin-t először szedd ki, én azzal kezdtem, amikor néztem az oldalad, mert annyira zavaró ez a sok negatív értékű margin, mert itt teljesen felesleges mínuszban tologatni az elemeket. Szóval most fontos, hogy úgy kezdd, hogy kitörlöd az összes padding-et, margin-t, kezdjük inkább elölről.
A topbackground, a text és a textbottom egybe tartoznak, és külön egységet képeznek, mivel ez az egész lesz bal oldalt, jobb oldalt a menü, ezért ezt esetleg érdemes még bepakolni egy külön div-be, mert akkor egyben sokkal könnyebben tologatható, kezelhető az egész, mint külön-külön: tehát legyen mondjuk egy ilyesmi:
<div id="main">
<div class="topbackground"> </div>
<div class="text"> ... </div>
<div class="textbottom"></div>
</div>Eddig összegezve: van külön egy oldalcím fejléc, az közrefogja az alatta lévőket. Legalábbis gondolom valahogy így képzelted. Az alatt bal oldalt a fő tartalom, jobb oldalt a menü.
Most 1024px széles a fő tartalom, én ennek megfelelően a main-nek pl. 724px szélességet adok, a menünek 300-at, ezt úgy változtatod, ahogy akarod.
A Te példádat átírva:
#main{
float:left;
width:724px;
}
#sidebar {
float: right;
width: 300px;
background: fixed
}div.text-nél az a margin-top: 80px; tök felesleges, szedd ki.
Viszont ugyanide tegyél be egy padding:10px; -et, hogy a szöveg ne folyjon egybe a kerettel.Legyen még egy ilyened:
.menu{
margin: 0px;
}És szerintem kész.
Na, de inkább feltettem a pastebinre a Te kódod kicsit javított és áttekinthetőbb változatát, nem javítottam mindenhol, de a lényeg benne van, nálam így tökéletesen jól jelenik meg, ha sok tartalom van, akkor is. Itt található: [link], itt meg a HTML-rész: [link] (egy hónapig elérhető)Sk8erPeter
Új hozzászólás Aktív témák
- Konzolokról KULTURÁLT módon
- Kiszivárgott egy lista a várható Lunar Lake modellekről
- Bestbuy játékok
- NieR: Automata™
- Google Pixel topik
- Redmi Note 12 4G - valaki fizetni fog
- Ősszel jönnek az új Intel chipek
- Anglia - élmények, tapasztalatok
- Ubuntu Linux
- AMD K6-III, és minden ami RETRO - Oldschool tuning
- További aktív témák...