css Menü @ tutorials.de: Tutorials, Forum & Hilfe

Flasher111 · 28.02.11 19:48

Guten Abend liebe Community!

Da ich zur zeit meine erste richtige Homepage machen möchte und mich mittlerweile schon etwas länger mit Html und CSS beschäftige (sprich viele Tutorials und selfhtml lese) habe ich doch ein Problem mit meinem Header!

Html Code:

HTML-Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<link href="Styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div>	<img src="Header2.png" name="Header" width="1024" height="200" id="Header" />
<ul id="navigation">
  <li id="nav-home"><a href="http://www.google.de"><span>Home</span></a></li>
  <li id="nav-about"><a href="#"><span>About</span></a></li>
  <li id="nav-gallery"><a href="#"><span>Gallery</span></a></li>
  <li id="nav-contact"><a href="#"><span>Contact</span></a></li>
</ul> 



</body>
</html>

und hier mein dazugehöriger css Code:

Code :

@charset "UTF-8";
/* CSS Document */
    
#Header {}
 
 
#navigation { margin:0; padding:0; width:518px; height:38px; background-image:url(Header.gif); }
 
#navigation li { margin:0; padding:0; list-style-type:none; display:inline; height:100px; text-align:center; float:left; line-height:100px; }
 
#navigation a { display:block; height:38px; }
#navigation a:hover { background-image:url(Header.gif); }
 
#nav-home {width:125px; }
#nav-home a:hover { background-position:0px bottom; }
 
#nav-about { width:108px; }
#nav-about a:hover { background-position:-125px bottom ; }
 
#nav-gallery { width:128px; }
#nav-gallery a:hover { background-position:-232px bottom ; }
 
#nav-contact { width:128px; }
#nav-contact a:hover { background-position:-361px bottom; }
 
 
#navigation span { display:none; }

Mein Problem liegt leider an der Ausrichtung der menü Leiste! Da es mir recht schwer fällt euch das schriftlich zu erklären habe ich hier mal einen Screenshort hochgeladen wie ich mir das ganze vorstelle. http://img830.imageshack.us/i/headergh.png/

Falls Ihr die dazugehörigen Grafiken benötigt so könnt Ihr euch diese aus dem Anhang herunterladen.

Was ich bisher versucht habe? (da ich nicht möchte das hier jemand für mich die Arbeit macht)
ich habe es mit den Werten top/left versucht die Buttons zu positionieren, allerdings ist mir das nicht gelungen.

Wenn Ihr mir bitte Helfen bzw. einen Tipp geben könntet wie ich dieses Problem am einfachsten lösen könnte wäre ich euch unendlich dankbar!

Wenn Ihr Verbesserungen zu diesem Script habt immer her damit wie gesagt ich bin noch neuling und bin für jede eurer Anregungen offen.

Danke

***hela*** · 28.02.11 22:43

Hallo,

ich wurde das Menü auch absolut im Layout positionieren.

Dazu verwendest du am besten einen DIV-Container, dem ich hier die ID="Header" gegeben und relativ positioniert habe. Mit der relativen Positionierung schafft man die Voraussetzung dafür, dass absolut positionierte Kindelemente diesen Container als "Home"-Element anerkennen.

Das IMG-Element brauchst du eigentlich gar nicht, wenn du die Grafik als Hintergrundbild in entsprechenden Elementen unterbringst. Ebenso kannst du dir die z-Index-Eigenschaft sparen, wenn du die Elemente gleich richtig in den Stapel legst. Das bedeutet, dass dein Menü im Stapel ganz unten liegen sollte, da es von den dunkelblauen Teilen teilweise abgedeckt wird und dementsprechend müsste es im Header-Container das erstes Kindelement sein.

HTML-Code:

<div id="Header">

  <ul id="navigation">
    <li id="nav-home">
      <a href="http://www.google.de"><span>Home</span></a>
    </li>
    <li id="nav-about">
      <a href="#"><span>About</span></a>
    </li>
    <li id="nav-gallery">
      <a href="#"><span>Gallery</span></a>
    </li>
    <li id="nav-contact">
      <a href="#"><span>Contact</span></a>
    </li>
  </ul>

  <div id="bgHead-left">&nbsp;</div>
  <div id="bgHead-right">&nbsp;</div>

</div>

Über dem Menü liegen zwei (leere) DIV-Container, die das Menü teilweise abdecken. Ich würde es nicht vollständig mit einer Grafik abdecken, da u.U. durch die transparenten Bereiche der darüberliegenden Grafik die Hyperlinks nicht mehr erreichbar sind. Deshalb ist die Grafik zweigeteilt, einmal 375px breit und 200px hoch im linken Bereich und 649px breit und nur 147px hoch im rechten Bereich.

Code css:

#Header {
  position: relative;
  width: 1024px;
  height: 200px;
}
#bgHead-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 375px;
  height: 200px;
  background: url(Header2.png) no-repeat top left;
}
#bgHead-right {
  position: absolute;
  top: 0;
  right: 0;
  width: 649px;
  height: 147px;
  background: url(Header2.png) no-repeat top right;
}
 
#navigation {
  position: absolute;
  top: 144px;
  left: 350px;
  margin: 0;
  padding: 0;
  width: 518px;
  height: 38px;
  background-image: url(Header.gif);
}
/* ... alles weitere unverändert */

Ich hoffe der Rest ist selbsterklärend, ansonsten frag nach.

***CPoly*** · 28.02.11 23:48

Ich würde einen anderen Weg gehen, der sehr wenig Änderungen deines Vorhandenen benötigt. Das heißt aber nicht, dass hela's Lösung schlechter oder besser ist als meine.

Das img-Element habe ich gestrichen und stattdessen ein div-Element um das Menü gemacht. Also erstmal exakt wie hela.

HTML-Code:

<div id="nav_wrapper">
	<ul id="navigation">
		<li id="nav-home"><a href="http://www.google.de"><span>Home</span></a></li>
		<li id="nav-about"><a href="#"><span>About</span></a></li>
		<li id="nav-gallery"><a href="#"><span>Gallery</span></a></li>
		<li id="nav-contact"><a href="#"><span>Contact</span></a></li>
	</ul> 
</div>

Und dein vorhandenes CSS habe ich exakt so übernommen, lediglich eine weitere Regel hinzugefügt.

Code css:

1	#nav_wrapper {width:644px; height:52px; padding-left:380px; padding-top:148px; background-image:url(Header2.png);}

Die Überdeckung die du links erreichen willst kannst du ja einfach erreichen, in dem du Header.gif entsprechend abschneidest und dann etwas weiter nach links setzt (padding-left kleiner machen. Nicht vergessen entsprechend die Breite auch zu erhöhen). Oder du könntest auch die Header2.png etwas bearbeiten. Bleibt dir überlassen.

Flasher111 · 01.03.11 18:56

Ich danke euch beiden für eure Hilfe und Lösungen. Ich werde mir gleich mal beide Versionen anschauen!

tut orials.de	tut verbinden	tut dir helfen	tut kooperieren
©2000-2012 tutorials.de Alle Rechte vorbehalten	tut informieren » Impressum » Nutzungsregeln » Netiquette » Team » Redaktion	» Tutorials » Videotutorials » Showroom » Events & Contests » Chat » RSS-Feed » Blogs	» der-webdesigner.net » DesignerInAction » Design Nation » Directorforum » Flashhilfe » PHP-Resource » PHPwelt » PSD-Tutorials

Themen-Optionen

Anzeige

Ähnliche Themen

Css Menü mit eigener ID für jeden Menü Punkt

[VB6] Erstelltes Menü via Menü Editor auf mehrere Formulare kopieren

Menü wie dropdown nur bei senkrechtem Menü

Icons in dem Menü (Menü-Editor) einfügen..

Dropdown Menü zeigt falsches Menü

E-Mail:

Abonnieren Abbestellen