Antworten zum Thema „Positionierungsprobleme DIV“

ibu2002 · 01.03.2009

Hallo,

ich habe ein Problem mit der XHTML+CSS Umsetzung meines PSD Designs.
Das Design sieht wie folgt aus:

Mein Problem ist es nun das Inhaltsfenster rechts neben die Navigation zu bekommen.
Das DIV #Content soll nur die Klammer für die darin befindlichen DIV's dienen.

Code:

<html>
<head>
<title>hp</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
    background-image: url(Bilder/hinter_02.gif);
    background-repeat: repeat-x;
}
 
.container{
    width:1024px;
    position: relative;
    margin:0 auto;
    padding: 0;
    }

#header {
    width:1024px;

 }  
#logo {
    background-image:url(Bilder/hp_02.gif);
    background-repeat:no-repeat;
    width:592px;
    height:256px;
    overflow: auto;
    float: left;
     }
#upleft {
    background-image:url(Bilder/hp_01.gif);
    width:218px;
    height:296px;
    float: left;
}
    
#upright {
    background-image:url(Bilder/hp_03.jpg);
    width:214px;
    height:302px;
    float:left;
}

ul#menu{
    width:218px;
    overflow:visible;
    margin:0px;
    clear:left;
}
ul#menu li{
    background-image:url(Bilder/button.gif);
    background-repeat:no-repeat;
    height:43px;
    width:218px;
    text-align:center;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-size: 14px;
    padding: 9px;
}
    
#content {
    margin: 0px;
    background-color: #F00;
}
</style>
</head>
<body>

<div class="container">
      
    <div id="header">  
        <div id="upleft">
        </div>
           
        <div id="logo">  
        </div>  
              
        <div id="upright">
        </div>                     
    </div>

    <ul id="menu">
        <li>Button1</li>
           <li>Button2</li>
        <li>Button3</li>
        <li>Button4</li>
        <li>Button5</li>
        <li>Button6</li>
    </ul>

    <div id="content">
    content
    </div>  

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

Bisher sieht das Ganze aber so aus :

Bin für jede Hilfe dankbar

Gruß ibu

DesignDude · 01.03.2009

AW: Positionierungsprobleme DIV

Hi ibu,

eine Möglichkeit für dein Problem wäre, dass du deine Navigations-ul umfließen lässt. Hierbei müsstest du die ul als float: left; deklarieren und beim #content unter display: den Wert inline; eingeben.
Ne zweite Möglichkeit wäre, dass du deinen #content absolut positionierst (position: absolute; ) und dann den Abstand zum linken Fensterrand oder zum linken Rand des absolut-positionierten Eltern-Elements noch mit margin-left festlegst.
Ich glaub es gäbe noch ne dritte Möglichkeit indem du deine ul auf display: inline-table; setzt und deinen #content auf display: inline; aber ich weiß nicht ob der IE dann bei der Darstellung mitspielt.
Ich hoffe ich konnte helfen. Falls jemand noch ne bessere Möglichkeit weiß, bitte posten.
Greets.

Herr_D · 01.03.2009

AW: Positionierungsprobleme DIV

was soll das clear:left; im #menue? Wo hast du das her?

pack die ul menue in ein div un floate das links

noch besser für dein Prob:

ibu2002 · 01.03.2009

AW: Positionierungsprobleme DIV

das clear:left war für die Positionierung der Navigation da.
Wenn ich nun die ul in ein DIV Navigation packe und das links floate kommt folgendes bei raus:

BlackHawk1000 · 05.03.2009

AW: Positionierungsprobleme DIV

Hallo,

was hälst du denn davon Free CSS Layouts - Download ??
Dort kannst du dir ein Grundgerüst runterladen und das passt du dann einfach deinen Bedürfnissen an. Du hättest gerne ein dreispaltiges Layout mit Header. So was wirst du dort finden.
Wenn du so ein Layout geladen hast, dann schau dir genau die HTML und CSS Dateien an, dann kannst du lernen wie das gemacht wurde und du bist fit für's nächste Mal.

Gruß

Schattenspringer · 05.03.2009

AW: Positionierungsprobleme DIV

also nachdem du die ul menue gefloatet hast, musst du nur noch den #content auch auf float:left;
setzen dann müsste es funzen

gruss
schattenspringer