Antworten auf deine Fragen:
Neues Thema erstellen

div float:left mittig zentrieren

laemmen

Maissalat

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 :D ich wäre auf jeden Fall seeeehr dankbar! :)

Gruß Dennis
 

CrazyLopp

Hat es drauf

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...
 

laemmen

Maissalat

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

offline

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
 

Herr_D

offline

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...
 
Zuletzt bearbeitet:
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben