Das sind in der Tat schon hohe Ansprüche, die du stellst.
Erschwerend kommt hinzu, dass der Internet Explorer eine solche "Aufklapp-Navi" nicht kann, bzw. man ihn dazu etwas trimmen muss.
Vom HTML-Code her liegst du aber schon mal richtig.
Ich empfehle dir, diese Navi nachzubauen und dich exakt an die Anleitung zu halten.
Vergiss auch nicht die "csshover.htc" hochzuladen:
Später kannst du die Formatierung (Farben, Größen) dann immer noch ändern:
http://www.drweb.de/leseproben/klappmenu.shtml
Verwende eine Listen-Navi und binde den Pfeil als kleine Listengrafik ein.
Speichere hierzu eine kleine Pfeilgrafik als "pfeil.gif" ab:
<ul style="list-style-image: url(pfeil.gif);margin-left: 10px;">
[*][url='#']Link 1[/url]
[*][url='#']Link 2[/url]
[/list]
Demo siehe http://www.ohne-css.gehts-gar.net/demo/0017c.html (dort fehlt ledigleich die Verlinkung).
Noch ein paar weitere Tipps:
Verwende einen qualifizierten Doctype, damit die Browser erkennen, nach welchem Code die HP erstellt wurde.
Verzichte beim reinen Layout auf Tabellen. Wenn du eine neue Homepage anfängst, dann solltest du gleich CSS verwenden, um die vielen Vorteile der Trennung von Inhalt und Format zu nutzen.
Vielleicht ist dir der Einsteigerkurs in meiner Signatur dabei hilfreich. Erfordert zwar etwas Zeit- und Lernaufwand, wird sich auf Dauer jedoch lohnen.
Bei "Referenzen" sind die Links äußerst schwer lesbar. Hier stimmt die Schriftfarbe zum schwarzen Hintergrund nicht. Bitte andere Schriftfarbe verwenden.
Welchen Doctype nehme ich da am Besten?
Kommt drauf an, was du codest: http://de.selfhtml.org/html/allgemein…htm#dokumenttyp
Für mich persönlich ist dieser am flexibelstem, auch wenn nicht mehr ganz aktuell:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Zunächst solltest du ganz an den Anfang des Quelltextes einen qualifizierten Standard-Doctype definieren.
Dann verwendest du diesen ID mehrfach: <div id="nav_trennlinie"></div>
ID' dürfen auf einer Seite nur einmal vorkommen. Wenn du das mehrfach verwenden willst, dann definiere es als Klasse:
statt #nav_trennlinie also
.nav_trennlinie und Aufruf mit <div class="nav_trennlinie">
Wenn du eine Seite willst, die immer so hoch wie der Bildschirm ist, dann orientiere dich an diesem Layoutbeispiel.
Soll die Seite dagegen mit ihrem Inhalt "wachsen", dann musst du bei den Containern auf den height-Wert von 100% verzichten.
In dem von mir genannten Link wird die Positionsangabe damit definiert:
a.info:hover span
{
display:block;
position:absolute;
top:2em;
left:2em;
width:15em;
border:1px solid #12127D;
background-color:#fc0;
color:#000;
text-align: center;
padding: 5px;
font-size: 0.8em;
}
Wenn sich unterschiedliche Infofenster mit unterschiedlichen Positionen öffenen sollen, dann müsstest du entsprechend viele CSS-Klassen bilden.
Z.B. die erste wie im Beispiel beschrieben.
Dann kopierst du den ganzen CSS-Code nochmal und ersetzt "info" mit "info2", "info3" usw.
Im HTML-Teil ebenso auf "class="info2" usw. verweisen.
http://www.ohne-css.gehts-gar.net/0012.php
Verwende außerdem noch einen Doctype: http://www.ohne-css.gehts-gar.net/0006.php
Verwende noch einen qualifizierten Standard-Doctype
CSS:
#wrapper {width: 400px; margin: 0 auto;}
#oben {width: 400px; height: 200px; background-image: url(back1.jpg);}
#mitte {width: 400px; background-image: url(back2.jpg); background-repeat: repeat-y;}
#unten {width: 400px; height: 100px; background-image: url(back3.jpg);}HTML:
<div id="wrapper">
<div id="oben">Inhalt oben</div>
<div id="mitte">Inhalt Mitte</div>
<div id="unten">Inhalt unten</div>
</div>Deine Aussagen sind etwas widersprüchlich:
das gesliencete Bild soll auch schon als Hintergrund eines DIVs verwendet werden
Wenn das so ist, dann hättest du das Bild ja nicht slicen brauchen.
Dann fügst du es als Hintergrundgrafik in einen Div. Dieser Div kann dann wiederum drei weitere Div's enthalten, z.B. für leftbar, content und rightbar.
Dennoch schlägt dann das einheitliche Hintergrundbild auf alle Div's durch. Du musst sie nur von ihrer Breite und Positionierung her so anordnen, dass sie sich im gleichen Bereich befinden wie der (vermeintliche) Teil der Hintergrundgrafik.
Anfangs sagtest du:
aber nur der mitlere Teil soll so oft wiederholt werden, wie die Seite lang wird
Für Diesen Fall müsstest du die Grafik in der Tat trennen und jedem der drei Div's eine Hintergrundgrafik (bzw. einen Teil davon) zuweisen.
Um dir eine Lösung anzubieten müsste man somit wissen, wie das Ganze im Endstadium nun aussehen soll.
Nimm für die drei Bildteile auch drei unterschiedliche Div's und binde die Grafiken als Hintergrundgrafik ein.
Keine Wiederholung: background-repeat: no-repeat
Wiederholung: siehe driver
Setze mal zunächst alle Elemente mit dem Universalselektor auf Abstand "0" und definiere dann bei Bedarf für jedes einzelne den Abstand neu.
* {margin: 0; padding: 0;}Je nachdem, wie man 3-D definiert.
Sieh dir mal diese Möglichkeiten mit "border-style" an:
http://www.css4you.de/example/border-style.html
Füge bei deinem #hauptteil noch das hinzu und ändere ggf. die Werte:
filter:alpha(opacity=50);
-moz-opacity: 0.50;
opacity: 0.50;Ist teilweise noch nicht offizieller Standard, so dass es möglicherweise noch nicht alle Browser umsetzen.
http://www.css4you.de/trickkiste/tr00018.html
Doch, das ist schon ziemlich konfus.
Soll das jetzt heißen, im FF wird der Text in der Spalte nicht umgebrochen?
Hat der Text auch Gelegenheit dazu? Soll heißen: Gibt es zwischen den Wörtern/Buchstaben auch Leerzeichen, so dass ein Umbruch erfolgen kann?
"font class" definiert man eigentlich auch nicht so.
Am besten wäre ein Link zur HP oder zumindest mal der HTML- und CSS-Quelltext.
Man sieht, dass in der Seite viel Mühe, Aufwand und engagement steckt. Allerdings lässt sich vieles noch verbessern, auch code-technisch vereinfachen:
Intro-Seite find' ich überflüssig. Der Besucher will gleich "zur Sache", sprich zum Inhalt kommen. Alles was davon abhjält nervt und vertreibt potenzielle Besucher.
Text:
Die Textzeilen sind zu lang, die Schrift nicht unbedingt Standard, evtl. auch zu klein. Das erschwert das Lesen und erfordert hohe Konzentration. Die langen Texte müsseten etwas aufgelockert werden, Zwischenüberschriften, schmälere Textblöcke.
Navi:
könnte auch eine etwas größere Schrift haben.
Code:
Der Tabellencode ist zu reinen Layout-Zwecken nicht mehr zeitgemäß. Ebenso der ganz onmouse-Kram. Das lässt sich mit CSS eleganter und übersichtlicher lösen.
Fazit:
Inhaltlich für die Zielgruppe sicher äußerst interessant und informativ. Allerdings müsste dieser Effekt noch mit einem verbesserten Layout einhergehen, damit eine wirklich ansprechende und übersichtliche Seite entsteht.
Jeder hat mal ähnlich angefangen und alles entwickelt sich im Laufe der Zeit.
Mit einigen CSS-Kenntnissen lässt sich sicher vieles verbessern. Macht euch auch nochmal Gedanken über ein etwas kompakteres Layout.
Ja sorry, man kann natürlich auch Teile eines Bildes klonen. Ich hab' mich da leider von der Anleitung zu sehr leiten lassen.
Als Entschädigung für meinen falschen Hinweis hier ein paar "Schmankerl", was man mit PI alles machen kann.
(Ich bin wirklich stolz - und auch etwas neidisch, solch eine Seite in meiner http://www.gehts-gar.net/-Reihe zu haben!
So klappt's:
#navi #aktuell a
{
background-color: Silver;
color: #f00;
}
Aber Danke für deinen Beitrag. Ich muss da meine Anleitung auch dementsprechend korrigieren. 
Im IE 6 verursacht float: right im Zusammenhang mit margin-right den IE-Doubled-Float-Margin-Bug
Gib deshalb dem #navi_head noch ein
display: inline;