✔ Navigation Breite des Topmenu "fixieren", Submenu hat feste Breite

Das hilft schon mal, Danke! Aber der Text, den ich im Footer eingebe, steht hier:

bsp.jpg


Weiß = Wrapper
Grau = Bereich ausserhalb des Wrappers, hier taucht sonst nichts auf
 
Okay, ich gehe dann mal von dieser Konstellation aus:
HTML: 
<div id="footer"><p>Beispiel</p></div>
Das <p>-Element erzeugt als Voreinstellung einen Absatz im Textfluß, der zurückgesetzt werden muß:
CSS: 
#footer p {margin:0}
 
Hi,

endlich habe ich mal wieder Zeit an der Homepage weiter zu arbeiten - und komme wieder mal nicht weiter...

Das Menü usw. funktioniert, aber es ist mir bei den Hauptpunkten von der Höhe her zu hoch, hier ein Bild:

1.jpg

Meine Seite ist wie folgt aufgebaut:
Ich habe einen Wrapper, der besteht aus:
- header (dieser enthält die div-id Logo (ganz oben soll ein Bild auf der Seite erscheinen) sowie darunter das Menü)
- index (hier öffnen sich alle Seiten)
- footer

Auf dem Bild mit dem Menü sieht man, dass die "Felder" der Unterpunkte sich mit den Hauptpunkten "überschneiden", wie lässt sich das lösen?

Anbei mal der Quelltext vom header:
CSS: 
<body>
    <div id="wrapper">

        <div id="header">

        <div id="logo">
        <img src="Link" alt="Bild" />
        </div>
       
        <div id="menu">
            <ul class="child">
                  <li class="topmenu">
                    <a id="main" href="Link">Startseite</a>
                    <ul>
                      <li class="submenu"><a href="Link">Über uns</a></li>
                     <li class="submenu"><a href="Link">Anfahrt</a></li>
                    <li class="submenu"><a href="Link">Kontakt</a></li>
                    <li class="submenu"><a href="Link">Impressum</a></li>
                       </ul>
                 </li>
....


Und hier der Quelltext vom stylesheet:

CSS: 
body        {font-family:'Verdana'; font-size: 13px; color: #313131; background: #e5e5e5; hyphens: auto;}

#wrapper {width: auto; max-width: 1300px; min-height: 800px; margin: auto; background: #ffffff; position: relative;}

#header {padding-top: 5px; text-align: center;}

#logo {
}

#menu {
  padding-top: 5px;
  float: right;
  font-size: 13px;
  position: relative;
  left: -50%; /* or right 50% */
  text-align: left;
}

#menu > .child {
  position: relative;
  left: 50%;
}

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

#menu li.topmenu {
  float: left;
  font-family: 'Verdana';
  position: relative;
}

.topmenu a {
  float: left;
  width: auto;
  text-align: center;
}

#menu ul ul {
  display: none;
  position: absolute;
  left: 0px;
  top: 57px
}

.topmenu a, .submenu a{
  padding: 10px 7px;
  color: #e5e5e5;
  font-weight: bold;
  text-decoration: none;
background: #13237F;
border-width: 0.1px;
border-color: #ffffff;
border-style: solid;
  margin: 0px; 
  -moz-border-radius: 0em;
  -webkit-border-radius: 0em;
  border-radius: 0em;
}

.submenu a{
  font-size: 12px;
  width: 170px;
  position: relative;
  clear: both; /* special IE6 */
}

#menu a:hover, .topmenu.on a {
  color:#0E1A5E;
background: #e5e5e5;
border-width: 0.1px;
border-color: #000000;
border-style: solid;
}

#menu li:hover ul {
  display:block;
  z-index:500;
}

#main {padding-top: 18px; padding-bottom:25px}

#footer {position: absolute; bottom: 0; padding-left: 30px; background-color: #1D2460; width: 100%; height: 25px; color: #ffffff; box-sizing: border-box;}

#footer p {margin:0}

Bei #menu setze ich "padding-top" auf 5px, damit ich einen Abstand zum div id "Logo" habe.
Bei #menu ul ul gebe ich an "top: 57px ", hiermit reguliere ich den Abstand der Unterpunkte zu dem "oberen Rand" des Menüs (bei 58px sitzen die Unterpunkte des Menüs genau richtig unter den Hauptpunkten - wird das dann aber bei jedem Rechner mit unterschiedlicher Auflösung gleich angezeigt?), wenn ich hier die 57px verringere überschneiden sich Felder des Untermenüs immer mit den Feldern der "Hauptpunkte". Kann man hier nicht irgendwie einstellen, dass sich das Menü automatisch immer untereinander öffnet und sich die Felder nicht überschneiden?

Bei #main habe ich angegeben: padding-top: 18px. Wenn ich hier die px auf 40 erhöhe, werden meine "hauptmenüpunkte" noch höher. Warum? Das Main hat doch nichts mit dem Header zu tun, in dem das Menü sitzt - oder?
Wenn ich es auf 5px reduziere sitzt die Schrift ganz oben, aber die blauen Felder des Menüs bleiben immer noch zu hoch, dann sieht mein Menü so aus:
2.jpg

Und der Abstand von den Hauptpunkten zu den Unterpunkten wird groß, wenn man den Mauszeiger von einem Hauptpunkt zu einem Unterpunkt zieht verschwindet das Untermenü wegen der großen "Lücke"...

Ich hoffe, man versteht mein Problem - vielen Dank schon mal!
 
Okay, vielen Dank hierfür!

Beim Hauptmenü:
Wie bekomme ich hier die gleiche Höhe der blauen Felder wie beim Submenü hin? Er verzieht die Höhe jedes mal. Vor allem, wenn ich beim DIV #main padding-top: 18px erhöhe, werden die Felder noch höher. Wenn ich es auf 0px ändere, bleiben die Felder immer noch höher als die Submenü-Felder, und die Schrift sitzt ganz oben und nicht mehr mittig im Feld...
 
Elli1898 hat gesagt.:
Beim Hauptmenü:
Wie bekomme ich hier die gleiche Höhe der blauen Felder wie beim Submenü hin? Er verzieht die Höhe jedes mal. Vor allem, wenn ich beim DIV #main padding-top: 18px erhöhe, werden die Felder noch höher. Wenn ich es auf 0px ändere, bleiben die Felder immer noch höher als die Submenü-Felder, und die Schrift sitzt ganz oben und nicht mehr mittig im Feld...
Zum Vergrößern anklicken....
Ein DIV #main existiert garnicht in Deinem Code, stattdessen besitzt der erste Hauptmenüpunkt diese ID.

Da laut Deinem gezeigten CSS für die Haupt- und Submenü-Verweise derselbe Innenabstand gilt, aber für die Submenü-Verweise eine dezent kleinere Schriftgröße (12px vs. 13px) definiert ist, wäre hier der Hebel anzusetzen.
 
Habe meinen Fehler gefunden. In der index.php hatte ich noch die DIV #main, hab diese jetzt umbenannt... Vielen Dank!!! :-)
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück