CSS: Elemente nebeneinander anordnen

Hi Leute!

Ich versuche gerade 3 Bilder mit Text darunter per CSS nebeneinander anzuordnen.
Meinen Versuch könnt ihr auch da ansehen:
http://wolfib.wo.funpic.de/

Ausschnitt des Stylesheets:

div#Home_Cont div {
  display:inline;
}
div#Home_Cont p {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 0.7em;
  color: #333333;
}

Wenn ich das richtig verstanden habe klappt das mit display:inline. Ich kann zwar z.B. den Text und das Bild nebeneinander anordnen aber die Bilder nebeneinander klappt nicht. Was mach ich da falsch?

[eagle275]

du definierst ein #nav - CSS-Element .. aber du benutzt es nicht .... *g* und da wundert er sich, dass die Navi-Leiste nicht horizontal ausgerichtet wird...

id="nav1" ist nunmal was anderes als class="nav" .....

[ChrisB]

Was ich will ist, dass die Navigationsliste horizontal angeordnet ist.

Dann formatiere die List-Items entsprechend.

[Tobyace]

Was ich will ist, dass die Navigationsliste horizontal angeordnet ist.

Mit display inline:

#navi{

list-style-type: none;

text-decoration: none;
display: block;
widht: 58px;
display:inline;
background-color: orange;
}

Da hat sich gar nichts getan. Außer eben, dass die Farbhintergründe über die gesamte Seite gingen.

float left hat nur dafür gesorgt, dass die Tabelle:

<div id="navigation">

<ul id="navi">
<li><a id="navi1" href=index.html>Einträge</a></li>

<li><a id="navi2" href= login.html>Anmelden</a></li>

<li><a id="navi3" href=post.html>Post</a></li>
</ul>

</div><!-- Ende navigation -->



<table border="2" id="eintrag" cellpadding="0" cellspacing="0" >

<tr>

<th>nr</th>

<th>ueberschrift</th>

<th>text</th>

<th>tags</th>

<th>datum</th>

</tr>

<tr>

neben der Navigation steht. Die einzige weitere Möglichkeit, die mir jetzt noch einfällt, ist, jeden Link mit div zu versehen und jedem Div eine Position zuzuordnen, aber da muss es doch was besseres geben, da das doch recht unübersichtlich und kompliziert wird, wenn ich etwas ändern möchte.
Gibt es da keine andere Möglichkeit oder ist da was falsch eingestellt, hab was vergessen, etc. ?

[ChrisB]

Wenn du ernsthaft Hilfe erwartest, dann poste bitte eine vernünftige Problembeschreibung, und nicht nur „funzt nich“.

Vorzugsweise ein auf's wesentliche reduziertes Onlinebeispiel, mit validiertem HTML und CSS.

[Tobyace]

clear sagt ihr, dass sie das nicht tun soll.


Floating oder display:inline(-block).

Wenn float und inline funktioniert hätten, hätte ich nicht ins Forum gepostet. Bisher war aber nichts so, wie ich es wollte. Inline hatte gar keinen Erfolg, außer, dass der ganze Bildschirm benutzt wurde, also das, als ich Farbe als Hintergrund genommen habe, der über den ganzen Bildschirm ging.
Und float, wie gesagt, da hat sich an den Links selbst gar nichts getan.

[ChrisB]

Wenn ich meinem Navibereich float: left zuweise, dann wird die Tabelle, die unten bleiben soll rechts angezeigt.

clear sagt ihr, dass sie das nicht tun soll.

Wie kriege ich denn die Links als eine Reihe?

Floating oder display:inline(-block).

Ich hab auch bei Google nichts gefunden, das funktioniert hat.

Beschäftige dich bitte erst mal mit den Grundlagen von CSS.

SELFHTML aktuell Weblog: Grundlagen für Spaltenlayout mit CSS

[Tobyace]

Also bei mir will das nciht funktionieren.
Wenn ich meinem Navibereich float: left zuweise, dann wird die Tabelle, die unten bleiben soll rechts angezeigt.

Wie kriege ich denn die Links als eine Reihe? Ich hab auch bei Google nichts gefunden, das funktioniert hat.

Hier mal der HTML Code:

<div id="navigation">

<ul id="navi">
<li><a id="navi1" href=index.html>Einträge</a></li>

<li><a id="navi2" href= login.html>Anmelden</a></li>

<li><a id="navi3" href=post.html>Post</a></li>
</ul>

</div><!-- Ende navigation -->

ah ok, denkfehler von mir gerade, sorry

[DiBo33]

was sind den alle anderen ?

die nicht positionierte Elemente

was sind den alle anderen ?

[DiBo33]

Ah jetzt hab ich es verstanden!

display: positionierte Elemente
float: nicht positionierte Elemente

Fast:
display: positionierte Elemente (und alle anderen)
float: nicht positionierte Elemente

Ah jetzt hab ich es verstanden!

display: positionierte Elemente
float: nicht positionierte Elemente

[DiBo33]

Hm aber das sind ja gar keine absolut positionierten Elemente!?

Ja eben, desshalb darfst du ja auch float nutzen.

Hm aber das sind ja gar keine absolut positionierten Elemente!?

Aber das mit der Liste werde ich ausprobieren.