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:

<div class="right">
  <div class="mainheader">Egyéb</div>
  <div class="maincontent"></div>
  <div class="break"></div>
  <div class="dheader">Friss letöltések</div>
  <div class="aheader">Friss cikkek</div>
  <div class="dcontent">Letöltés tartalom</div>
  <div class="acontent">Cikk tartalom</div>
  <div class="break"></div>
  <div class="mainheader">Partnerek</div>
  <div class="maincontent"></div>
</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:

div.right { 
  width: 489px; 
  float: right; 
}

div.mainheader { 
  width: 483px;
  background-image: url(tile.png);
  font-size: 10px; color: #FFFFFF;
  border: 1px solid black;
  text-align: center;
  font-weight: bold;
  padding-top: 4px;
  padding-left: 2px;
  padding-right: 2px;
  vertical-align: middle;
  height: 16px; 
}

div.maincontent {
  width: 477px;
  background-color: #F6F5F5;
  padding: 5px;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  text-align: justify;
}

div.break {
  padding-bottom: 13px;
}

div.dheader {
  float: left;
  width: 235px;
  border: 1px solid black;
  background-image: url(tile.png);
  font-size: 10px; color: #FFFFFF;
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 4px;
  vertical-align: middle;
  height: 16px;
  text-align: center; 
}

div.aheader {
  float: right;
  width: 235px;
  border: 1px solid black;
  background-image: url(tile.png);
  font-size: 10px;
  color: #FFFFFF; 
  font-weight: bold;
  padding-left: 2px;
  padding-right: 2px;
  padding-top: 4px;
  vertical-align: middle;
  height: 16px;
  text-align: center;
}

div.dcontent {
  float: left;
  width: 235px;
  background-color: #F6F5F5;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  padding: 2px;
  text-align: left;
}

div.acontent {
  float: right;
  width: 235px;
  background-color: #F6F5F5;
  border-bottom: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  padding: 2px;
  text-align: left;
}
Köszönöm!!
‹ SafariTest más színekben mutatja a honlapom Aktív link maradjon aktív ›
 ■
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.


<div id="dcontent">
  <h2 id="dheader" class="box">Friss letöltések</h2>
  <p>Letöltés tartalom</p>
</div>

<div id="acontent" class="box">
  <h2 id="aheader" class="header">Friss cikkek</h2>
  <p>Cikk tartalom</p>
</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:

div.dheader, div.dcontent, div.aheader, div.acontent {
  float:left;
}

div.dcontent{
  clear:left;
}
Ekkor Ie-ben tökéletes lesz, firefoxban azonban nem csúszik teljesen a helyére. Ehhez egy kis trükk kell:

div.right > div.aheader{
  margin-top:-(x)px; 
}
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.

<div id="leftbox">
  <h2 class="dheader"></h2>
  <div class="dcontent></div>
</div>

<div id="rightbox">
  <h2 class="aheader"></h2>
  <div class="acontent"></div>
</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á!