CSS Linksleiste komplett veschoben

hectic · #1 (**permalink**) 14.05.2007, 12:30

EDIT: Um Doppelpost zu vermeiden, schreibe ich hier her. Ich habe soeben zwei Tipps bekommen, die ich erstmal verarbeiten möchte.

Nachdem dieses Forum schon sehr oft sehr informativ für mich war, habe ich jetzt auch mal eine Frage. Folgendes Problem:

Ich habe links ein Menü als Bild und auf diesem soll eine Linkleiste als Text eingetragen sein. Nun stellt der IE es leider nicht 'übereinander' dar, sondern verschiebt die gesamte Linkleiste nach unten zum Menübild (Fehler ROT).

Hier die Seite: Britta Lange - Illustration & Grafik

Fehler in ROT tritt z.B. beim IE auf. Bei Firefox ist es richtig.

Fehler in Blau konnte zwischenzeitig mit *{margin:0;padding:0;} gelöst werden, wobei dann weitere Probleme auftretten z.B. dass Absätze komplett ausgeschaltet werden.

Hier ist die CSS

Code:

#titel{
position:fixed;
left:0px;
top:0px; 
height:60px;
}

#menu1{
position:fixed;
left:0px;
width:180px;
top:60px
}

#menu2{
position:fixed;
font-family:arial;
font-size:12pt;
left:20px;
width:140px;
top:70px
}

#inhalt{
position:absolute;
font-family:arial;
font-size:10pt;
left:188px;
top:68px;
}

a:visited {color:#666655;text-decoration:none;}
a:active {color:#666655;text-decoration:none;}
a:hover {color:#666655;text-decoration:none;background: #ccccaa;}
a:link {color:#666655;text-decoration:none;}

menu1 ist die Position für das Menübild

menu2 ist die Position für die Linkleiste, die sich innerhalb des Menübildes befinden soll.

Hier die index.htm

Code:

<html>
 <title>Britta Lange - Illustration & Grafik</title>
 <style type="text/css">@import "style.css";</style>
 <body bgcolor="ffffff">

  <div id="inhalt">
   <p><b>WILLKOMMEN</b></p>
   <p>Hier sind leider noch keine Einträge enthalten</p>
  </div>

  <div id="titel">
   <img src="titel.png">
  </div>

  <div id="menu1">
   <img src="menue.png">
  </div>

  <div id="menu2">
   <p><a href="selbs.htm">Selbstdarstellung</a></p>
   <p><a href="techn.htm">Technik</a></p>
   <p><a href="galer.htm">Galerie</a></p>
   <p><a href="beste.htm">Bestellung</a></p>
   <p><a href="termi.htm">Termine</a></p>
   <p><a href="aktue.htm">Aktuelles</a></p>
   <p><a href="links.htm">Links</a></p>
  </div>

 </body>
</html>

Bin für jeden Tipp dankbar.

andir · #2 (**permalink**) 14.05.2007, 12:42

Du machst das unnötig kompliziert.
Nimm doch die Grafik einfach als Hintergrundbild für menu1 dann kannst du dir das zweite div menu2 sparen, weil die Linkliste dann einfach in Menü1 kommt.

Hintergrundbilder: Übersicht: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

Menüs werden sinnvollerweise als Listen ( ul oder ol) ausgezeichnet, dann brauchts die hier verwirrenden Absätze (p) nicht.

Ansonsten ist deine Art der Positionierung schwierig, der IE 6 fängt mit position:fixed wenig an. Wer Firmenkunden erreichen will, die oftmals aus unterschiedlichen Gründen noch den IE6 verwenden, steht vor einem Problem.

fricca · #3 (**permalink**) 14.05.2007, 12:43

Dein Dokument ist nicht vollständig.
Informier dich bitte über das Grundgerüst einer HTML-Datei und den Doctype Switch.

Zu deinem Bild: wenn du einen Hintergrund für das Menü willst, dann verwende ein Hintergrundbild. Zierbilder gehören nicht ins Markup.

Du positionierst alle deine Elemente absolut oder gar fix. Das mag am Anfang einfach erscheinen - spätestens, wenn du Abhängigkeiten zwischen Elementen haben willst, scheitert diese Methode.
Ich empfehle die Beschäftigung mit float und clear. Wichtige Artikel dazu unter FAQ Punkt 2.

Beschäftige dich bitte mit semantischem Markup. Ein Menü ist eine Auflistung von Links und gehört in eine Liste.
Dein "Titel" ist eine h1-Überschrift; wenn es unbedingt ein Bild sein soll, dann muss das alt-Attribut gefüllt werden. Alternative: Image Replacement.

edit: ANDIR!!

kadees · #4 (**permalink**) 14.05.2007, 13:55

Nur zur Info, HTMLTidy gibt 5 Warnungen aus:

Zitat:

Zeile 1 Zeichen 1 - Warnung: Fehlende <!DOCTYPE> Deklaration
Zeile 2 Zeichen 37 - Warnung: Unmaskiertes "&" sollte als "&" geschrieben werden
Zeile 4 Zeichen 2 - Warnung: <body> Attribut "bgcolor" hat ungültigen Wert "ffffff"
Zeile 12 Zeichen 4 - Warnung: Bei <img> fehlt das Attribut "alt"
Zeile 16 Zeichen 4 - Warnung: Bei <img> fehlt das Attribut "alt"

TopStyle Pro 3.12 Style Checker Results:

Zitat:

Selector Description
a:visited When a foreground color is defined, it is recommended to also define a background color.
a:active When a foreground color is defined, it is recommended to also define a background color.
a:link When a foreground color is defined, it is recommended to also define a background color.

CSS Level 2 (0 errors, 2 warnings)
Selector Description
#menu2 A generic family name should be included here. Consider adding sans-serif to the end of your font list.
#inhalt A generic family name should be included here. Consider adding sans-serif to the end of your font list.

Internet Explorer 6 (3 errors, 2 warnings)
Selector Description
#titel fixed is not a valid value for position
#titel In MSIE 6, height and width are calculated differently depending on whether standards-compliant mode is enabled.
#menu1 fixed is not a valid value for position
#menu1 In MSIE 6, height and width are calculated differently depending on whether standards-compliant mode is enabled.
#menu2 fixed is not a valid value for position
#menu2 A generic family name should be included here. Consider adding sans-serif to the end of your font list.
#menu2 In MSIE 6, height and width are calculated differently depending on whether standards-compliant mode is enabled.
#inhalt A generic family name should be included here. Consider adding sans-serif to the end of your font list.
div#col1 h3#recentpost In MSIE 6, height and width are calculated differently depending on whether standards-compliant mode is enabled.
div#col1 h3#recentpost In MSIE 6, height and width are calculated differently depending on whether standards-compliant mode is enabled.

Error Warning Hint Tipp

hectic · #5 (**permalink**) 14.05.2007, 17:24

So, ich hab jetzt alles gemacht, was mir hier so vorgeschlagen wurde und siehe da, es funktioniert schon fast alles.

'Hintergrundbild' ist nun auch ein Hintergrundbild.
Fehlermeldungen durch download von Tidy behoben.
Grundgerüst 'DOCTYPE' eingesetzt.

Bis auf, dass der IE die Positionierung nicht ganz so toll macht (Text kommt sehr unschön nahe an die Titelleiste und dem Menü) und, dass der 'fixed' -Hintergrund mitscrollt, geht's ganz gut. Hier das Ergebnis Britta Lange - Illustration & Grafik

Ich bedanke mich für alle, die mir dabei geholfen haben.

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
IE 6 erkennt seine CSS Datei nicht	Perelina	(X)HTML	4	07.08.2009 18:56
Vertikale CSS Navigation mit Bildern und Text	macmensa	CSS	2	25.07.2009 16:23
Doctype und CSS Problem	tech	CSS	3	29.05.2009 20:16
Brauche Hilfe bei preg_match \| CSS im Newssystem	Zen5656	Serveradministration und serverseitige Scripte	21	19.01.2007 15:33
[PHP] Funktion zum Optimieren von CSS	Floele	Serveradministration und serverseitige Scripte	2	13.08.2005 10:31