Menu positionieren

[Loon3y]

Moinsen..

Folgendes Problem..

Habe einen Header (grafik siehe unten, beim weißen feld wird das menu eingesetzt, die ecke unten am menu ist 56px hoch und 121px breit) welcher eine art „ecke“ hat. Jetzt wird das Menu in diesem Leerfeld eingesetzt. Das hab ich nun gelöst, indem ich das Menu relativ positioniere. Klappt auch soweit…allerdings wenn ich um das Menu und dem Header kein div mache, dann entsteht ein weißer abstand unterhalb des menus+banner. Wieso das? Wie könnte ich das optimal lösen?

Der Banner wird nochmals überarbeitet, da die längen und breitenangabe recht unsauber ausgefallen sind..ist nur schnell einer.

Hier mal der code:

Htm:

              <div id="head">
              <h1> <a href="index.htm"> <img src="gfx/banner2.png" width="801" height="119" alt="Willkommen auf meiner Seite" /> </a> </h1>
              <ul id="navigation">
                          <li> <a href="index.htm"> <img src="gfx/home.png" width="136" height="56" alt="Home" /> </a> </li>
                          <li> <a href="#"> <img src="gfx/fh.png" width="136" height="56" alt="Frühling &amp; Herbst" /> </a> </li>
                          <li> <a href="#"> <img src="gfx/sommer.png" width="136" height="56" alt="Sommer" /> </a> </li>
                          <li> <a href="#"> <img src="gfx/winter.png" width="136" height="56" alt="Winter" /> </a> </li>
                          <li> <a href="#"> <img src="gfx/wir.png" width="136" height="56" alt="Über uns" /> </a> </li>
              </ul>
              </div>

css:

  #head              { widht: 801px; height: 175px; }
   
  #head h1          { font-size: 1em; width: 801px; height: 175px; }
  #head h1 img   { width: 801px; height: 175px; }
   
  #head ul#navigation                 { width: 801px; height:56px; position:relative; left: 121px; top: -56px;  }
  #head ul#navigation li               { display:inline; float:left; }

Grüßle und Dank
Loon3y

 

[prm]

Ich kann dein Problem nicht so ganz nachvollziehen. Link wäre besser, damit man alles inkl. Bilder sieht.

Wenn es sich nicht um ein Hintergrundbild handelt, könnte das helfen:

img {display: block;}

, siehe Lücke am unteren Bildrand

Ansonsten kannst du auch das noch versuchen:

ul, li {margin: 0; padding: 0;}

 

[Loon3y]

Ich kann dein Problem nicht so ganz nachvollziehen. Link wäre besser, damit man alles inkl. Bilder sieht.

Wenn es sich nicht um ein Hintergrundbild handelt, könnte das helfen:

img {display: block;}

, siehe Lücke am unteren Bildrand

Ansonsten kannst du auch das noch versuchen:

ul, li {margin: 0; padding: 0;}

ul li habe ich margin + padding auf 0 in der css weiter oben gesetzt, also allgemein für diese beiden elemente.

Diese "Lücke" ist komischerweiße genau 56px hoch, so hoch wie das menu ist welche ich via top: -56px; hoch geschoben habe. allerdings habe ich nun festgestellt, dass die lücke wenn das <div id="head"> außenrum weg ist weiß ist, wenn ich das div hinmache, dann verschiebt es mir die erste textzeile im <div id="main"> um 56px nach unten.

Link kann ichl eider nicht posten, da die Daten vertraulich sind und zumal ich auf Arbeit bin und da leider nichts hochladen kann. Wenn es nicht anders geht erstell ich mal eine Datei ohne weiteren Inhalt und lade es hoch.

Gruß und besten Dank.
Loon3y

EDIT: wenn ich beim darauffolgendem <div id="main"> im css ein margin-top:-56px; angebe, verschwindet diese lücke.

Problem gelöst aber: ist das ganze so i.o. oder könnte man das besser lösen?

EDIT2: weiße lücke ist weg, aber es verschiebt mir die erste textzeitle um 56px nach unten, wieso das?...oh man.

 

[prm]

Mal ganz abstrakt, Link mit Bildern wäre echt hilfreich:

gib dem #head ein "position: relative;"

ul#navigation positioniere hierzu absolut mit den gewünschten top-/left-Werten.

Dem dann folgenden #main gib einen passenden margin-top-Wert.

 

[Loon3y]

Edit:

ok zwei möglichkeiten:

1.

#head        { width: 801px; height: 175px; [B]position:absolute;[/B] } 

#head h1    { font-size: 1em; }
#head h1 img    { width: 801px; height: 175px; }

#head ul#navigation        { width: 680px; height: 56px; [B]position:relative;[/B] left: 121px; [B]top:-56px;[/B] }

div#main        { width: 801px; min-height: 500px; background-color: #30d6ff; [B]margin-top:175px;[/B] }

oder 2.

#head        { width: 801px; height: 175px; } 

#head h1    { font-size: 1em; }
#head h1 img    { width: 801px; height: 175px;[B] position:absolute;[/B] }

#head ul#navigation        { width: 680px; height: 56px;[B] position:relative;[/B] left: 121px; [B]top:119px;[/B] }

div#main        { width: 801px; min-height: 500px; background-color: #30d6ff;  }

was ist sinnvoller?

Grüßle...

P.S.:

Anhänge ignorieren...sind vom vorpost...welchen ich editiert habe, bzw gelöscht habe, da ich ne "lösung" gefunden habe.