Div Container zentrieren

heroxx · 07.11.2012

Hallo,

habe folgendes Problem... ich sitz schon den ganzen Tag an meiner Seite und hab endlich das Layout so hinbekommen wie ich es möchte. Jedoch habe ich mein Menü horizontal unter meinem Banner.
Mit Float:left; habe ich dann die Slices nebeneiner zum Menü bekommen.

Wie bekomme ich nun dieses mittig zum Banner bei 1024px ?
durch float:left oder right, kriege ich ja mehrere Divs in einer Reihe, jedoch gibt es kein float:mid wie ich gelesen habe.

Nun wie bekomme ich nun dieses trotzdem in die Mitte für Firefox wie IE?

Mein HTML code:

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>  
    <title>Title</title>  
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />  
    <meta name="Author" content="WME" />  
    <meta name="Publisher" content="WME" />  
    <meta name="Copyright" content=" WME " />  
    <meta http-equiv="content-language" content="de" />  
    <meta name="keywords" content="Template" />  
    <meta name="description" content="Text" />  
    <meta name="Audience" content="Alle" />  
    <meta name="allow-search" content="yes" />  
    <meta name="robots" content="index, follow" />  
    <meta name="revisit-after" content="1 days" />  
    <link rel="stylesheet" embossed" href="formate.css">   
    <link rel="stylesheet" type="text/css" xhref="formate-ie.css"      />
      
    </head>
    
<body style="background-image:url(images/pixel.png)"; "margin: 0px auto;" background-repeat:repeat;>

<div   id=”wrapper”></div>
<div id=”wrapper”>  
<div id="banner"></div>
</div>  

 
<div id="navi1"></div> 
</div>

<div id="Startseite";></div>
</div>

<div id="navi3";></div>
</div>

<div id="Produkte";></div>
</div>


<div id="navi5";></div>
</div>

<div id="ueber";></div>
</div>


<div id="navi7";></div>
</div>

<div id="Kontakt";></div>
</div>

<div id="navi9";></div>
</div>

<div id="Impressum";></div>
</div>

<div id="navi11";></div>
</div>


<div id="br";></div>
</div>


<div id="writing";>
</div>


<div id="foot"></div>
</div>


</body></html><strong></strong>

und meine CSS Datei:

Code:

@charset "utf-8";
/* CSS Document */


    html  
    *{           margin:0px;             padding:0px;}  
{   
text-align:center;  
}  
    
        #wrapper  
    {  
    Width:1024px;  
    margin-left:auto;  
    margin-right:auto;  
    }  
   
    
        #banner  
    {  
    background-image:url(images/01.gif);  
    width:1024px;  
    height:199px;  
    margin-left:auto;  
    margin-right:auto;  
    margin-top:40px;  
      
    }  
    
            #navi1  
    {  
    background-image:url(images/02.gif);  
    width:70px;  
    height:43px;  
    float: left;  
      
    }  
    
    #Startseite
    {  
    background-image:url(images/03.gif);  
    width:126px;  
    height:43px;    
    float: left;
    display:block; 
    }  
    #Startseite:hover 
    {
    background-image: url(images/menue_03.gif);
    width: 126px;
    height: 43px;
    float: left;
    display: block;
    
    }  
    
    
    #navi3
    {  
    background-image:url(images/04.gif);  
    width:52px;  
    height:43px;  
    float: left;
      
    }  
    
    #Produkte
    {  
    background-image:url(images/05.gif);  
    width:122px;  
    height:43px;  
    float: left;
    display:block;  
      
    } 
        #Produkte:hover
    {  
    background-image:url(images/menue_05.gif);  
    width:122px;  
    height:43px;  
    float: left;  
    display:block; 
    }   
     
    
    #navi5 
    {  
    background-image:url(images/06.gif);  
    width:52px;  
    height:43px;  
    float: left;
 
      
    }  
    
    #Unternehmen
    {  
    background-image:url(images/07.gif);  
    width:173px;  
    height:43px;  
    float: left;
    display:block;  
      
    } 
        #Unternehmen:hover 
    {  
    background-image:url(images/07.gif);  
    width:173px;  
    height:43px;  
    float: left;
    display:block;  
      
    } 
    
    #navi7 
    {  
    background-image:url(images/08.gif);  
    width:52px;  
    height:43px;  
    float: left;
      
    }   
    #Kontakt
    {  
    background-image:url(images/09.gif);  
    width:108px;  
    height:43px;  
    float: left;
    display:block;   
      
    }  
        #Kontakt:hover
    {  
    background-image:url(images/menue_09.gif);  
    width:108px;  
    height:43px;  
    float: left;
    display:block;  
      
    }  
    #navi9 
    {  
    background-image:url(images/10.gif);  
    width:52px;  
    height:43px;  
    float: left;
      
    }  
    #Impressum
    {  
    background-image:url(images/11.gif);  
    width:149px;  
    height:43px;  
    float: left;
    display:block;  
      
    }  
        #Impressum:hover
    {  
    background-image:url(images/menue_11.gif);  
    width:149px;  
    height:43px;  
    float: left;
    display:block; 
      
    }  
        #navi11 
    {  
    background-image:url(images/12.gif);  
    width:68px;  
    height:43px;  
    float: left;
      
    }  
        #br
    {  
    background-image:url(images/13.gif);  
    width:1024px;  
    height:43px;  
    float: left;
      
    }  
        #writing
    {  
    background-image:url(images/14.gif);  
    width:1024px;  
    height:101px; 
    float: left; 
    

      
    }  
            #foot
    {  
    background-image:url(images/15.gif);  
    width:1024px;  
    height:382px;
    margin-left:auto;  
    margin-right:auto;  
    margin-top:40px;  
      
    }

hub · 07.11.2012

AW: Div Container zentrieren

Moin moin,
dein Experiment in allen Ehren, aber hast du mehr oder ist das dein jetziger Stand? Und hast du vielleicht nen Link zum anschauen?

Gruß Ulli

heroxx · 07.11.2012

AW: Div Container zentrieren

Das ist nur mein jetztiger Stand, wollte sozusagen nur das Grundgerüst machen.

Das Problem liegt wie gesagt (denke ich) an dem float:left.
Damit ist das Menü auf der linken Seite, soll aber mittig unter das Banner.
Aber ohne float:left/right bekomme ich die DIV nicht nebeneinander.
text-align:center; geht auch nicht.

MfG

DarkFather · 07.11.2012

AW: Div Container zentrieren

Ich machs kurz.

1. ID ist nur einmal (Wrapper)
2. Semikolon gibts in HTML-Tags nicht (<div id="Startseite";>)
3. Dein body-Tag verwirrt mich (nein nicht wirklich aber es ist einfach Mist)
4. Wie oft willst du deine Layer schließen?
5. Nach </html> kommt nichts mehr. Einfach nichts mehr.
6. Eigentlich wollte ich aufs CSS nicht mehr eingehen (mir reicht der Pfusch bisher schon, kann einfach kein Layout bei rauskommen), aber dann hab ich doch kurz reingeschaut. Was definierst du mit html * { ? html und alles, oder alles was mit html anfängt oder? Und gleich nächste Zeile, da fehlt der Selektor ganz.
7. Ist eigentlich schon Feintuning aber wenn du ein :hover vergibst brauchst dort nur noch zu vermerken, was nicht schon vorher so war. Also width, height, float und display kannst dir sparen.

Wenn das alles behoben ist bitte eine URL mit Bildern, ich hab den Code kopiert und sehe ein weißes Dokument. Hab ehrlich gesagt kein Bock mir da jetzt überall eine bg-color oder borders reinzupfuschen nur damit ich was sehe.

MfG
Dark

patrick_l · 07.11.2012

AW: Div Container zentrieren

Vorweg, du solltest dir erst einmal die nötigen Grundlagen von XHTML (HTML5) und CSS aneignen. Was du bis jetzt gemacht hast, ist wie DarkFather schon schrieb Murks. Eine Navigation wird mit einer unsortierten Liste (<ul>) umgesetzt.

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>xHTML Grundgerüst</title>

<!-- Ein Stylesheet -->
<link rel="stylesheet" type="text/css" href="assets/css/style.css" />

<!-- oder mehre Stylesheets für bestimmte Ausgaben -->
<link rel="stylesheet" type="text/css" media="screen" href="assets/css/screen.css" />
<link rel="stylesheet" type="text/css" media="print" href="assets/css/print.css" />

</head>

<body>
    <div id="wrap">
      <div id="header">
        <!-- Header -->
    </div>
    <div id="nav">
        <ul>
          <li><a href="#">Punkt 1</a></li>
        <li><a href="#">Punkt 2</a></li>
        <li><a href="#">Punkt 3</a></li>
      </ul>
    </div>
    <div id="main">
        <!-- Content -->
    </div>
    <div id="footer">
        <!-- Footer -->
    </div>
  </div>
</body>
</html>

IDs können nur einmal, Klassen mehrfach vergeben werden. Auch solltest du dein HTML Grundgerüst semantisch korrekt umsetzen. Was jetzt dein CSS und das Positionieren bzw. Ausrichten angeht.

Gib dem Hauptcontainer ("wrapper") eine Breite und verpasse diesem ein margin: 0 auto; Das ganze könnte dann so aussehen.

Code:

/* simples CSS Reset */
* {margin:0; padding:0; border:none; outline:none; font-size:100%;} 
/* Ausrichten des Wrappers */
#wrap {width: 960px; margin:0 auto;}

Zum Lernen von HTML, CSS und JavaScript habe ich mit einen anderen Usern eine Linkliste mit hilfreichen Ressourcen zusammen gestellt.

- Grundlagen & mehr (xHTML, HTML5, CSS & JS)

Vor allem möchte ich dir folgende Links zum Lernen nahelegen.

- HTML5-Handbuch - Webkompetenz
- Einführung in XHTML, CSS & Webdesign (Michael Jendryschik)
- CSS 4 You - The Finest in Stylesheets

Edit:
Auf deinen Quelltext bin ich bewusst nicht eingegangen, da hier ein Fehler nach dem anderen folgt. Angefangen bei doppelten Tags bis hin zu falschen Schreibweise (Schreibfehlern). Daher nur der Tipp von mir dich mit den Grundlagen auseinanderzusetzen.

Liebe Grüße, Patrick