ugrás a tartalomhoz

Két div alatti padding mérete != a felettivel

Anonymous · 2006. Szep. 3. (V), 16.29
Bonyolult kicsit a dolog, de megpróbálom leírni. Van ez a kódom:
  1. <div class="right">  
  2.   <div class="mainheader">Egyéb</div>  
  3.   <div class="maincontent"></div>  
  4.   <div class="break"></div>  
  5.   <div class="dheader">Friss letöltések</div>  
  6.   <div class="aheader">Friss cikkek</div>  
  7.   <div class="dcontent">Letöltés tartalom</div>  
  8.   <div class="acontent">Cikk tartalom</div>  
  9.   <div class="break"></div>  
  10.   <div class="mainheader">Partnerek</div>  
  11.   <div class="maincontent"></div>  
  12. </div>  
A Friss Letöltések, Friss cikkek, és a hozzájuk tartozó tartalom feletti rész 13 pixelre van, az az alatti Partnerek blokkhoz viszont hozzáér. Felraktam egy képet: http://img77.imageshack.us/img77/8468/dasnb4.jpg Miért van ez? Itt a css:
  1. div.right {   
  2.   width489px;   
  3.   floatright;   
  4. }  
  5.   
  6. div.mainheader {   
  7.   width483px;  
  8.   background-imageurl(tile.png);  
  9.   font-size10pxcolor#FFFFFF;  
  10.   border1px solid black;  
  11.   text-aligncenter;  
  12.   font-weightbold;  
  13.   padding-top4px;  
  14.   padding-left2px;  
  15.   padding-right2px;  
  16.   vertical-alignmiddle;  
  17.   height16px;   
  18. }  
  19.   
  20. div.maincontent {  
  21.   width477px;  
  22.   background-color#F6F5F5;  
  23.   padding5px;  
  24.   border-left1px solid black;  
  25.   border-right1px solid black;  
  26.   border-bottom1px solid black;  
  27.   text-alignjustify;  
  28. }  
  29.   
  30. div.break {  
  31.   padding-bottom13px;  
  32. }  
  33.   
  34. div.dheader {  
  35.   floatleft;  
  36.   width235px;  
  37.   border1px solid black;  
  38.   background-imageurl(tile.png);  
  39.   font-size10pxcolor#FFFFFF;  
  40.   font-weightbold;  
  41.   padding-left2px;  
  42.   padding-right2px;  
  43.   padding-top4px;  
  44.   vertical-alignmiddle;  
  45.   height16px;  
  46.   text-aligncenter;   
  47. }  
  48.   
  49. div.aheader {  
  50.   floatright;  
  51.   width235px;  
  52.   border1px solid black;  
  53.   background-imageurl(tile.png);  
  54.   font-size10px;  
  55.   color#FFFFFF;   
  56.   font-weightbold;  
  57.   padding-left2px;  
  58.   padding-right2px;  
  59.   padding-top4px;  
  60.   vertical-alignmiddle;  
  61.   height16px;  
  62.   text-aligncenter;  
  63. }  
  64.   
  65. div.dcontent {  
  66.   floatleft;  
  67.   width235px;  
  68.   background-color#F6F5F5;  
  69.   border-bottom1px solid black;  
  70.   border-left1px solid black;  
  71.   border-right1px solid black;  
  72.   padding2px;  
  73.   text-alignleft;  
  74. }  
  75.   
  76. div.acontent {  
  77.   floatright;  
  78.   width235px;  
  79.   background-color#F6F5F5;  
  80.   border-bottom1px solid black;  
  81.   border-left1px solid black;  
  82.   border-right1px solid black;  
  83.   padding2px;  
  84.   text-alignleft;  
  85. }  
Köszönöm!!
 
1

Először HTML legyen rendben

Jano · 2006. Szep. 3. (V), 17.50
Ez így nem lesz jó! A cikkek címe és a cikkek tartalma legyen szépen egymás után a kódban is.
2

igen

Anonymous · 2006. Szep. 3. (V), 18.29
ezt én is így akartam, de ahogy beirtam rögtön a friss cikkek fölé rakta a cikkekhez tartozo content divet
3

content nélkül is hibás

Anonymous · 2006. Szep. 3. (V), 18.32
Kipróbáltam hogy kiszedem a contentrészt, és ugyan úgy 0 pixel hely marad a partnerek és a 2 div között.
4

Megoldás clear:right

Csiszár Attila · 2006. Szep. 4. (H), 09.47
Szia!
Adj egy clear:right tulajdonságot a div.mainheader-nek, a div.maicontent-nek illetve a div.break-nek. A right div-ed ugyanis jobbra float-oltad és így a dobozok benne is jobbra fognak igazodni... nem csúsznak be a a,d contentek alá.

Egyébként én személy szerint másképp csinálnám a dolgot. A fejlécekhez <h*> használnék és ezt befognám egy-egy div-es "dobozba". Így könnyebben átlátnád a dolgot.
Pl.
  1. <div id="dcontent">  
  2.   <h2 id="dheader" class="box">Friss letöltések</h2>  
  3.   <p>Letöltés tartalom</p>  
  4. </div>  
  5.   
  6. <div id="acontent" class="box">  
  7.   <h2 id="aheader" class="header">Friss cikkek</h2>  
  8.   <p>Cikk tartalom</p>  
  9. </div>  
Persze ez esetben a CSS is módosul!
5

igaz

Anonymous · 2006. Szep. 4. (H), 11.15
köszönöm!
6

probléma

Anonymous · 2006. Szep. 4. (H), 11.23
egyébként a probléma még mindig az hogy ha a dheader, dcontent, illetve a aheader, acontent ebben a sorrendbe kerül a forrásba, akkor a dheader alá kerül az acontent, az aheader fölé pedig a dcontent. Clear: Right elemet pedig beraktam oda ahova mondtad, és így is gázos.
7

Két féle megoldás

Csiszár Attila · 2006. Szep. 4. (H), 15.51
Ha nagyon ragaszkodsz ahhoz, hogy mind a fejlécek, mind a tartalom div-ekben legyen, akkor a következőket kell módosítanod:
  1. div.dheader, div.dcontent, div.aheader, div.acontent {  
  2.   float:left;  
  3. }  
  4.   
  5. div.dcontent{  
  6.   clear:left;  
  7. }  
Ekkor Ie-ben tökéletes lesz, firefoxban azonban nem csúszik teljesen a helyére. Ehhez egy kis trükk kell:
  1. div.right > div.aheader{  
  2.   margin-top:-(x)px;   
  3. }  
Az IE ezt a sort nem tudja értelmezni, mert nem "ismeri" a szülő-gyermek kiválasztást, ezért kihagyja, az (x) helyére akkora értéket kell írnod, amekkora a bal oldalsó dobozod fejlécének magassága, hogy egy vonalba kerüljön vele.

DE ennek lenne egy sokkal egyszerűbb formája is. Mint már írtam, ha a doboz fejlécét és doboz tartalmát befognád egy div-be akkor sokkal egyszerűbben lehetne megoldani a dolgot.
  1. <div id="leftbox">  
  2.   <h2 class="dheader"></h2>  
  3.   <div class="dcontent></div>  
  4. </div>  
  5.   
  6. <div id="rightbox">  
  7.   <h2 class="aheader"></h2>  
  8.   <div class="acontent"></div>  
  9. </div>  
És akkor a "leftboxot" balra float-olod, a "rightbox" pedig szépen mellé fog csúszni abban az esetben, ha a két doboz szélessége nem haladja meg az őket befogó div-et!
8

megfogadom

Anonymous · 2006. Szep. 4. (H), 16.00
megfogadom a tanácsod, ha h2-t akarok használni akkor csak annyi a dolgom hogy a cssbe átirom a div.aheadert, h2.header-re?
9

Attól függ

Csiszár Attila · 2006. Szep. 4. (H), 16.16
Attól függ milyen osztályba sorolodat a h2-es elemedet.
Ha a html kódban <h2 class="aheader"></h2> -t használsz akkor h2.aheader kerül a css-be.

Még egy tipp, mondjuk az összes, hasonló tulajdonságú fejlécedet egy azonos class="header"-el láthatnád el, így nem kellene mindegyiknek külön-külön megadni ugyanazokat a tulajdonságokat. De szerintem olvasd át a Weblabor CSS cikkjeit, mert ahogy látom ismerkedsz a témával, és nagyon hasznos dolgokat olvashatsz ott, és különben is magadtól sokkal jobb rájönni a dolgokra!:)
10

köszönöm

Anonymous · 2006. Szep. 4. (H), 16.37
Igen, én is így gondoltam a h2-es dolgot, hogy csak a divet átírom h2re. Ez a h2 használata átláthatóságon kívül másban nem különbözik divel? Szóval ez csak ilyen esztétikai dolog?

Köszönöm a segítséged!
11

igen

Anonymous · 2006. Szep. 4. (H), 21.35
Nagyjából igen, de pl. a h* -hoz alapból margót rendel a böngésző, tehát azt nem árt nullára beállítani. És persze a betűméretet csökkenteni a kívánt nagyságra...
12

neked is köszönöm:)

Anonymous · 2006. Szep. 4. (H), 22.01
Utolsó kérdésem és nem rabolom többet az időtöket. A friss cikkek, és letöltések között szeretnék 5 pixel helyet. Ezt úgy próbáltam megoldani, hogy a méretükből visszavettem. Ez azt eredményezte hogy az egész jobb oldaláról hiányzik 5 pixel, és nem olyan széles mint a partnerek. Mi a helyed eljárás ilyenkor?
13

margin-right

Csiszár Attila · 2006. Szep. 5. (K), 15.34
A megoldás: margin-right a bal oldali dobozodnak!
De vigyázz mert, a dobozok szélessége, plusz a margó plusz a keretek nagysága nem lehet több az őket befogó right div-ed szélességvel, különben a jobb oldali dobozod le fog csúszni a bal oldali alá!