Probleme mit CSS Layout

nils754 · Beitrag von **nils754** » 30.03.2006 22:43

Moin,

da ich mal eine Seite erstellen wollte ohne Tabellen, habe ich versucht mein Layout ganz auf divs aufzubauen. Nur habe ich schon ein Problem.
Wenn ich etwas in die linke Spalte schreibe, dann wir die Box für das Content nach unten gerückt. Wie kann ich das ändern? (Habt Gnade mit mir! Ich bin mit divs noch nicht so wirklich vertraut

)

[ externes Bild ]

Aktueller Quelltext:

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Testseite</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
  <center>
    <div id="frame">
    
     <div id="logo"><br /><br /><center><h2>... Logo ...</h2></center></div>
    
     <div id="welcome"><div class="welcome_text">Willkommen</div></div>
    
     <div id="menuleft">
     <div class="menuliste">
      <ul>
      <li>Home</li>
      <li>Kontakt</li>
      <li>Links</li>
      <hr class="menu">
      <li>Forum</li>
      </ul>
     </div>
     </div>
    
     <div id="content">
     <div class="content_text">
     (hier steht der lange text)
     </div></div>
     
     <div id="footer"><div class="copyright">
     &copy; Nilz
     </div></div>
               
    </div>
  </center>
  </body>
</html>

Code: Alles auswählen

/* ------------------ Basic Settings ------------------ */

body
{
background-color: #EFEFEF;
}

/* ------------------ Layout Settings ------------------ */

#frame
{
background-color: #B1B1B1;
padding: 0px;
margin-top: 50px;
width: 750px;
height: auto;
border: 0px dashed black;
}

#logo
{
background-image: url('images/logo.gif'); 
width: 750px;
height: 100px;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 1px solid black;
}

#welcome
{
background-image: url('images/background.gif'); 
width: 750px;
height: 25px;
margin-left: 0px;
border: 1px solid black;
}

#menuleft
{
background-color: #F7F7F7;
width: 150px;
height: 150px;
float: left;
border: 1px solid black;
border-right: 1px dashed black;
border-top: 0px solid black;
border-bottom: 0px dashed black;
min-height: 200px;
}

#content
{
background-color: #F7F7F7;
width: 600px;
height: auto;
margin-left: 150px;
border-right: 1px solid black;
min-height: 200px;
}

#footer
{
background-image: url('images/background.gif'); 
width: 750px;
height: 15px;
margin-left: 0px;
border: 1px solid black;
}

div
{
font-family: Verdana;
font-size: 11px;
}

/* ------------------ Schrift Settings ------------------ */

.welcome_text
{
padding-top: 5px;
text-align: center;
font-weight: bold; 
}

.copyright
{
text-align: center;
font-weight: bold; 
}

.menuliste
{
padding: 10px;
text-align: left; 
}

.content_text
{
padding: 10px;
text-align: left;
}

hr.menu
{
width: 60px;
color: silver;
height: 1px;
margin-left: 0px;
}

Beitrag von **S2B** » 30.03.2006 23:23

Für Zweispaltigkeit mit div brauchst du float:

Code: Alles auswählen

<div>
  <div style="float: left; width: 150px">Menü</div>
  <div style="margin-left: 150px">Content</div>
</div>

oder so:

Code: Alles auswählen

<div>
  <div style="float: left">Menü</div>
  <div style="float: left">Content</div>
  <div style="clear: left"></div>
</div>

Allgemein solltest du aber auch Tags wie z.B. <center> durch die entsprechenden CSS-Eigenschaften austauschen. Außerdem sollten <h1>, <h2> etc. immer der Reihenfolge nach verwendet werden, es dürfen also keine Lücken zwischen den Zahlen sein. Das Design der einzelnen Tags kannst du ja leicht mit CSS anpassen.

nils754 · Beitrag von **nils754** » 02.04.2006 17:08

So, was mach ich denn nun schon wieder falsch?

Code: Alles auswählen

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Testseite</title>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
    <link rel="stylesheet" href="style.css" type="text/css">
  </head>
  <body>
  <center>
    <div id="frame">
    
     <div id="logo"><br /><br /><center><h2>... Logo ...</h2></center></div>
    
     <div id="welcome"><center><div class="welcome_text"><b>Willkommen</b></div></div>
    
     <div id="menuleft">
     <div class="menuliste">
      <ul>
      <li>Home</li>
      <li>Kontakt</li>
      <li>Links</li>
      <hr class="menu">
      <li>Forum</li>
      <li>Emo Stuff</li>
      </ul>
     </div>
     </div>
    
     <div id="content">
     TEST TEST TEST TEST TEST TEST TEST
     <div id="footer"><center><b>&copy; test</b></center></div>
               
    </div>
  </center>
  </body>
</html>

Code: Alles auswählen

/* ------------------ Basic Settings ------------------ */

body
{
background-color: #EFEFEF;
}

/* ------------------ Layout Settings ------------------ */

#frame
{
background-color: #B5B5B5;
padding: 0px;
margin-top: 50px;
width: 750px;
height: auto;
border: 0px dashed black;
}

#logo
{
background-image: url('images/logo.gif'); 
width: 750px;
height: 100px;
border-left: 1px dashed black;
border-right: 1px dashed black;
border-top: 1px dashed black;
}

#welcome
{
background-image: url('images/background.gif'); 
width: 750px;
height: 25px;
margin-left: 0px;
border: 1px solid black;
}

#menuleft
{
background-color: #F7F7F7;
width: 150px;
height: auto;
margin-right: 600px;
float: left;
border: 1px solid black;
border-right: 1px dashed black;
border-top: 0px solid black;
border-bottom: 0px dashed black;
}

#content
{
background-color: #F7F7F7;
width: 600px;
height: auto;
margin-left: 150px;
border-right: 1px solid black;
}

#footer
{
background-image: url('images/background.gif'); 
width: 750px;
height: 15px;
margin-left: 0px;
border: 1px solid black;
}

div
{
font-family: Verdana;
font-size: 11px;
}

/* ------------------ Schrift Settings ------------------ */

.welcome_text
{
padding-top: 5px;
}

.menuliste
{
padding: 10px;
text-align: left; 
}

.content_text
{
padding: 10px;
}

hr.menu
{
width: 60px;
color: silver;
height: 1px;
margin-left: 0px;
}

Nun wird der Inhalt des Contents nach unten verschoben:
[ externes Bild ]

Beitrag von **S2B** » 02.04.2006 17:48

das hier muss raus:

Code: Alles auswählen

margin-right: 600px;

Edit: Und wie oben schon gesagt <center> möglichst raus und den div-Tag von div#content schließen.

nils754 · Beitrag von **nils754** » 02.04.2006 18:47

S2B hat geschrieben:das hier muss raus:
Code: Alles auswählen
margin-right: 600px;
Edit: Und wie oben schon gesagt <center> möglichst raus und den div-Tag von div#content schließen.

Ok. Danke für die Hilfe

Ich hab jetzt nur noch ein Problem:
Wie man auf dem Screen sieht, geht das Menü nicht ganz runter. Also so weit wie der Contentbereich. Wie kann ich das Problem lösen?
(Den Quelltext und die aktuelle CSS Datei hab ich im ersten Post aktualisiert. Muss den Quelltext ja nicht immer wieder posten.)

[ externes Bild ]

nils754 · Beitrag von **nils754** » 03.04.2006 14:40

Blub. Kann mir keiner helfen?

Beitrag von **S2B** » 05.04.2006 15:31

An dem Problem hab ich mir auch schon die Zähne ausgebissen. Scheinbar gehört es (im Moment zumindest noch) dazu, dass es bei Div-Layouts keine vernünftige vertikale Ausrichtung bzw. Höhenangaben gibt...