mehrere div container in einer zeile

[nightmind]

hi,

hab da wieder ne Frage wo ihr mich wahrscheinlich auslacht .. nunja

wenn ich mehrere div container nebeneinander (bzw. untereinander) im quellcode schreibe packt er mir immer nen zeilenumbruch rein. ich hab es so das ich z.b. 2 verlinkte grafiken nebeneinander darstellen möchte die aber beide ne andere css "anweisung" haben, ich kann also nicht die selbe id nutzen. nun sollen die grafiken aber nebeneinander mit ner leerstelle dazwischen dargestellt werden. wußte mir bis jetzt nur so zu helfen das ich die einzelnen div container in eine tabelle bzw. jeweils in eine seperate tabellenspalte gepackt habe. kann aber irgendwo nicht DIE lösung sein. was muß ich beachten damit kein zeilenumbruch erfolgt ?

danke schonmal im vorraus.

 

[prm]

Um Blockelemente nebeneinander anzuordnen benötigen sie die Eigenschaft "float" und ggf. noch einen margin-Wert für den Abstand.
Ich bezweifle jedoch, ob du für deinen Zweck überhaupt mehrere Divs benötigst.
Zum einen könnetest du den images eigene ID's oder Klassen zuweisen, was dann divs entbehrlich macht, zum anderen wäre vermutlich eine ul-Liste das geeignetere Element.

Sieh dir hierzu einmal diese Beispiele an, bei denen du ebenfalls noch eine Verlinkung einbauen kannst:
Bilder nebeneinander anordnen
Bildergalerie

oder als Navigation:
Link-Buttons

 

[nightmind]

Hi prm!
Danke für die Links.

Habs jetzt so gelöst.

css code für die 2 buttons

#button_printplayday {
margin : 0 auto;
border : 0 none;
width : 72px;
float : right;
padding : 3px;
}
#button_printplayday a:link, #button_printplayday a:visited, #button_printplayday a:active {
background : url(img/buttons/print_playday.png) no-repeat;
display : block;
border : 0 none;
width : 72px;
height : 15px;
}
#button_printplayday a:hover {
background : url(img/buttons/print_playday_h.png) no-repeat;
border : 0 none;
width : 72px;
height : 15px;
}
#button_printprogram {
margin : 0 auto;
border : 0 none;
width : 79px;
float : right;
padding : 3px;
}
#button_printprogram a:link, #button_printprogram a:visited, #button_printprogram a:active {
background : url(img/buttons/print_program.png) no-repeat;
display : block;
border : 0 none;
width : 79px;
height : 15px;
}
#button_printprogram a:hover {
background : url(img/buttons/print_program_h.png) no-repeat;
border : 0 none;
width : 79px;
height : 15px;
}

und auf Seite eingebunden mit

<div id="button_printplayday"><a target="_blank" href="print-st.html" title="Zeigt eine Druckansicht des aktuellen Spieltags an"><img src="img/blank.png" alt="Aktuellen Spieltag drucken" title="Aktuellen Spieltag drucken" /></a></div>
<div id="button_printprogram"><a target="_blank" href="print-sp.html" title="Zeigt eine Druckansicht des kompletten Spielplan an"><img src="img/blank.png" alt="Ligaspielplan drucken" title="Ligaspielplan drucken" /></a></div>
<br style="clear: both;" />

Wird jetzt auch so angezeigt wie ichs haben wollte, dankeschön. Ist der CSS Code so in Ordnung oder steht da zuviel unbrauchbarer Müll drin ?

 

[prm]

Wie gesagt: Eine ul-Liste hielte ich für sinnvoller, da divs nur für die Gruppierung größerer Bereiche verwendet werden sollten.
Wenn's aber auch so funktioniert: Es führen viele Wege nach Rom...