• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Divs mittig positionieren!

P

Paulles

Neues Mitglied
Hey,

habe folgende Frage, mir gelingt es nicht die einzelnen boxen immer mittig zu stellen, momentan floaten diese links.
Die Seite wird horizontal gescrollt...

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>Lucky Leek</title>

        <link rel="stylesheet" href="style.css" type="text/css" media="screen" />

        <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js'></script>
        <script src="js/jquery.localscroll-min.js" type="text/javascript"></script>
        <script src="js/jquery.scrollTo-min.js" type="text/javascript"></script>

    
    
    
        <script type="text/javascript">
        $(document).ready(function () {
            $.localScroll.defaults.axis = 'x';
            $.localScroll();
        });
        </script>
        
        
    
</head>
<body>
                <a name="home"></a>
    <div id="menu">
        <ul>
            <li><a href="#box1">Home</a></li>
            <li><a href="#box2">Galerie</a></li>
            <li><a href="#box3">Speisekarte</a></li>
            <li><a href="#box4">Links</a></li>
            <li><a href="#box5">Kontakt</a></li>
        </ul>
    </div>
    
    <div id="wrapper">
    
    <div id="container">
        <div id="box1" class="box">
            <h2><a name="box1">First Box</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
        </div>
        
        <div id="box2" class="box">
            <h2><a name="box2">Second Box</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
        </div>

        <div id="box3" class="box">
            <h2><a name="box3">Third Box</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
        </div>


        <div id="box4" class="box">
            <h2><a name="box4">Fourth Box</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
        </div>

        <div id="box5" class="box">
            <h2><a name="box5">Fifth Box</a></h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget eros libero. Fusce tempus quam sit amet erat mollis a fermentum nibh imperdiet. Fusce iaculis sapien in turpis aliquet porta. Donec tincidunt gravida tortor, vel dignissim augue convallis sit amet. Aliquam auctor ornare accumsan. Cras convallis elit tincidunt arcu semper egestas. Mauris interdum fringilla nisi. Cras a dapibus lectus. Praesent blandit ullamcorper ornare. Nam hendrerit sollicitudin urna non ultricies. Phasellus condimentum auctor risus, at accumsan tellus tempor vel. Nunc mattis eleifend dolor at adipiscing.</p>
        </div>

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

Code: 
body {
background:#FFF;
text-align:left;
color:#666;
font-size:14px;
font-family:georgia, 'time new romans', serif;
margin:0 auto;
padding:0;
height:100%;
webkit-margin-before: 1em;

}

a {
color: #ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}

a:visited {
color: #aaaaaa;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}

a:hover {
color: ffffff;
padding: 0 5px;
text-decoration: none;
font-family: verdana, helvetica, arial, sans-serif;
font-size: 16px;
letter-spacing: -1px;
}

h1 {
width: 600px;
border: none;
padding: 35px 0 0 0;
}

h2 {
font-size: 24px;
font-family: verdana, helvetica, arial, sans-serif;
color:#444444;
font-weight: 400;
padding: 0 0 10px;
}

h3 {
font-size:14px;
font-family:verdana, helvetica, arial, sans-serif;
letter-spacing:-1px;
color:#fff;
font-weight: 700;
text-transform:uppercase;
margin:0;
padding:8px 0 8px 0;
}

p {
color:#fff;
font-size: 20px;
line-height: 38px;
font-family: 'Trebuchet MS', verdana, helvetica, sans-serif;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}

img {
border:none;
}

#header {
width: 360px;
float: left;
margin: 0 15px 0 0;
padding: 0;
}

#menu {
background: #a8e500;
position: fixed;
top: 0px;
left: 0;
border: 1px solid #84BC24;
clear: both;
float: left;
font-family: helvetica, sans-serif;
font-weight: bold;
font-size: 18px;
text-transform: uppercase;
margin: 0;
padding: 18px;
z-index: 500;
/*filter: alpha(opacity=75);
opacity: .75;*/
width:100%;
height:30px;
text-align: center;


}

/#menu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

#menu ul li{
list-style-type: none;
color: #FFF;
display: inline;
margin: 0;
padding: 0 10px 0 10px;
}

#menu ul li a{
text-decoration: none;
list-style-type: none;
color: #FFF;
display: inline;
margin: 0;
padding: 0;
}

#menu ul li a:hover{
text-decoration: none;
list-style-type: none;
color: #95CD35;
display: inline;
margin: 0;
padding: 0;
}

#wrapper{
    position:absolute;
    height:100%;
    width:6000px;
    background-image:url('./images/gras.png');
    background-position:bottom;
    background-repeat:repeat-x;
}
#container {
position: absolute;
top: 120px; left: 40px;
width: 6040px;
margin: 0 auto;
padding: 0;
}

.box {
background: #111111;
border: 3px dashed #222222;
width: 500px;
float: left;
line-height: 22px;
margin-left: 250px;
padding: 5px 30px 30px 30px;
}

.box p {
color:#aaaaaa;
font-size: 16px;
line-height:24px;
padding: 0 0 10px;
margin: 20px 0 10px 0;
}

vielen dank schon mal
 
Die Box die mittig sein soll muss eine feste Breite besitzen und dann mit margin:0px auto;

Dann ist es mittig im Bezug auf das Elternelement
 
danke für die schnelle Antwort, aber ich bekomme es nur hin, dass dann alle boxen auf die gesamte wrapperbreite bezogen mittig sind und untereinander.

Gibt es vielleicht noch etwas detailiertere Vorschläge, wäre super!!!
 
ja du musst das margin aus dem Body entfernen, margin kommt nur in das Element, was du mittig haben möchtest....
 
Dein HTML-Code ist nicht ganz valide. Ich glaube #wrapper wird nie geschlossen.

Du willst innerhalb von #wrapper alles zentrieren? Dann musst Du nur aus

Code: 
.box {
background: #111111;
border: 3px dashed #222222;
width: 500px;
float: left;
line-height: 22px;
margin-left: 250px;
padding: 5px 30px 30px 30px;
}

das machen

Code: 
.box {
background: #111111;
border: 3px dashed #222222;
width: 500px;
line-height: 22px;
margin: 0 auto;
padding: 5px 30px 30px 30px;
}

Hinweis:
Du verwendest width und padding gleichzeitig - darauf würde ich verzichten. padding wird zum width addiert, wodurch sich eine größere Breite ergibt. Das kann insbesondere im IE zu Fehldarstellungen führen, da ältere Browser auch schonmal das doppelte padding addieren.
 
hey das führt zur mittigen Positionierung der boxen ja, aber dann untereinander, wenn man horizontal scrollt sollen die einzelnen menüpunkte zentriert sein, nebeneinander, mittig jeweils im browserfenster...
 
Achsooo .. dann musst Du das was ich oben sagte rückgängig machen und ein umgebendes Element zentrieren. Aktuell hast Du nur #container ringsrum, was allerdings absolut positioniert ist und merkwürdig groß. Daher weiß ich nicht welche Aufgabe dieses Element haben soll. Im einfachsten Fall ergänzt Du einfach innerhalb von #container um die .box'en herum ein Element.

HTML: 
<div id="container">
 <div id="innerwrapper">
  <div class="box">..</div>
  <div class="box">..</div>
  <div class="box">..</div>
 </div>
</div>

#innerwraper bekommt dann eine feste Breite und die Anweisung sich zu zentrieren.

Code: 
#innerwrapper {
 margin: 0 auto;
 width: 600px;
}

Ggfs. musst Du auch noch das floaten der boxen beenden damit das ordentlich zu sehen ist.
 
Also hier mal die temporäre adresse, wie man sieht floaten divs links, sie sollen aber mit der ersten Box beginnend mittig sein.

Ich bitte ernsthaft um weitere Hilfe.

Danke
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben