CSS Positionierung

daniel8888

Hallo,

habe eine Frage zu ner Posiitonierungssache mit Divs.

Habe meine Divs so aufgebaut:

Code

<div id="page">
   <div id="header">head</div>
   <div id="topmenu">topMenu</div>
   <div id="menu">
         <div id="menuStart">Menu1</div>
         <div id="menuDown">Menu2</div>
   </div>
   <div id="content">
           Contentinhalt
   </div>
</div>

Alles anzeigen

Nun ist also das Menü links neben dem Inhaltsbereich. Mit float:left geht das auch, aber wenn der INhalt länger als da Menü wird, fängt der Text unter dem Menü wieder vorne an :(. Getestet hab ich das im FireFox und IE6.

Wenn ich dem #menu eine feste Höhe gebe, z. B. 500px, dann fließt der Text die 500px lang an der Seite, danach wieder unter dem Menü.

Mein CSS sieht so aus:

Code

body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #555;
  background-color: #FFF;
  font-weight: normal;
  font-size: 12px;
}


h1, h2, h3 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #555;
  background-color: #FFF;
  font-weight: bold;
  font-size: 13px;
}
#page {
	width: 720px;
	background: #FFFFFF;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
#head {
    width: 720px;
}


#topMenu {
    text-align: right;
    padding-right: 30px;
}
#topMenu a {
    font-size: 11px;
    color: #555;
    text-decoration: none;
    font-weight: bold;
}
#topMenu a:hover {
    font-size: 11px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
#contentBereich {


}
#content {
    padding-left: 10px;
    padding-top: 22px;
}
#menu {
    float: left;
    width: 166px;
    /*height: 500px;*/
    margin-right: 20px;
}
#menuDown, #menuStart {
    padding: 0px;
    margin: 0px;
}
#menu ul li {
    padding-bottom: 8px;
    margin-left: -15px;
}
#menu ul {
    margin-top: 0px;
    margin-bottom: 0px;
	list-style: none;
}
#menu a {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    font-weight: bold;
}
#menu a:hover {
    font-size: 13px;
    color: #18B5D1;
    font-weight: bold;
    text-decoration: none;
}


/* Klassenzuweiseungen */


.menuTopEntry {
    font-size: 13px;
    font-weight: bold;
    color: #18B5D1;
}


.menuBack {
    background-image:url('images/menu_middle.jpg');
}
a.menuA1 {
    font-size: 13px;
    color: #18B5D1;
    font-weight: bold;
    text-decoration: none;
}
a.menuA2 {
    font-size: 11px;
    color: #000;
    font-weight: bold;
    text-decoration: none;


}

Alles anzeigen

Kann mir da jemand weiterhelfen?

Vielen Dan für Hilfe im Voraus!

Gruß Daniel

Spacefish

Und wie wärs wenn du dem #content eine feste Breite gibst?

Code

#content { 
    padding-left: 10px; 
    padding-top: 22px;
    width: ....px;

daniel8888

danke für die antwort.
hab dem content schon eine feste breite gegeben. Dann wird der content zwar mit der Breite definiert, aber trotzdem läuft der Text nicht am Menü vorbei, sondern fängt unten drunter wieder ganz links an

Spacefish

Wenn ich eine feste Breite im #content definiere, dann wird der Inhalt ( ja, auch nach einem Zeilenumbruch ) sauber mit einem Abstand dargestellt.

sejuma

Gib dem #content noch ein

Code

margin-left: 186px;

jojo87

Zitat von sejuma
Gib dem #content noch ein
Code
margin-left: 186px;

oder ebenfalls ein float:left;

daniel8888

Hi,

also mit float:left hab ich es im #content auch bereits probiert, aber der text soll ja nicht am content vorbei fließen sondern am #menu.

hab das mit dem margin-left getestet, im IE7 siehts ganz gut aus. Muss gleich noch im IE6 und FF testen.

Danke für die Antwort

jojo87

Schau:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
		<style type="text/css" media="all"><!--
body {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #555;
  background-color: #FFF;
  font-weight: normal;
  font-size: 12px;
}


h1, h2, h3 {
  font-family: Arial, Verdana, Helvetica, sans-serif;
  color: #555;
  background-color: #FFF;
  font-weight: bold;
  font-size: 13px;
}
#page {
   width: 720px;
   background: #ccc;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
}
#head {
    width: 720px;
}


#topMenu {


    text-align: right;
    padding-right: 30px;
}
#topMenu a {
    font-size: 11px;
    color: #555;
    text-decoration: none;
    font-weight: bold;
}
#topMenu a:hover {
    font-size: 11px;
    color: #000;
    font-weight: bold;
    text-decoration: none;
}
#contentBereich {


}
#content {
float: left;
background: red;
    padding-left: 10px;
    padding-top: 22px;
}
#menu {
background: blue;
    float: left;
    width: 166px;
    /*height: 500px;*/
    margin-right: 20px;
}
#menuDown, #menuStart {
    padding: 0px;
    margin: 0px;
}
#menu ul li {
    padding-bottom: 8px;
    margin-left: -15px;
}
#menu ul {
    margin-top: 0px;
    margin-bottom: 0px;
   list-style: none;
}
#menu a {
    font-size: 13px;
    color: #555;
    text-decoration: none;
    font-weight: bold;
}
#menu a:hover {
    font-size: 13px;
    color: #18B5D1;
    font-weight: bold;
    text-decoration: none;
}


/* Klassenzuweiseungen */


.menuTopEntry {
    font-size: 13px;
    font-weight: bold;
    color: #18B5D1;
}


.menuBack {
    background-image:url('images/menu_middle.jpg');
}
a.menuA1 {
    font-size: 13px;
    color: #18B5D1;
    font-weight: bold;
    text-decoration: none;
}
a.menuA2 {
    font-size: 11px;
    color: #000;
    font-weight: bold;
    text-decoration: none;


} 
--></style>
	</head>
<body>
<div id="page">
   <div id="header">head</div>
   <div id="topmenu">topMenu</div>
   <div id="menu">
         <div id="menuStart">Menu1</div>
         <div id="menuDown">Menu2</div>
   </div>
   <div id="content">
           Contentinhalt
	sdgsdfsdfhsdfgh


sdfavdvdfvg


scjyx<vxkvc-vcxn<-cxn


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

Alles anzeigen

Klappt wunderbar im ff und ie6. mein ie7 will grad nicht, konntes also nicht damit testen.

Tags