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

Div Container zentrieren

D

Deleted member 26020

Guest
Hallo,

ich hab folgendes Problem. Eine Website die ich gerade für einen bekannten mach, möchte ich das horizontale CSS Menü zentrieren.
Der Container hat folgenden Code
Code: 
<style media="all" type="text/css">@import "Serverpfad/menu_style.css";</style>
<div class="menu" style="position:absolute; top:389px; width:610px; margin:0px auto">
<ul>
<li><a href="index.php?go=snowkiten" target="_self" >Snowkiten</a>
<ul>
<li><a href="index.php?go=snowkiten" target="_self">Beschreibung</a></li>
<li><a href="index.php?go=snowkiten_kurse" target="_self">Kurse</a></li>
<li><a href="index.php?go=anfrage" target="_self">Anfrage</a></li>
<li><a href="index.php?go=eventkalender" target="_self">Eventkalender</a></li>
</ul>
</li>
<li><a href="index.php?go=kitesurfen" target="_self" >Kitesurfen</a>
<ul>
<li><a href="index.php?go=kitesurfen" target="_self">Beschreibung</a></li>
<li><a href="index.php?go=kitesurfen_kurse" target="_self">Kurse</a></li>
<li><a href="index.php?go=camps" target="_self">Camps</a></li>
<li><a href="index.php?go=anfrage" target="_self">Anfrage</a></li>
<li><a href="index.php?go=eventkalender" target="_self">Eventkalender</a></li>
</ul>
</li>
<li><a href="index.php?go=shop" target="_self" >Shop</a>
</li>
<li><a href="index.php?go=powerkiten" target="_self" >Powerkiten</a>
<ul>
<li><a href="index.php?go=powerkiten" target="_self">Beschreibung</a></li>
<li><a href="index.php?go=powerkiten_kurse" target="_self">Kurse</a></li>
<li><a href="index.php?go=anfrage" target="_self">Anfrage</a></li>
<li><a href="index.php?go=eventkalender" target="_self">Eventkalender</a></li>
</ul>
</li>
<li><a href="index.php?go=standuppaddel" target="_self" >Standup Paddel</a>
<ul>
<li><a href="index.php?go=standuppaddel" target="_self">Beschreibung</a></li>
<li><a href="index.php?go=standuppaddel_kurse" target="_self">Kurse</a></li>
<li><a href="index.php?go=anfrage" target="_self">Anfrage</a></li>
<li><a href="index.php?go=eventkalender" target="_self">Eventkalender</a></li>
</ul>
</li>
</ul>
</div>

Die CSS Datei hat folgenden:
Code: 
.menu{
    border:none;
    border:0px;
    margin:0px auto;
    padding:0px;
    font: 100% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }
.menu ul{
    background:#222222;
    height:35px;
    width:610px;
    list-style:none;
    margin:0 auto;
    padding:0;
    }
    .menu li{
        float:left;
        padding:0px;
        }
    .menu li a{
        background:#222222;
        color:#cccccc;
        display:block;
        font-weight:normal;
        line-height:35px;
        margin:0px auto;
        padding:0px 25px;
        text-align:center;
        text-decoration:none;
        }
        .menu li a:hover, .menu ul li:hover a{
            background: #009f15 url("http://www.html.de/images/hover2.png") bottom center no-repeat;
            color:#FFFFFF;
            text-decoration:none;
            }
    .menu li ul{
        background:#404040;
        display:none;
        height:auto;
        padding:0px;
        margin:0px;
        border:0px;
        position:absolute;
        width:225px;
        z-index:200;
        /*top:1em;
        /*left:0;*/
        }
    .menu li:hover ul{
        display:block;
        
        }
    .menu li li {
        background:url('images/sub_sep.gif') bottom left no-repeat;
        display:block;
        float:none;
        margin:0px;
        padding:0px;
        width:225px;
        }
    .menu li:hover li a{
        background:none;
        
        }
    .menu li ul a{
        display:block;
        height:35px;
        font-size:14px;
        font-style:normal;
        margin:0px;
        padding:0px 14px 0px 14px;
        text-align:left;
        }
        .menu li ul a:hover, .menu li ul li:hover a{
            background:#009f15 url('images/hover_sub2.png') center left no-repeat;
            border:0px;
            color:#ffffff;
            text-decoration:none;
            }
    .menu p{
        clear:left;
        }

Ich bekomms leider nicht hin den Container zu zentrieren. Diverse möglichkeiten mit "margin:0px auto" haben nicht funktioniert.
Ich find leider den entscheidenen Fehler/Denkfehler..

Vielen dank im voraus für die Hilfe!
 
Werbung:
du gibst dem div.menu ein position:absolut mit das kann nicht gehen nimm das mal aus dem element raus.

EDIT nimm alle styleangaben aus dem tag raus.
 
super, danke.. :mrgreen:

Leider funktioniert der abstand nach oben hin nicht..

Code: 
.menu{
    border:none;
    border:0px;
    margin:0px auto;
    [COLOR=#ff0000]top:389px;[/COLOR]    
    padding:0px;
    font: 100% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }

EDIT:
Hab die position vergessen :oops:
Code: 
.menu{
    border:none;
    border:0px;
    margin:0px auto;
    [COLOR=#ff0000]position:relative;
    top:-35px;[/COLOR]   
    padding:0px;
    font: 100% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet  Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;
    }

Ich hoffe, dass das so legitim ist.. :mrgreen:
 
Zuletzt bearbeitet von einem Moderator:
Werbung:
Hallo.

Willst du wirklich relativ positionieren oder möchtest du nur einen Anstand nach oben haben?

Wenn du nur einen Anstand nach oben brauchst kannst du den auch mit margin angeben.

Gruß
Elroy
 
Ja eigentlich nur einen bestimmten Abstand nach oben, da sich das Menü über eine Grafik legen soll.
Mit "margin-top:0px;" ist das Menü dann genau unter der Grafik.
Mit "margin-top:-35px;" ist das Menü hinter der Grafik..
Ein hervorheben mit "z-index" funktioniert leider nicht.
 
wieso relative?
einfach static lassen und einen margin-top:10px; sollte reichen aber wenn du das so lassen willst, gibt es noch die Lösung in der Style Date zu schreiben:

*{
padding-top:10px;
}

sollte es auch machen oder:

body{
margin:10px;
padding:10px;
}
 
Werbung:
wesshalb soll er mit * arbeiten? dann hat er auf jedem element mal ein padding von 10px
macht ja absolut kein sinn.

Wenn du nun dem div das margin gibst kannst du ihm dort auch gleich die 35px mit geben
und positioniere die ul relative dann kannst du auch ein ausfahrbares untermenü machen.
 
Abend ;-)
Danke für die Tipps, ich werd sie gleich morgen vormittag ausprobieren und berichten
 
Also ich versuchs seit ein paar stunden, aber es will nicht so richtig funktionieren..
Ich bekomm das CSS Menü mit dem Code nicht mehr über die Grafik..

Code: 
        border:none;
	border:0px;
	margin:0px auto;
	[COLOR=#ff0000]position:static;[/COLOR]
[COLOR=#ff0000]	margin-top:-1180px;[/COLOR]
[COLOR=#ff0000]	z-index:10;[/COLOR]
	padding:0px;
	font: 100% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
	font-size:14px;
	font-weight:bold;

"margin-top" lässt das Menü nur dort positionieren, wenn ich diesen "wahnsinnigen" Abstand eingeb..
Ich denke, ich belasse es bei
position:relative; ​
top:-35px;
​
Außer es widerspricht in irgendeiner weise welche Regeln, etc.
​
 
Werbung:
Ich glaub ich hab den fehler gefunden, warum ich diesen utopischen Wert bei
position:static;


margin-top:-1180px;



hatte. Dennoch ist das "Problem", dass das CSS Menü die Grafik nicht überdeckt, anders wie im Screenshot.. So sollte es aussehen.

2582

Der Link zur Seite: *
 
Zuletzt bearbeitet von einem Moderator:
Wenn du das nicht überall haben willst mit * dann eben auf den body bezogen

Code: 
body{
paddin-top:100px;
}
 
Werbung:
Ja wie gesagt, ich habs jetzt mit
position:relative;​
top:-35px; gemacht.. Aber danke für die vielen Tipps und die tolle Hilfestellung ​
:mrgreen:

Sobald die Seite fertig ist, macht ich einen Thread im entsprechenden Forum auf um euch das Ergebnis zu präsentieren.
Im Grunde ist die Seite jetzt fast fertig, die ein oder andere Grafik wird noch nicht gehen, da ich die jetzt noch auf dem richtigen Server drauf sind..
Ich werd dann evtl. relative Pfade oder vollständige Pfade verwenden, mal sehen was besser ist.
 
Ich bins wiedermal.. Also das zentrieren funktioniert jetzt super, allerdings "nur" in Chrome, Opera, Safari und FF.. (aktuelle Versionen)
Im IE (aktuelle Version) leider nicht ganz. Mein CSS Menü ist dort nicht zentriert und der Div Container, wo meine "Menüleiste" ist, die ist nicht ge-"fixed".
Scrollt also mit und hat nicht 100% Breite vom Browserfenster, sondern 100% von der Seite selbst (in dem Fall genau 1000px)

Der Workaround von selfhtml funktioniert leider nicht, daher bin ich jetzt irgendwie ratlos..
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben