Kezdőoldal » Számítástechnika » Weblapkészítés » Mivel tudok egy felsorolást...

Mivel tudok egy felsorolást egymás mellé tenni? Úgy értem, hogy mondjuk termék leírás1-bal oldalt, aztán termék leírás2-középen, termékleírás3-jobb oldalt. Mindezt 1 div alatt.

Figyelt kérdés

2012. jan. 25. 03:07
 1/4 Joco1114 válasza:

Sok megoldás lehet, íme egy, remélem, ilyenre gondoltál:


<style>

#content {

width: 890px;

font: normal 10pt Arial;

//border: 1px solid red;

}


#bal, #kozep, #jobb {

width: 260px;

height: 200px;

float: left;

padding: 10px;

-moz-border-radius: 8px;

-webkit-border-radius: 8px;

border-radius: 8px;

-webkit-box-shadow: rgba(255, 0, 0, 0.6) 3px 3px 10px;

border:1px solid #aaa;

}


#bal { margin: 0px 10px 20px 0px; }

#kozep { margin: 0px 10px 20px 10px; }

#jobb { margin: 0px 0px 20px 10px; }


#clear { clear: both; }

</style>


<div id="content">

<div id="bal">

Leírás 1/1

</div>

<div id="kozep">

Leírás 1/2

</div>

<div id="jobb">

Leírás 1/3

</div>



<div id="bal">

Leírás 2/1

</div>

<div id="kozep">

Leírás 2/2

</div>

<div id="jobb">

Leírás 2/3

</div>

</div>


<div id="clear"></div><!-- ez a div a content lezárása miatt lehet fontos -->

2012. jan. 25. 08:16
Hasznos számodra ez a válasz?
 2/4 Joco1114 válasza:
Na a behúzások eléggé eltűntek, de szerintem így is értelmezhető...
2012. jan. 25. 08:18
Hasznos számodra ez a válasz?
 3/4 anonim ***** válasza:
Egy HTML fájlban nem lehet több olyan id-t használni, aminek egyező a neve. Erre a class a megfelelő.
2012. jan. 25. 11:30
Hasznos számodra ez a válasz?
 4/4 A kérdező kommentje:

Köszi a választ!Végülis én ezt a megoldást használtam kissé átalakítva:


CSS:

#wrapper {

text-align: left;

margin: 0px auto;

padding: 0px;

border:0;

width: 700px;

background: url("/path/to/your/background_cols.gif") repeat;

}


#header {

margin: 0 0 15px 0;

background: yellow;

}


#side-a {

float: left;

width: 150px;

}


#side-b {

float: right;

width: 150px;

}


#content {

float: left;

width: 56%;

}


#footer {

clear: both;

background: #A2A2A2;

}



HTML:

<div id="wrapper">

<div id="header">

HEADER

</div>

<div id="container">

<div id="side-a">

SIDE A

</div>


<div id="content">

CONTENT

</div>


<div id="side-b">

SIDE B

</div>

</div>

<div id="footer">

FOOTER

</div>

</div>

2012. jan. 26. 16:28

Kapcsolódó kérdések:





Minden jog fenntartva © 2024, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu

A weboldalon megjelenő anyagok nem minősülnek szerkesztői tartalomnak, előzetes ellenőrzésen nem esnek át, az üzemeltető véleményét nem tükrözik.
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!