Két div alatti padding mérete != a felettivel
Bonyolult kicsit a dolog, de megpróbálom leírni. Van ez a kódom: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:Köszönöm!!
■ - <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>
- 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;
- }
Először HTML legyen rendben
igen
content nélkül is hibás
Megoldás clear:right
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.
igaz
probléma
Két féle megoldás
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.
megfogadom
Attól függ
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!:)
köszönöm
Köszönöm a segítséged!
igen
neked is köszönöm:)
margin-right
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á!