ugrás a tartalomhoz

Ikon és tartalom relatív pozicionálása CSS-sel

monghuz · 2005. Aug. 29. (H), 14.26
Hali!

A gondom az lenne, hogy csináltam egy kis hírmegjelenítő modult, aminek ilyen lekerekített oldalú keretet gondoltam, táblázattal nem szeretném megoldani, igy neki áltam CSS osztályokkal felépíteni valahogy igy nézne ki:

+-----------------------------+
|cim           |        dátum |
+-----------------------------+
|taltalom....        +-----+  |
|                    |ikon |  |
|                    +-----+  |
+-----------------------------+
|lekerekítés                  |
+-----------------------------+
a gond az, hogy a lekerekítés DIV alja az ikon DIV aljával van egy vonalban... valamiért az ikon DIV-hez képest igazítja magát és nem a fő keret DIV-hez..

HTML:
<div class="content">
	<h3 class="content_cim">cim</h3>
	<div class="content_date">date</div>
	<div class="content_text">text</div>
	<div class="content_img"><img src="/forras\pngs_filetypes\HTTP.png" alt=""></div>
	<div class="content_bottom"></div>
</div>
CSS:
.content		{ margin:0 auto; padding:0; border: 1px solid #000; width:674px; 
background:url("images/hirek/hatter.gif"); height:300px;}

.content_cim	{ margin:0 auto; padding:0; border: 1px solid #f00; width:389px; 
height:30px; background:url("images/hirek/cim.gif")  no-repeat; float:left; text-align:left; text-valign:middle;
font-family: Comic Sans MS; font-size: 15px; font-weight: bold; color:#fff; }

.content_date	{ margin:0 auto; padding:0; border: 1px solid #0f0; width:281px; 
height:30px; background:url("images/hirek/date.gif") no-repeat; float:left; text-align:right; text-valign:middle;
font-family: Comic Sans MS; font-size: 15px; font-weight: bold; color:#152541;}

.content_text	{ border: 1px solid #00f; width: 450px; min-height:130px; background:url("images/content_bg.png");
font-family: Times New Roma; font-size:11px; color:#152541;
float:left; position:relative; left:20px; top:20px;}

.content_img	{ margin:0 auto; padding:0; border: 1px solid #ff0; width:130px; height:130px; 
background:url("images/hirek/ikon.gif"); float:right; position:relative; right:20px; top:20px;}

.content_bottom	{ margin:0 auto; padding:0; border:0; width:670px; height:20px;
background:url("images/hirek/bg_bottom.gif"); clear:both; position:relative; left:0px; bottom:0px;}

.content_cim h3{ font-family: Comic Sans MS; font-size: 15px; font-weight: bold; color:#fff; position:relative; left:5px; }
Segítségeteket előre is köszi..

bye Tomi
‹ Merlin ügynök Textarea alapértékének helyes beállítása ›
 ■
1

Miért?

td · 2005. Aug. 29. (H), 15.28
Miért használsz pozícionálást az ikonnál, ha jobbra float-olod?

Egyébként ez a felugrás dolog egyből ismerős volt, ahogy olvastam, és a float-ra gyanakodtam. Nem tudom attól van-e, de én is szívok ezzel. Van egy nagy div-em, benne két kisebb, egyik balra, másik jobbra téve, persze a méretek kiszámolva. És a nagy div alatti másik div beugrik az iménti "alá" (tehát mögé). NN7.2-ben. FF-ben nem tudom, de sejtem, hogy igen. IE-ben nem csinálja.
2

Guillotine bug?

Dualon · 2005. Aug. 29. (H), 15.46
A kódot sajnos nincs időm megnézni, de nem a Guillotine bugra gondoltok?
3

re

monghuz · 2005. Aug. 29. (H), 16.05
Az ikonoknál azért hawsználom a pozicionálást hogy ne ragadjon rá a tartalmazó keret szélére.

Dualon: Erröl a bugról még nem is hallottam, amúgy css-ben nem vagyok valami nagy spiler ezért is fordultam hozzátok, de végignézve az oldalt amit belinkeltél az enyém egy kicsit másjellegü mert az alsó csik és az ikon DIV-ek aljai vannak egy vonalban és nem a tetejük...
azért még próbálkozom egyet, ha van valami fejlemény írok..

bye
4

nem G

td · 2005. Aug. 29. (H), 16.21
Nem az. Neki más lehet egyébként, mint nekem, mert nálam két külön div van egymás után a forrásban, és ezeknek egymás alatt, tehát függőlegesen egymást követően kéne megjelenniük (gondolom: alapból, mert semmit nem pozícionálok rajtuk). De az alsó beugrik a felső alá, ráadásul a benne lévő táblázat szét is megy.
5

CSS relativ pozicionálása

Anonymous · 2005. Aug. 30. (K), 12.00
Csak érdekelne a pozicionálások lehetőségei.
Margót is fel lehet használni pozicionáláshoz. A margó átlátszó úgy tudom és a keretek helyzeteit lehet szabályozni. Ilyen módon nem próbálod meg megoldani?
Elnézést kérek ha nem egészen a témába vág a hozzászólásom.
6

Más ötlet?

monghuz · 2005. Aug. 30. (K), 13.28
A margó tényleg lehet átlátszó, viszont jelen esetben nekem nem erre van szükségem, legalább is szerintem, mert a margóval csak a DIV és a szöveg ill többi elem közti távolságot állítom.. viszont nekem az kellene egy a tartalmazó div aljához "ragadjon" a láb div alja..

remélem értitek mit szeretnék..
bye
7

jó a margó

Anonymous · 2005. Aug. 30. (K), 14.36
sztem is jó ötlet a margó, mert az a külső részéhez ad hozzá egy elemnek, ha lehet ilyen szakmaiatlanul fogalmazni. :]

tehát csapj egy margin-top: 20px; -et a bottom divedhez.
8

kipróbáltam

monghuz · 2005. Aug. 30. (K), 22.13
Elöször megörültem hogy hűű milyen jó mükszik, aztán mégsem :( mert az egy dolog hogy most már nem egy vonalban van a content_text meg a content_bottom alja.. és minden csili vili.. csakhogy ha növelem a szöveget akkor a tartalmazó div (content) nem novekszik, pedig csak min-height van megadva...

tényleg ezt már régebben se értettem, miért van az hogy ha nem adok meg overflow értéket és egy divbe elkezdek tartalmakat írni akkor az növekszik, viszont ha van egy tartalmazó div és abban egy másik
<div class="tartalmazo">
  <div class="szoveg">bflknb</div>
</div>"
és növelem a szöveget akkor csak a szoveg div mérete nö, a tartalmazóé nem...
9

dehogynem

Hojtsy Gábor · 2005. Aug. 30. (K), 22.21
Dehogynem nő, ha csak nem adtál meg a belső divre float-ot. Szépen kell egy másik div alá, ami clear:both, és akkor a tartalmazót is hozzá növeli.
10

mégis guillotine bug :P

Anonymous · 2005. Aug. 30. (K), 22.30
pont erről találsz leírást a fentebb említett és belinkelt guillotine bug-gal foglalkozó oldalon.
11

:(

monghuz · 2005. Aug. 30. (K), 23.55
<div class="content">
	<h3 class="content_cim">cim</h3>
	<div class="content_date">date</div>

	<div class="content_text">text<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>vege</div>
	<div class="content_img"><img src="/forras\pngs_filetypes\HTTP.png" alt=""></div>
	<div class="content_bottom"></div>	<div class="clr"></div>
</div>
a css kód csak a clr classal bövült ki.. de még mindig nem nö a tartalmazó háttere a tartalommal :(
12

CSS-sel pozicionálni

Anonymous · 2005. Aug. 31. (Sze), 13.21
A pozició megadásnál van lehetőség egyéb tuladonságokat beállítani
ilyen a { position: absolute; bottom: 0px; right: 10px; } van még a relative, fix (a képernyőre vonatkozik nem dokra) és a static (alapértelmezett)
a bottom, right, to, left jellemzők itt eltolást jelent a befoglalo elemhez képest. De most nem mélyednék bele a témába, mert nincs igazából gyakorlatom se.
Én az absolute értékkel kísérelném meg a megoldást.
Vannak még variációk :)