CSS Hintergrund verlinkt

Area51sbk

Hallo Leute!

Bin gerade dabei die Page zu überarbeiten.
Irgendwie habe ich allerdings ein Problem beim Menu.
Hier klicken um das Menu zu sehen.
Mit meinem Bearbeitungsprogramm kann ich das Menu komplett sehen.
Wenn Ich es allerdings mit meinem IE anschaue fehlen ein paar Menupunkte wie "Kontakt".
Den größten Schock hatte ich allerdings bekommen als ich gesehen habe, dass ich mit Opera überhaupt kein Menu zu sehen bekomme.
Weis jemand wo ich den Fehler habe?
Danke

Lg Henrik

Code geändert aber immer noch nicht richtig

des-man

ich seh mit Mozilla auf deinem LInk auch kein Menü...

Area51sbk

Die Antwort ging jetzt aber schnell.
Schau Dir das mal mit dem IE an.
Ich verstehe bloß nicht wo der Fehler ist.

Area51sbk

Kann mir keiner helfen warum immer noch nicht alles richtig angezeigt wird! Es sind insges. 9 Menupunkte plus kopf!
Danke LG

xXx_BaSStar_xXx

Also bei mir ist im IE 6.0 alles i.O.
FF 2.0.0.3 ebenfalls.

Aber nur 8...

Nimm mal dein <ul> + [/list] raus
und füge einen Doctype ein.

margin : 0 0 0 0; -> margin: 0;
+
Die externe CSS Referenzierung mit in den Head,
dann ist alles korrekt.

Area51sbk

Cool! Danke es funktioniert. Doch leider fehlen immer noch diese zwei Punkte.

Erst kommt der Kopf im Menu dann die Punkte:

Impressum
Disclaimer
Startseite
Fahren mit Öl
Ölaufbereitung
Erdgas
Autogas
E34-Teile
Kontakt

Die beiden in der Mitte fehlen leider und ich finde den Fehler nicht! Danke.
Lg Henrik

xXx_BaSStar_xXx

Ich weiß zwar nicht wo du deine Vorlage herhattest,
aber das war bei genauerem Betrachten Quark...
Ich habs neu geschrieben, bitte:

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>


<head>
<meta http-equiv="Content-Language" content="de">
<title>www.e34-teile.de</title>
<style type="text/css">
 body {
  background-color:#000;
 }


 #kopf h1 {
  color: #FFFFFF;
 }
 
 h1 {
  padding: 5px 15px 5px 15px;
  text-align: right;
  background-color: #99004d;
 }


 #navi {
  width: 200px;
  margin: 0px;
  padding: auto;
  float: left;
  background-color: #000000;
 }
 
a#menu_kopf {
display: block;
background-image: url(/menubilder/menu_kopf.gif);
background-repeat: no-repeat;
width: 200px;
height: 75px;
background-color: #000000;
color: #ffffff;
}
 
a#impressum {
display: block;
background-image: url(/menubilder/menu_impressum.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#disclaimer {
display: block;
background-image: url(/menubilder/menu_disclaimer.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#startseite {
display: block;
background-image: url(/menubilder/menu_startseite.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#fahren_oel {
display: block;
background-image: url(/menubilder/menu_fahren_oel.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#oelaufbereitung {
display: block;
background-image: url(/menubilder/menu_oelaufbereitung.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#erdgas {
display: block;
background-image: url(/menubilder/menu_erdgas.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#autogas {
display: block;
background-image: url(/menubilder/menu_autogas.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#e34_teile {
display: block;
background-image: url(/menubilder/menu_e34_teile.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}


a#kontakt {
display: block;
background-image: url(/menubilder/menu_kontakt.gif);
background-repeat: no-repeat;
width: 200px;
height: 30px;
background-color: #000000;
color: #ffffff;
}
</style>
</head>


<body>


<div id="kopf">
	<h1>hier kommt der Kopf hin</h1>
</div>


<div id="navi">
	  [url='#'][/url]	
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
		[url='#'][/url]
</div>


</body>


</html>

Alles anzeigen

Jedoch frage ich mich wozu du so einen
Aufwand betreibst wo du es mit ein paar
verlinkten Grafiken auch hinbekommen
hättest... Ich hoffe du willst hover Effekte erzielen.

Area51sbk

Hi!

Danke für deine Hilfe. Bin gerade erst wieder nach Hause gekommen.
Meine Unterlagen habe ich irgendwo aus dem Net gezogen. Man sieht sicher schnell das ich von der Materie noch nicht so viel Ahnung habe und ich noch einiges dazu lernen muss.

Ich habe zu deinen Daten auch gleich ein paar fragen.
Warum kannst Du bei css. auch den Body mit #000 deklarieren? Ich meine eine Farbgebung stellt sich doch immer auch 6 Zeichen dar.
Deine Lösung insgesamt ist echt super! Darauf wäre ich sicher nicht so schnell gekommen. Ich danke Dir nochmals.

Lg Henrik

sejuma

Wenn ein Hexa-Farbcode aus drei Ziffernpaaren besteht, kann man ihn dreistellig abkürzen:
Beispiel: rot = #ff0000
Abgekürzt: #f00
oder weiß: #ffffff = #fff

Spart Webspace und Traffic (ungemein!)

Area51sbk

Achso Danke!

Die Frage war je noch nach hover Effekten. Also ich wollte bis jetzt keine änderung bei Mausübergang.

Ich habe aber noch eine kleine Frage.
Warum kann ich nicht die einzelnen Hintergrundbilder mit background-position: right 0px; nach rechts ausrichten. Frage nur weil ich ansonsten eine ganze "Tabelle" neu ausrichten würde.

Ich meine ich könnte auch einfach "float: right;" hin schreiben aber dann würde das Bild nicht nur nach rechts verschwinden.

Danke

Lg Henrik

sejuma

Probier's mal mit

Code

background-position: right;

Link wäre hilfreich.

Area51sbk

nein leider funktioniert das nicht.
Ich habe den Kopf gegen ein Bild getauscht.
Wenn ich jetzt "float: right;" bei dem Bild einsetzte ist es zwar rechts aber leider ist auch das Menu nach oben verschoben.
Bin gerade am überlegen wie ich das sonst machen kann.
Habe ich Dir gerade auch nochmal per PN geschrieben.

Hier für die anderen.
So soll das werden Hier klicken
So habe ich das bis jetzt Hier klicken

Das Problem scheint einfach zu lösen sein aber irgendwie bin ich heute wohl nicht so ...

Danke
Lg Henrik

Area51sbk

Für alle die das gleiche Problem haben.

Habe es mit margin-left: Wert;
margin-top:Wert;
gelöst.

Lg Henrik

Danke nochmals

Tags