• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Text neben Navigationsleiste

datisei

Neues Mitglied
Ich bin gerade dabei eine Seite komplett in Html und Css zu erstellen. Nun habe ich aber ein Problem:
Ich will ein CSS basiertes Layout entwickeln mit einer Menuleiste auf der linken seite und rechts daneben den eigentlichen content. Ich habe es schon versucht auf selfthtml eine entsprechende Lösung zu finden doch leider hat auch dies zu nichts geführt

Der Code sieht folgender Maßen aus.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
  <title>index</title>


  <style type="text/css">
body {background-color:silver;
font-style:comic sans;}
#navi {font-weight:bold;
color:white;
text-align:center;}


#navi ul {background-color:grey;
         font-size:110%;
         margin-right:800px;
         margin-left:0;
         height:170px;
         width:150px;
         align:left;


                 }

#navi li{ align:left;
          list-style:none;

}

#main {
border-width:2px;
border-color: black;
clear:left;}
  </style>
</head>


<body>

<div style="height: 306px;" id="navi">
<ul>

  <li>Die Künstler </li>

  <li>Das Team </li>

  <li>Das Studio</li>

</ul>

<div id="main">
<h1> das ist text </h1>

</div>
</div>
</body>
</html>

Wenn mir jemand meinen Fehler aufzeigen könnte wäre ich ihm sehr dankbar
 
Dafür brauchst du das float-Attribut.
Das div "main" solltest du eigentlich weglassen, da diese nur zur gruppierung mehrerer Elemente da sind, in deinem aber nur eines ist.
Aber trotzdem...
Versuche mal diesen CSS-Code [Ungetestet]:
Code:
body {background-color:silver;
font-style:comic sans;}
#navi {font-weight:bold;
color:white;
text-align:center;}


#navi ul {background-color:grey;
         font-size:110%;
         float: left;
         margin-left:0;
         height:170px;
         width:150px;


                 }

#navi li{ align:left;
          list-style:none;

}

#main {
border-width:2px;
border-color: black;
margin-left: 150px;}
 
Ja,
float bewirkt einen Textumfluss. ich habe deiner Navigation float: left; verpasst, sodass rechts neben der Navi der Content eben "umfliessen" kann.
Zusätzlich habe ich dem Content noch links einen Aussenabstand von 150px (margin-left: 150px;) gegeben, das entspricht der Breite der Navigation. Somit konnte ich erreichen, dass der Content nicht irgendwoanders links hinter der Navi ist...

Auf Positionieren: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets ist das ganze mit der Positionierung nochmal besser erklärt...

LG
http://www.html.de/Ja, float bewirk...odass rechts neben der Navi der Content eben
 
Zurück
Oben