Flasher111
Mitglied
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:
und hier mein dazugehöriger css Code:
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
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:
<!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