ugrás a tartalomhoz

Nem egymás mellett jelenik meg a két divem

Anonymous · 2006. Ápr. 19. (Sze), 21.07
Tudom lerágott csont, de nem tudom mi a baja. Itt a kód:


div.container { width: 678px; }
div.maincontainer { float: right; width: 489px; }
div.mainheader { width: 483px; background-image: url(tile.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: left; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.maincontent { width: 483px; background-color: #F6F5F5; padding: 2px; border-left: black 1px solid; border-right: black 1px solid; border-bottom: black 1px solid; }
div.sidecontainer {  float: left; width: 179px; }
div.sideheader { margin-right: 10px; float: left; width: 173px; background-image: url(tile.png); font-size: 10px; color: #FFFFFF; border: black 1px solid; text-align: center; font-weight: bold; padding-top: 2px; padding-left: 2px; padding-right: 2px; vertical-align: middle; height: 16px; }
div.sidecontent { width: 173px; background-color: #F6F5F5; border-bottom: black 1px solid; border-left: black 1px solid; border-right: black 1px solid; padding: 2px; text-align: left; }
a html pedig

<div class="container">
         <div class="sidecontainer">
	         <div class="sideheader"></div>
	         <div class="sidecontent"></div>
	</div>
	<div class="maincontainer">
		<div class="mainheader"></div>
		<div class="maincontent"></div>
	</div>
</div>
Hallottam hogy valahova clear: both; -t kell beszúrni. Az mire jó, hova kellene beszúrnom?
‹ Táblázatom szétcsúszik, ha több a tartalom benne CSS: menü készítése ›
 ■
1

hopp

Anonymous · 2006. Ápr. 19. (Sze), 21.08
hopp lemaradt a lényeg, a kód ezt produkálja: http://img484.imageshack.us/img484/3889/hibaacss9zn.jpg
3

melyik kód?

balazsgabi · 2006. Ápr. 19. (Sze), 23.19
mert a fenti sztem rendben van, amennyiben a két container felső részét egymás mellett szeretnéd elhelyezni. A hibaacss9zn.jpg kép úgy keletkezhetett, hogy a sidecontainer-t nem kielégítően lebegtetted.
5

.

Anonymous · 2006. Ápr. 20. (Cs), 06.49
és hogy is lehet ezt megoldani? köszi
2

HTML hiba?

janoszen · 2006. Ápr. 19. (Sze), 21.53
Mi lenne, ha először levalidálnád a kódot és utána keresnél CSS hibákat? :D A feltett kódodban ugyanis hiányzik egy div...
4

.

Anonymous · 2006. Ápr. 20. (Cs), 06.48
hol hiányzik div? szerintem nincs a cssben olyan hiba ami ezt eredményezné, hogy egymás mellé rakja.
6

Helytelen szélesség

Török Gábor · 2006. Ápr. 20. (Cs), 10.34
div.sidecontainer {  float: left; width: 179px; }
div.sideheader { margin-right: 10px; float: left; width: 173px; [...] }
A szülő 179 px széles, az egyik bennfoglaló elem viszont 173 px (width) + 10 px (leftmargin) = 183 px helyet követel magának. Szegénnyel jól kiszúrtál.
7

nem a szélesség

balazsgabi · 2006. Ápr. 20. (Cs), 23.47
továbbra is fenntartom, hogy a sidecontainer vagy nem float-olt, vagy a szélessége nagyobb mint 173px. (a linkelt kép alapján)
A sideheader jobb margója bármekkora lehetne amig balra lebeg.

Ha a témaindító belinkelné a kép forrását, akkor sztem kiderülne, hogy az nem egyezik a fenti kóddal.
gábor
8

ok

Anonymous · 2006. Ápr. 21. (P), 12.09
ok köszönöm, így márjó, margint ki kellet vennem. Amúgy mi van abban az esetben, ha 3 ilyen divet akarok egymás mellé rakni? Úgy értem hogy három doboz egymás mellett.
9

attól függ

balazsgabi · 2006. Ápr. 21. (P), 13.38
Lehet ez is egy megoldás, de a konkrét elképzelés esetében könnyebb válaszolni.

Egyébként most már tényleg kíváncsi vagyok, hogy a sideheader margóját vetted ki, és ez oldotta meg a problémádat?
gábor
10

.

Anonymous · 2006. Ápr. 21. (P), 14.01
igen, kivettem a margint és jó
11

elképzelés

Anonymous · 2006. Ápr. 21. (P), 14.04
Egy ilyet szeretnék összedobni http://img215.imageshack.us/img215/7476/ilyete7hz.jpg
12

én meg...

Anonymous · 2006. Ápr. 21. (P), 14.10
én pedig jó időt szeretnék.

gex
13

jó idő

Anonymous · 2006. Ápr. 21. (P), 14.16
Akkor inkább látogass el az országos meteorológiai szolgálat weblapjára és ott reklamálj, de ide ne írj hülyeségeket. Ez nem a játszótér.
14

:]

Anonymous · 2006. Ápr. 21. (P), 14.26
nem is a vágyaid közlésére szolgáló fórum.

gex
19

..

Anonymous · 2006. Ápr. 21. (P), 16.37
Megkérdezte tőlem mit szeretnék én megmutattam. Ne szolalj már meg légyszives. köszönjük.
15

Időjárásban nem, de kódban esetleg tudok segíteni ;)

beef · 2006. Ápr. 21. (P), 14.45
Itt a CSS :

.bal {
	width: 110px;
	height: 50px;
	background-color: Black;
	float: left;
}

.kozep {
	height: 50px;
	background-color: Red;
}

.jobb {
	width: 110px;
	height: 50px;
	background-color: Green;
	float: right;
}

.keret {
}

.fejlec {
	height: 10px;
	background-color: Olive;
}
Ez a HTML :

<div class="keret">
<div class="fejlec"></div>

<div class="bal"></div>
<div class="jobb"></div>
<div class="kozep"></div>

</div>
Remélem segít, van még rajta mit csiszolgatni, de kiindulásnak jó.
17

Egymasba agyazott lista

Jano · 2006. Ápr. 21. (P), 15.56
Én egymasba agyazott listakat hasznalnek. A friss_cuccok listaja: felso szint: progik, cikkek, topikok, belso listak ezek eleme.

Altalaban igaz az, hogy nem jo a kinezet alapjan elnevezni a strukturalis elemekt: mint pl keret vagy jobb és bal.

A megoldasodban egyebkent ha nem a kozepso a leghosszabb akkor a jobb vagy bal oszlop kiloghat a keretbol a floatolas miatt!

Megj: ha 3 oszlopot kell egymas melle tenni akkor nem kell a baloldalit balra, a jobboldalit jobbra floatolni, altalaban egyszerubb ha mind a 3 oszlop balra van floatolva. Igy a kodbeli sorrend megegyezik a megjeleno sorrenddel is.
20

köszi

Anonymous · 2006. Ápr. 21. (P), 16.38
Köszönöm.
16

ne hagyjatok hüllén meghalni

balazsgabi · 2006. Ápr. 21. (P), 15.18
ha egy elemet float-olok jobbra, akkor a bal margója "mintha ott se lenne", illetve a másik irányba fordítva.
Vagy ez csak nálam jelentkezik?
gábor
18

Nalad lesz a hiba.

Jano · 2006. Ápr. 21. (P), 16.08
Egy tipikus elofordulas: szovegben "korbefolyatott" kép. Egyik oldalra van igazitva (floatolva) es a masik oldalan van margo, hogy a szoveg ne tapadjon ra.
21

és igen

balazsgabi · 2006. Ápr. 21. (P), 22.45
velem volt a hiba, szigorúan a fenti kódra koncentráltam. Amint "körülfolyattam" már látszott is a margin. Köszönöm!
gábor