✔ divs nebeneinander anzeigen lassen

[hugo1981]

Hallo @ll,

ich will in einem div mehrere kleine divs nebeneinander platzieren.
Ich habe über css meine finger wund getestet komme aber nicht drauf. nur im opera habe ich es mal geschafft, dass die divs nebeneinander auftauchen. Im FF und IE waren die trotzdem untereinander.

Die divs haben die selbe Klasse.

Habt ihr bitte ein Tip für mich wie ich das schaffe Ich hänge eine Grafik zur Verdeutlichung an.

Vielen lieben Dank im Voraus

lg,
Hugo

 

[Maik]

Hi,

verwende hierfür die float-Eigenschaft.

 

[hugo1981]

Hallo Maik, das habe ich schon..

float:left;0

(obwohl ich das ganze ganz gerne zentriert haben würde..). Aber im FF und IE kam es dennoch untereinander.. und die divs werden auf einmal viel zu breit.. ich poste gleich mal das css mit, sorry, habe ich total vergessen

 

[Maik]

ich poste gleich mal das css mit, sorry, habe ich total vergessen

Und am besten auch gleich den dazugehörigen HTML-Quelltext - derweil geh ich mal kurz was essen

 

[cr4shm4n]

Ich halte es für recht unpraktisch, dass du unbedingt divs nebeneinander platzieren willst, dafür müsstest du (meines Wissens) nämlich für jedes div den Abstand zum linken Seitenrand extra festlegen.
Meine Empfehlung lautet also:
Nimm eine undgeordnete Liste <ul> (margin: 0; padding: 0) und leg für die einzelnen <li> Elemente folgendes fest:

li.meineElemente {
display: inline;
margin: 5px;
padding 0;
}

Den Rand der einzelnen Elemente sowie den Klassenname kannst du natürlich anpassen.
Zu guter letzt sind alle Angaben ohne Gewähr, denn ich habe das Ganze nicht getestet.

 

[Maik]

Hi.

Ich halte es für recht unpraktisch, dass du unbedingt divs nebeneinander platzieren willst, dafür müsstest du (meines Wissens) nämlich für jedes div den Abstand zum linken Seitenrand extra festlegen.

Dann erläuter doch mal bitte, was an diesem Stylesheet und dem Einsatz des div-Elements unpraktisch ist?

.box {
float:left;
display:inline;
width:200px;
background:#ccc;
margin:5px;
}

<div class="box">box 1</div>
<div class="box">box 2</div>
<div class="box">box 3</div>

 

[hugo1981]

Hallo @ll,

vielen dank, dass mir der Liste muss ich mal ausprobieren. weil ich habe ein JS File (Nifty Corners, heißt dieser) eingebunden, der mir runde Ecken macht. mal sehen, ob das auch auf Listenelemente anwendbar ist.. WEnn das klappt mach ich das gerne.. In dieser Form zeigt es Opera ok an, ausser dass die Elemente nicht zentriert sind

Bis jetzt habe ich folgendes:

<div id="content">
	
    <h2>Überschrift<br></h2>

    <div id="tree" align="center">
	  
      
    <div id='first_row' align='center'>
<!-- der erste Benutner, steht ganz oben -->
<div class='avatar1'><img src='img/test.jpg'></div><span id='avatar_reihe' align='center'>

<!-- das sind die in einer reihe auftauchenden user -->
<div id='2' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=2'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(2)'>User2</a></div>

<div id='3' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=3'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(3)'>User3</a></div>

<div id='4' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=4'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(4)'>User4</a></div>

<div id='6' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=6'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(6)'>User6</a></div></span></div>
 
 
	<div id="second_row">||please click on the user above, to see his trust in his friends.||</div>
 </div>   
</div>

hier das css dazu:

div#first_row { float:none; padding:10px 0; margin:5px 0; background:#C4E786 ; text-align:center; margin-left:5px; margin-right:5px; display:table; width:668px;}

.avatar_k{ padding:10px 0; margin:5px 0; background:#99CCFF; margin-left:5px; float:left; max-width: 110px; min-width:110px;

div#tree{ float:none; padding:1px 0; margin:1px 0; background:#FFFFFF; padding-left:0px; margin-left:5px; margin-right:5px; margin-top:10px;}

div#second_row { float:none; padding:10px 0; margin:5px 0; background:#C4E786 ; text-align:center; margin-left:5px; margin-right:5px;clear:left;}

span#avatar_reihe{ float:none; display:table-row-group; vertical-align:middle; position:inherit; clear:right;}


div#content{float:right;width:690px; padding:10px 0;margin:5px 0;background: #D6EBFF; height:100%; text-align:center;}

vielen dank nochmal

 

[cr4shm4n]

@Maik: Ups, Denkfehler. Ich hatte das display:inline vergessen ;-)

 

[Maik]

Der IE6 (und älter) unterstützt nicht die min-width- und max-width-Eigenschaft, weshalb die Boxen in ihm zu klein dargestellt werden. In diesem Fall solltest du ihn mit der width-Eigenschaft bedienen.

Nach dem Regelblock der Klasse ..avatar_k fehlt in deinem gezeigten Code die schliessende }-Klammer.

Desweiteren darf ein Inline-Element (span) keine Block-Elemente (div) enthalten.

 

[Maik]

Mein Lösungsvorschlag, um die Avatar-Boxen horizontal zu zentrieren:

#avatar_reihe { width:460px; margin:0 auto; }
.avatar_k { padding:10px 0; margin:5px 0; background:#99CCFF; margin-left:5px; float:left;  max-width: 110px; min-width:110px; width:110px; display:inline; }

<div id='first_row' align='center'>
     <!-- der erste Benutner, steht ganz oben -->
     <div class='avatar1'><img src='img/test.jpg'></div>
     <div id='avatar_reihe'>
          <!-- das sind die in einer reihe auftauchenden user -->
          <div id='2' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=2'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(2)'>User2</a></div>

          <div id='3' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=3'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(3)'>User3</a></div>

          <div id='4' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=4'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(4)'>User4</a></div>

          <div id='6' class='avatar_k' align='center'><img src='img/elem/conn_3.png'>3<br><a href='profile.jsp?buddy_id=6'><img src='img/test.jpg' width='50px' height='50px'></a><br><a href='javascript:makeGetRequest(6)'>User6</a></div>
     </div><!-- // #avatar_reihe -->
</div><!-- // #first_row -->