div float:left mittig zentrieren

laemmen · 01.11.2010

Hallo,
ich bekomme einen regelrechten Anfall :schmoll:

ich habe folgendes Problem:

auf einer Seite habe ich eine menubar, die fixiert bleiben soll (position:fixed) und meinen Inhalt in container verteilt, zu denen per tag gesprungen wird (alles auf einer Seite). Mein Problem ist, dass die Menubar nicht sichtbar ist, solange die div-container nicht alle float:left; haben (warum auch immer???! :mad:

). Auf jeden Fall soll die Seite mittig zentriert sein. Das geht aber nicht mit margin:0 auto; ... meine billige Alternative war es den ganzen div-Kram in eine tabelle zu packen und diese mittig zu zentrieren - das funktioniert, ist aber ziemlich hirnig. Dann habe ich noch versucht, die div's mit float:left in einen weiteren container zu packen, der margin:0 auto hat... geht natürlich nicht, da die container dann einfach aus dem zentrierten div rausspringen.

Wie bekomme ich es zustande, die div's alle mittig zu zentrieren und trotzdem float:left zu benutzen?

ooooder

alternativ wäre auch eine Lösung schön, mit der ich die Menubar sichtbar machen kann ohne die div's mit float:left zu versehen.

ich hoffe ihr versteht mein Problem und habt ne Menge toller Lösungen am Start

ich wäre auf jeden Fall seeeehr dankbar!

Gruß Dennis

CrazyLopp · 01.11.2010

AW: div float:left mittig zentrieren

Ich glaube am besten wäre es du würdest mal den Code posten, damit man sich einen Überblick verschaffen kann, weil so ist es nur im trüben fischen...

cebito · 01.11.2010

AW: div float:left mittig zentrieren

laemmen schrieb:
ich hoffe ihr versteht mein Problem

Nee, bzw. nur teilweise, kannst du das mal bebildern, code posten etc. pp. siehe rote Zeile in meiner Sig.

laemmen · 01.11.2010

AW: div float:left mittig zentrieren

entschuldigt, wenn ich mich gerade etwas unklar ausdrücke. Hier also der Code:

Code:

<body>
<div id="navi" style="position:fixed; width:100%; margin-bottom:50px;"> <a href="#eins">eins</a> <a href="#zwei">zwei</a></div>
<div id="wrapper" style="width:800px; margin:0 auto;">



  <div id="eins" style="margin-top:100px; width:800px; height:400px;"> askhkjjkh fd dsfsfd gdf gdfhjk</div>
  <div id="zwei" style="margin-top:20px; width:800px; height:400px;"> askhkjjkh fd dsfsfd gdf gdfhjk</div>

</div>
</body>

ich habe float:left nun entfernt, habe aber das Problem, dass die Menubar nun nicht am oberen Bildrand fixiert ist, sondern links am Rand rumschwebt ... :rolleyes:

Herr_D · 01.11.2010

AW: div float:left mittig zentrieren

Warum with 100% für die Navbar?

Schon mal über z-Index nachgedacht?

Warte mal ich schreib 'nen Code

laemmen · 01.11.2010

AW: div float:left mittig zentrieren

Herr_D schrieb:
Warum with 100% für die Navbar?

Schon mal über z-Index nachgedacht?

Warte mal ich schreib 'nen Code

mit z-index habe ich zuvor noch nie was gemacht :uhm:

Herr_D · 01.11.2010

AW: div float:left mittig zentrieren

Soll die navbar oben stehen?

laemmen · 01.11.2010

AW: div float:left mittig zentrieren

Herr_D schrieb:
Soll die navbar oben stehen?

ja genau, oben fixiert sein und somit beim scrollen nicht verschwinden

Herr_D · 01.11.2010

Moment sowas wollte ich grad für meine Seite basteln...

Auf die Schnelle mal in einen Entwurf eingebaut

HTML:

<!doctype html public "-//W3C//DTD HTML 4.01 //EN">
<html>
<head>
<title></title>
<meta name="author" content="R.D">
<meta name="generator" content="Ulli Meybohms HTML EDITOR">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<style type="text/css">
<!--
* {margin:0; padding:0 }

body {
font-size:100.01%;
font-family: sans-serif;
}


#inhalt {
width:40em;
margin:3.5em auto;
padding:0.5em;
background-color:#dedede;
border:1px solid #000;
}

#navi {
position:fixed;
top:0;
left:0;
width:100%;
color:#444;
font-size: small;
border-top:1px solid #444;
z-index:6001;
text-align:center; /* IE<7 */
}

#navi #beng {
width:80%;
margin:0 auto; }

#navi div {border-right:1px solid #666;
text-align:center;}
.n-one{
float:left;
width:20%;
color:#000;
background:#dedede;
padding:1em;}

.n-two{
float:left;
width:20%;
color:#000;
background:#dedede;
padding:1em;}

.n-three{
float:left;
width:20%;
color:#000;
background:#dedede;
padding:1em;}

.n-four{
float:left;
width:20%;
color:#000;
background:#dedede;
padding:1em;}

.n-five{
color:#000;
background:#dedede;
padding:1em;
border:0 !important}


h1, h2 {

margin-bottom:1em;}

h2 {margin-top:2em;}
-->

</style>
</head>
<body >
<div id="navi">
<div id="beng">
<div class="n-one"><a href="#anfang">Hallo Welt</a></div>
<div class="n-two"><a href="#ab1">Quadratur des Kreises</a></div>
<div class="n-three">Three</div>
<div class="n-four">4</div>
<div class="n-five">rechte seite</div>
</div>
</div>
<a name="anfang">&nbsp;</a>
<div id="inhalt">
<h1>Überschrift I</h1>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<h2>Überschrift II</h2>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<a name="ab1">&nbsp;</a>
<h1>Überschrift I</h1>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<h2>Überschrift II</h2>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>
<p>Textfeld</p>

</div>

</body>
</html>

Menue sollte als Liste usw...

laemmen · 01.11.2010

AW: div float:left mittig zentrieren

yeah, cool! Vielen Dank!

Herr_D · 01.11.2010

AW: div float:left mittig zentrieren

Grüße an die schönste Stadt der Welt