ugrás a tartalomhoz

Három DIV változó szélességgel tölrténő megadása

fERI · 2008. Nov. 22. (Szo), 13.41
Sziasztok!

Az alábbi megjelenési problémával van gondom:
Van egy DIV-em (ami a keret) és ebben kellene nekem 3 db DIV-et egymás mellé tennem úgy, hogy a következő feltételeket teljesítse az alábbi szerkezet mellett:

<div id="keret">
	<div id="baloldal">változó tartalom baloldalon</div>
	<div id="kozepen">változó tartalom középen</div>
	<div id="jobboldal">változó tartalom jobboldalon</div>
</div>
-a három DIV szélességének (baloldal+kozepen+jobboldal) ki kellene töltenie a keret DIV szélességét;
-mind a három DIV-ben előre nem ismert, egy soros tartalom található (de az biztos, hogy a három tartalom szélessége nem lesz hosszabb, mint a keret div szélessége.

A CSS területén valami ehhez hasonlóig jutottam el:

div#keret{
	position: relative;
	width: 500px;
	border: 1px solid #000000;
}
div#baloldal{
	position: relative;
	float: left;
	background-color:#CCCCCC;
}
div#kozepen{
	position:relative;
	float: left;
	background: #99FFFF;
}
div#jobboldal{
	position: relative;
	float: left;
	background-color:#FFCCFF;
}
Abban kérném a segítséget, hogy a szélességek megadásával kapcsolatban mit kellene megadni. Már vagy 3 napot próbálkoztam, de nem jött össze (úgy néz ki, hogy ehhez nagyon láma vagyok, bocsássátok meg nekem!). A szélességek megadásával kapcsolatban direkt nem adtam meg semmit, mert nem szeretném a tisztelt közösséget a butaságaimmal befolyásolni.

Felvetődhet a kérdés, hogy hova kellhet nekem egy ilyen? Egy cikkeket tartalmazó dobozt kellene összeállítanom úgy, hogy a középső DIV-nek egy vonal a kitöltése középen (háttér nélkül, mivel más átmeneti színekre rálóghat). Az baloldal DIV tartalmazná a cikk címét (aminek a hossza ismeretlen), a kozepen DIV tartalmazza a kitöltő vonalat vizszintesen a DIV közepén (aminek a szélessége szintén ismeretlen) és a jobb oldal DIV meg egy linket (aminek mondjuk a szélessége lehet fix).

Tudom, hogy a probléma megoldható táblázattal, de szerintem az nem erre való.

Előre is közönöm a segítséget és várom az ötleteket.

Üdv.
fERI
 
1

listával esetleg

lorko · 2008. Nov. 22. (Szo), 16.48
szia,

ha jól értem akkor bal oldalt a cikk címe, jobb oldalt a (rá mutató) link van,
középen pedig egy vonal fut végig, és ezekből több lehet egymás alatt.

Én listát használnék erre, vagy definition list-et: itt egy példa:
CSS Styled Restaurant Menu

Remélem jól értettem mit is szeretnél.
2

Re lista

fERI · 2008. Nov. 23. (V), 16.45
Szia lorko!

Sajnos a link, amit adtál, egyenlőre nem nyitható meg. Valószínű, hogy a kiszolgáló szerverrel van valami gond.

A listával kapcsolatban szerintem ugyan úgy, ez az automatikus szélesség megadás problémát jelenthet. Kb. jól gondoltad, amit írtam. Annak érdekében, hogy jobban át lehessen látni a dolgokat, beteszek ide egy képet (remélem, működni fog).



Valami ilyent kellene megvalósítani, és a problémám a "fejléc" résszel van (azaz ahol a cím van), mivel abban cím az változó hosszúságú.

A linket amit küldtél megnézem, köszönöm.

Valakinek esetleg még valami ötlete?

Üdv.
fERI
3

Sok trükk nélkül...

TeeCee · 2008. Nov. 24. (H), 09.33
...is símán megoldható szerintem:
egy konténer DIV, amiben van a div-ekben a cím, dátum, szöveg (kép), forrás, tovább link ilyen sorrendben.
A konténer DIV-nek adsz keretet, a címet és dátumot meg hozzáigazítod - megadsz háttérszínt és akkor takarja a keretet is (position: relative a div-nek és utána a benne lévő elemeket ahhoz tudod igazítani top, left párossal)
Ha nem jutsz vele semmerre, jelezd, mert akkor megpróbálok egy példát alkotni. (bár CSS-ben nem vagyok egy guru, de ez nekem egyszerűnek tűnik)
4

A legegyszerűbb megoldás.

zsotyooo · 2008. Nov. 24. (H), 18.31

<div id="keret">  
  <div id="jobboldal">változó tartalom jobboldalon</div>  
  <div id="baloldal">változó tartalom baloldalon</div>  
  <div id="kozepen">változó tartalom középen</div>  
</div>

#jobboldal{float:right; background:#fff; margin:-5px 10px 0 0;}
#baloldal{float:left; background:#fff; margin:-5px 0 0 10px;}
#kozepen{margin-top:10px; border: 1px solid #000;}
Persze kicsit kell rajta finomítani
5

Még egyszerübb..

Dömcsi · 2008. Nov. 24. (H), 18.51
Szerintem ez a legegyszerübb és könnyen formázható:
<fieldset style="border:4px double red;margin:10px;"><legend>WALAMI jódolog</legend>
<p><img src="képcime" style="float: right;" />
Duma duma duma
duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma du
</p>
 <br />
<p style="clear:both;"><a href="#" style="float:right;">valahova</a>ez itt valami 
</p>
</fieldset>
Bárhova belehet rakni és minden böngészőben müködik.
6

Ez is jó, csak...

zsotyooo · 2008. Nov. 25. (K), 10.13
kimaradt a jobb felső cimke, meg a HTML kód is túlzottan függ az elrendezéstől. :)
7

Itt van csak nélkül....

Dömcsi · 2008. Nov. 25. (K), 16.54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu" >

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<title>Három div helyett</title>

	<style type="text/css">

body { padding: 0;
margin: 10px; 
}

#lap { margin:0 0;

font-size: 1em;
}		

fieldset { border-top:4px double red;
margin:10px 10px 20px 10px;
border-bottom:4px double red;
border-left:4px double red;
border-right:none;
}

.datum { float:right; 
margin-top:-25px;
margin-right: 15px;
background: white;
padding:0 2px;		

}
.kep { float: right;
}		
.tovabb { float:right; 
background: white;
margin-top:-35px; 
margin-right:35px;
padding:0 2px;
 }
.forras { clear: both;
}		

</style>

</head>

<body>



<div id="lap"> 

<fieldset>
<legend>WALAMI</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://weblabor.hu/sites/all/themes/wl/images/wlheader.png" alt="KÉP" class="kep" />
Duma duma duma
duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p>
</fieldset>
<a href="#" class="tovabb"> Tovább</a>

<fieldset>
<legend>WALAMI HOSSZAB CIMMEL</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://weblabor.hu/misc/fs/ne_tord_a_fejem.jpg" alt="KÉP" class="kep" />
Duma duma duma
duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p>
</fieldset>
<a href="#" class="tovabb"> Tovább</a>

<fieldset>
<legend>MÉG WALAMI</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://weblabor.hu/misc/fs/wlbt_phpfejlesztesfelsofokoncimlap.jpg" alt="KÉP" class="kep" />
Duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p>
</fieldset>
<a href="#" class="tovabb"> Tovább</a>
<fieldset>
<legend>A MINTADARAB</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://www.touristonline.hu/weblaborra.jpg" alt="KÉP" class="kep" />
Duma duma duma
duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p>
</fieldset>
<a href="#" class="tovabb"> Tovább</a>

</div>

</body>

</html>
Igy talán jó.
8

Na igen!

fERI · 2008. Dec. 4. (Cs), 11.58
Sziasztok!

Bocsika, de eddig nem voltam úgy net közelben, hogy tudjak ide beírni. Köszönöm a megoldásokat, de sajnos nem jók, mivel a kerten megjelenítendő szövegek mögött nem lehetnek háttér színek, mivel az alatta lévő grafika kinézete nem egyszínű, hanem átmenetes. Viszont ha a szövegek háttere nem kerül kitöltésre, akkor ugya valamelyik alatt megjelenik a keret. Ezek többségét én is végig próbálgattam, és nem boldogultam, azért írtam be ide nektek. Képzeljétek el, hogy az a szerketet, melyet a 2. hozzászólásban bemutattam, a fehér háttér helyett valami színátmenetes dolog, vagy egyetleg egy kép van.

Még én is küzdők vele, de egyre jobban hajlok abba az irányba, hogy az egészet táblázatban fogom megjeleníteni. Tudom, elég tér, de egyszerűen nem tudom összehozni....

Ha valakinek esetleg van még ötlete, akkor azt szívesen várom.

További kellemes, szép napot kívánok.

Üdv.

fERI
9

Negativ margó...

Dömcsi · 2008. Dec. 4. (Cs), 22.11
Igy már lehet akármilyen háttere és pont olyan mint a képen:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu" lang="hu" >

<head>

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

	<title>Három div helyett</title>

	<style type="text/css">

body { padding: 0;
margin: 10px; 
}

#lap { margin:0 0;border:1px solid black;

font-size: 1em; 
}
.befogo { margin-right:110px; 
}		

fieldset { border-top:4px double red;
margin:10px 10px 20px 10px; 
border-bottom:4px double red;
border-left:4px double red;
border-right:none; 
}

.datum { float:right; 
margin-top:-25px;
margin-right: -105px;
padding:0; position:relative;	

}
.kep { float: right;margin-right:-110px;position:relative;
}		
.tovabb { float:right; 
margin-bottom:-35px; 
margin-right:-95px;
padding:0; position:relative;
 }
.forras { clear: both;
}		

</style>

</head>

<body>



<div id="lap"> 
<div class="befogo">
<fieldset>
<legend>WALAMI HOSSZAB CIMMEL</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://weblabor.hu/misc/fs/ne_tord_a_fejem.jpg" alt="KÉP" class="kep" />
Duma duma duma
duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p><a href="#" class="tovabb"> Tovább...</a>
</fieldset>


<fieldset>
<legend>MÉG WALAMI</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://weblabor.hu/misc/fs/wlbt_phpfejlesztesfelsofokoncimlap.jpg" alt="KÉP" class="kep" />
Duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p><a href="#" class="tovabb"> Tovább...</a>
</fieldset>

<fieldset>
<legend>A MINTADARAB</legend>
<p class="datum"> 2008.11.25</p>
<p>
<img src="http://www.touristonline.hu/weblaborra.jpg" alt="KÉP" class="kep" />
Duma duma duma
duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma duma 
</p>
<p class="forras">
<a href="#">Forrás</a> 
</p>
 <a href="#" class="tovabb"> Tovább...</a>
</fieldset>

</div>
</div>

</body>

</html>