Ankündigung

Einklappen
Keine Ankündigung bisher.

2 Div's zentrieren

Einklappen

Neue Werbung 2019

Einklappen
X
Einklappen
  • Seite von 1
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge
Vorherige Weiter
  • #1

    2 Div's zentrieren

    Hallo,

    ich hoffe mir kann jemand helfen. Ich habe folgendes Problem:

    Ich habe 5 div's welche folgendermaßen aufgebaut sind:

    Ein Header mit Breite 900px und Höhe 100px
    Darunter ein Nav-Menü mit Breite 900px und Höhe 35px

    Darunter kommen 2 divs nebeneinander:
    ein Linksmenu mit Breite 130px und Höhe 470px
    ein Inhalt mit Breite 770px und Höhe 470px
    Darunter noch ein Footer mit Breite 900px und Höhe 25px

    Alle divs habe ich mit margin:0 auto; zentriert. Die beiden Divs
    Linksmenu und Inhalt habe ich mit float:left; nebeneinander gesetzt.
    Danach habe ich ein Clear-div mit clear:both und height:0 gesetzt.

    Hier der html-Code:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Stempel - Neue HTML 4.01 Webseite</title>
        <link rel="stylesheet" type="text/css" href="sides/styles.css" />
    </head>
    <body>
        <div id="header">&nbsp;</div>
        <div id="menu_oben">&nbsp;</div>
        <div id="menu_links">&nbsp;</div>
        <div id="inhalt">&nbsp;</div>
        <div id="clear"></div>
        <div id="footer">&nbsp;</div>
    </body>
</html>
    Und hier der css-Code:
    Code:
    *{
    padding: 0;
     margin: 0;
      background-color: #F3ECD3; 
       overflow: auto;
}
body{
    text-align:center;
}
div{
    margin: 0 auto;
}
div#header{
    height:100px;
    width:900px;
     background-color: #E2D21A;
      z-index: 2;
}
div#menu_oben{
    height:35px;
    width:900px;
     background-color: #524C0A;
      z-index: 1;
}
div#menu_links{
    height:470px;
    width:130px;
     background-color: #524C0A;
      z-index: 2;
     float:left;
}
div#inhalt{
    margin-left:0;
    margin-right:auto;
    height:470px;
    width:770px;
     background-color: #FCFAE4;
      z-index: 2;
}
div#clear{
    clear:both;
    height:0;
}
div#footer{
    height:25px;
    width:900px;
     background-color: #E2D21A;
      z-index: 1;
}
    Alle divs werden korrekt zentriert, nur die beiden nebeneinander-
    liegenden divs nicht.
    Kann mir bitte jemand sagen wie ich die zentriert bekomme?

    Mfg
    Stichworte: -
  • #2
    Da überschreibt das clear-Attribute wohl die Funktionalität von margin: auto. Ich empfehle dir ein Div um die beiden zu zentrierenden Divs zu legen, das du dann zentrierst. Kann mir nicht vorstellen, dass es anders funktioniert.

    Kommentar

    • #3
      Code:
      /* Layout */

#wrapper { 
  	width: 700px;
  	margin: 0px auto;
	background: #ffffff;
	margin-bottom: 10px;
}

#header { 
  	width: 700px; 
  	height: 210px;
  	margin: 0;
  	padding-bottom: 0; padding-left: 0px; padding-right: 0px; padding-top: 0px;
  	background: url(images/header.jpg);
}

#menu { 
  	width: 122px;
  	margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
  	padding-bottom: 0px; padding-left: 15px; padding-right: 0px; padding-top: 58px;
  	background-color: #ffffff;
  	float: left;
	clear: none;
}

#content {  
  	width: 520px;
  	margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
  	padding-bottom: 0px; padding-left: 20px; padding-right: 20px; padding-top: 8px;
  	background-color: #ffffff;
	border-left: 1px solid #075dac;
  	float: right;
	clear: none;
}

.clr
{
clear:both;
}

#footer {
	width: 700px;
	height: 50px;
	margin-bottom: 0px; margin-left: 0px; margin-right: 0px; margin-top: 0px;
	padding: 0px;
	background: url(images/footer.jpg)
}
      das ist eine Seite von mir, die auch so aufgebaut sein soll, nur dass hier das horizontale menü nicht da ist... aber müsste ja funktionieren und hier html:

      Code:
      <div id="wrapper">
<div id="header"> </div>
    	<div id="menu"> </div>
        <div id="content">

</div
  <div class="clr"> </div>
	<div id="footer"></div>
</div>

      Kommentar

      • #4
        Da hat sich im HTML-Teil ein Fehler eingeschlichen: Da fehlt ein > beim schliessenden Tag von <div id="wrapper">

        Kommentar

        • #5
          Zitat von Montellese Beitrag anzeigen
          Da hat sich im HTML-Teil ein Fehler eingeschlichen: Da fehlt ein > beim schliessenden Tag von <div id="wrapper">
          das ist vom content, nur beschissen eingerückt

          Kommentar

          • #6
            Lol alles klar. So genau hab ich nicht hingeschaut. Hab mich aber schon gewundert, dass die Aufteilung der Div-Blöcke bissl komisch ist.

            Kommentar

            • #7
              ja irgendwie ging das hier in dem editor ein bissl komisch... und hatte dann keine lust mehr das noch zu ordnen ^^ aber gehts denn nun?

              Kommentar

              • #8
                Erst mal danke für die schnellen Antworten.

                Also ich hab die 2 divs in ein übergeordnetes div reingehauen
                und jetzt gehts.

                Aber gibt es denn keine Möglichkeit das ohne dieses "Eltern-Div" zu
                machen?

                Kommentar

                Vorherige Weiter
                Lädt...
                X