Inhalt der Homepage rechts von der Navigation

[Joschua]

Hallo,

ich erstelle gerade meine erste Homepage selbst und möchte die Navigation konstant links vom Bild haben und den restlichen Inhalt rechts davon. So wie man es eben von den meisten Seiten kennt.

Die Navigation habe ich als ungeordnete Lister erstellt, bei denen ich die Punkte dann verlinkt habe. Funktioniert auch super, aber der eigentliche html Inhalt ist nun immer unter der Navigation drunter, anstatt rechts davon.

Wie löse ich dieses Problem?

Danke
Grüsse

 

[Space Vampire]

du müsstest deine menüliste links floaten.
wenn du noch vermeiden möchtest, dass deine inhalte das menü am unteren ende umfließen, musst du auf den contaienr für den inhalt eine margin-left in mindestens der breite des menüs geben.
in etwa so

ul.menu{
  float:left;
  width:150px;
}

div.content {
  margin-left:160px;
}

<ul class="menu">
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
  <li>Link</li>
</ul>

<div class="conten">
  <p>DEIN INHALT</p>
</div>

das beispiel lässt einen spalt von 10px zwischen menü und content.
die breite des menüs ist starr, wärend sich der content an den rest des verbleibenden viewports anpasst

http://www.css4you.de/

 

[Joschua]

Hi,

danke für die Anwort, aber so weit ist mein wissen noch lange nicht um das zu verstehen... :(

Wo muss ich deinen Code eingeben? In den Kopf oder den Body und gehört da noch irgendwas dazu?

Kannst du mir das für Laien erklären?

 

[Space Vampire]

der obere code ist css.
um den zu verstehen oder, noch besser, an nem ruhigen nachmittag zu lernen, hab ich dir den link mit angehängt.
css kannst du auf drei verschiedene arten anwenden.
- mit classes und/oder IDs in einer ausgelagerten css-datei die du über den html-head einbindest. (empfohlen)
- mit classes und/oder IDs in einem <style>-tag im html-head
- im style="" attribut direkt im betreffenden html-tag

der untere code ist html.
den solltest du verstehen.
um dort dort die css-eigenschaften zuzuweisen wurden den betreffenden elementen class-attribute zugewiesen

 

[Joschua]

Hi,

danke für die Antwort. Ich habe es mittlerweile hinbekommen so wie ich will, nutzte aber nicht deinen code, sondern habe mir ein html Lehrbuch gekauft und dort im Kapitel Navigation mich ein paar Seiten durchgearbeitet.

Ich habe also kein script-kiddie copy-past angewendet ;Jump

Grüsse

 

[Space Vampire]

sehr lobenswert ;)
allerdings frag ich mich gerade, wie du das nur mit html gelöst hast

 

[Joschua]

Ich nutzte schon css, aber nicht deinen Code, sondern habe es alleine selber gecoded, Lehrbuch sei Dank :)

Gruß