Anfängerfehler? Navi in floatender UL reagiert nur teilweise

[dieselross]

Hallo,

ich bin sicher, das ist ein blutiger Anfängerfehler. Auf folgender Seite (Baustelle) verhalten sich die Elemente der Navigation merkwürdig http://www.re-ality.de. Einige reagieren so, wie sie sollen (Rollover und der ganze Schnickschnack)andere reagieren überhaupt nicht. Ich habe schon eine Tabelle drumherumgebastelt in der Hoffnung, dadurch den Haupttext reuszudrängen (ich vermute, daß da der Hase im Pfeffer liegt). Aber das werde ich wohl auch revidieren. Wie kann ich das lösen?

Ich würde gerne was dazulernen, also keine Schonung bitte!

dieselross

[thebach]

Hallo dieselross,

Als erstes: Mit welchen Browsern hast du getestet?
Unabhängig davon, schenke deiner Seite einen standardkonformen Doctype ansonsten schaltet sich der Browser in den Quirks Modus.

Warum nutzt du JavaScript um Hover-Effekte zu bekommen? Reicht dir CSS nicht?

thebach

[dieselross]

Hallo dieselross,

Als erstes: Mit welchen Browsern hast du getestet?
Unabhängig davon, schenke deiner Seite einen standardkonformen Doctype ansonsten schaltet sich der Browser in den Quirks Modus.

Warum nutzt du JavaScript um Hover-Effekte zu bekommen? Reicht dir CSS nicht?

thebach

Hmmmm. Ich sehe, ich muß noch gaaaaanz viel lernen. Das mit dem Doctype werde ich nachher zu Hause direkt probieren.
Die Rollover-Effekte werden vom Editor bereitgestellt. Java kann ich gar nicht, mit CSS fange ich gerade erst an.
Getestet habe ich in Safari, Firefox (beide Mac) und heute noch in IE 6 (Win). Bei letzterem zerhaut's mir auch noch das Layout.
Gibt es irgendwo gute step by step Tutorials, um zu lernen, wie man eine solche Nav mit CSS baut?

dieselross

[thebach]

Hmmmm. Ich sehe, ich muß noch gaaaaanz viel lernen.

Nur nicht den Sand in den Kopf stecken ;) Jeder hat mal klein angefangen.

Die Rollover-Effekte werden vom Editor bereitgestellt.

Tip: Wenn du Webdesign wirklich lernen willst, solltest du anfangs noch auf Editoren verzichten. Die generieren oft sehr zweifelhaften Code und als Anfänger hat man damit oft mehr Probleme als Nutzen.

Java kann ich gar nicht, mit CSS fange ich gerade erst an.

Nicht Java mit JavaScript verwechseln :)

Getestet habe ich in Safari, Firefox (beide Mac) und heute noch in IE 6 (Win). Bei letzterem zerhaut's mir auch noch das Layout.

Das der IE das Layout zerhaut liegt höchstwahrscheinlich am Quirks-Modus.

Gibt es irgendwo gute step by step Tutorials, um zu lernen, wie man eine solche Nav mit CSS baut?

listamatic hat recht gute Beispiele, allerdings sollte man da schon wissen was man macht.

Ansonsten halt SelfHTML als Lehrbuch ;) (Die Beispiele in SelfHTML sind allerdings schon etwas betagt - also auch mal andere Quellen konsultieren)

thebach

[dieselross]

Erst 'mal herzlichen Dank.
Das Weglassen des Editors hatte ich auch schon erwogen. Ich hatte auch schon festgestellt, daß da seltsame Sachen passieren.
Syntax-Coloring und automatische Vervollständigung von Keywords sind allerdings auch in der "Handarbeit" recht angenehm.
Vielleicht gibt es ja gangbare Zwischenlösungen. Ich denke da an TACO Edit oder SEEdit. Beides nicht wirklich Editoren im Sinne von GoLive oder Dreamweaver, beide (noch) frei und beide bieten die genannten Vorteile.

Und dann 'mal sehen.

[thebach]

Erst 'mal herzlichen Dank.
Das Weglassen des Editors hatte ich auch schon erwogen. Ich hatte auch schon festgestellt, daß da seltsame Sachen passieren.
Syntax-Coloring und automatische Vervollständigung von Keywords sind allerdings auch in der "Handarbeit" recht angenehm.
Vielleicht gibt es ja gangbare Zwischenlösungen. Ich denke da an TACO Edit oder SEEdit. Beides nicht wirklich Editoren im Sinne von GoLive oder Dreamweaver, beide (noch) frei und beide bieten die genannten Vorteile.

Genau, mit Editoren meinte ich auch eher so Generatoren oder diese WYSIWYG-Editors.

Für Windows würde ich jetzt noch den Phase5 empfehlen, aber unter MacOS wird der nicht laufen ;)

thebach

[dieselross]

Hmmm. Nu hab' ich die Seite 'mal testhalber "zu Fuß" angelegt. Jetzt steht meine Navi aber links, was sie nicht soll. Ich kann von hier aus (Betrieb) die Daten nicht auf einen Server stellen, daher hier als Listing im Anhang. Was mache ich falsch? (Ich hoffe, da steigt jemand durch...)

HTML:

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

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Rollover per CSS</title>
  <link href="CSS/Rollovers_per_CSS.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css" media="screen"></style>
 </head>

<body>
  <div id="content">
   <div id="header">
   </div>
   <div id="menu">
    <a class="menu" id="home" href="Home.html"></a>
    <a class="menu" id="news" href="News.html"></a>
    <a class="menu" id="pics" href="Pics.html"></a>
    <img src="images/SideButtonContact#323232Down.jpg"><br/>
   </div>
   <img src="images/MainFondBottom.jpg" id= "footer">
  </div>
 </body>

</html>

CSS:

body { color: #323232; font-size: 62.5%; font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url("../images/WebBG.jpg"); text-align: center; margin: 0; padding: 0 }
#content  { background-image: url("../images/MainFondMain.jpg"); background-repeat: repeat-y; background-attachment: scroll; background-position: 0 0; text-align: left; width: 740px; voice-family: inherit    }
#header { background-image: url("../images/MainFondTop.jpg"); background-repeat: no-repeat; text-align: left; margin-left: -1px; top: -2em; left: -2em; width: 740px; height: 40px }
a.menu  { text-decoration: none; display: block; position: relative; right: 0 }

#menu { display: block; right: 0; width: 110px }
#mainText { padding-right: 10em; padding-left: 3em; position: relative }
#footer { background-image: url("../images/MainFondBottom.jpg"); background-repeat: no-repeat; margin-bottom: -10px; margin-left: -1px }
#home:link    { background-image: url("../images/SideButtonHomeUp.jpg"); width: 110px; height: 40px; background-repeat: no-repeat}
#home:visited { background-image: url("../images/SideButtonHomeUp.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#home:hover   { background-image: url("../images/SideButtonHomeOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#home:active  { background-image: url("../images/SideButtonHomeDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

#pics:link     { background-image: url("../images/SideButtonPicsUp.jpg"); background-repeat: no-repeat; width: 110px; height: 40px }
#pics:visited  { background-image: url("../images/SideButtonPicsUp.jpg"); background-repeat: no-repeat; width: 110px; height: 40px }
#pics:hover   { background-image: url("../images/SideButtonPicsOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#pics:active  { background-image: url("../images/SideButtonPicsDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

#news:link     { background-image: url("../images/SideButtonNewsUp.jpg"); background-repeat: no-repeat; width: 110px; height: 40px }
#news:visited { background-image: url("../images/SideButtonNewsUp.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#news:hover   { background-image: url("../images/SideButtonNewsOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#news:active  { background-image: url("../images/SideButtonNewsDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

#contact:link    { background-image: url("../images/SideButtonContactUp.jpg"); width: 110px; height: 40px; background-repeat: no-repeat}
#contact:visited { background-image: url("../images/SideButtonContactUp.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#contact:hover   { background-image: url("../images/SideButtonContactOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#contact:active  { background-image: url("../images/SideButtonContactDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

[thebach]

Jetzt steht meine Navi aber links, was sie nicht soll.

Der Blick in meine Glaskugel verrät mir, dass die Navigation rechts ausgerichtet werden soll. [1]

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

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Rollover per CSS</title>
  <link href="CSS/Rollovers_per_CSS.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css" media="screen"></style>
</head>

<body>
  <div id="content">
   <div id="header">
   </div>
   <div id="menu">
    <a class="menu" id="home" href="Home.html"></a>
    <a class="menu" id="news" href="News.html"></a>
    <a class="menu" id="pics" href="Pics.html"></a>
    <img src="images/SideButtonContact#323232Down.jpg"><br/>
   </div>

1. Wenn du dir die Beispiele in listamatic noch man anschaust (z.B. dieses hier) siehst du, dass man solche Navigationen besser als Liste auszeichnest. Die lässt sich IMHO besser per CSS 'stylen' und ist semantisch korrekt.

2. class="menu" kannst du dir glaube ich sparen, man kann auch verschachtelte Elemente mit CSS formatieren.

3. Das <br/> da nach den Bild ist auch überflüssig, wenn du das Bild als block darstellen willst mache das per CSS. (Davon abgesehen sollte man selbstschließende Tags mit einen Leerzeichen versehen also <br /> um ältere Browser nicht zu verwirren).

Gruß
thebach

[1] Meine Glaskugel ist sehr oft kaputt, weswegen es immer besser ist mit hinzuschreiben wie es aus sehen soll. (Ach ja Positionierungen gehen mit CSS auch)

[dieselross]

[1] Meine Glaskugel ist sehr oft kaputt, weswegen es immer besser ist mit hinzuschreiben wie es aus sehen soll.

Diesmal hat sie aber perfekt funktioniert. ;-)

(Ach ja Positionierungen gehen mit CSS auch)

Da werd' ich 'mal genauer hinschauen. Danke! Und Entschuldigung, falls ich oft Sachen frage, die man vielleicht auch so finden könnte. Um etwas zu finden muß man halt auch wissen, wo man suchen soll. Ich hoffe, DAS lerne ich auch bald.

[dieselross]

Hallo an alle, die geholfen haben!
Erst 'mal ganz herzlichen Dank so weit. Ich habe viel gelernt.
Jetzt bin ich auf einem guten Wege.
Wer 'mal gucken will: www.re-ality.de
Ich weiß: noch Baustelle aber ich denke,
die Umsetzung des Kontaktformulars ist schon erträglich.

Kritik ist wieder sehr willkommen.

[thebach]

Hallo dieselross,

Kritik ist wieder sehr willkommen.

OK, dann mal los:

1. Validieren!
(Ich weiss, es ist oft nervig aber es ist immer besser validen Code zu schreiben)

2. Schau dir mal die Seite ohne Stylesheet an (beim Firefox Menü: Ansicht > Web-Seitenstil > kein Stil) - Webseiten sollten IMHO auch ohne Stylesheet benutzbar bleiben.

3. Du benutzt oft mehrere Zeilenumbrüche hintereinander (<br /><br /><br /><br />). Das ist fast immer ein Indiz dafür, dass du etwas lieber per CSS positionieren solltest. Überdenke deine Struktur.

4. Ich gebe dir mal den Hinweis zu semantischen Code mit auf den Weg. Inwiefern du das zu eignen machst bleibt natürlich dir überlassen, ich finde es aber sehr erstrebenswert. :-)

So genug der (konstruktiven) Kritik, viel Spass beim Umsetzten.

Grüße
thebach

[dieselross]

Hallo thebach!

Ich glaube, es wird. Der Validator meint jedenfalls: Alles klar.

Und wieder: viel dabei gelernt.

[dieselross]

Was ich noch nicht im Griff habe: Wie krieg' ich die Navi in der reinen html-Version zum Funktionieren, ohne Text einzutragen? Das würde ja wieder mein Layout sprengen.
Nachtrag: Die weiterbearbeiteten Seiten stehen erst heute abend im Netz.

Gruß
dieselross

[thebach]

Was ich noch nicht im Griff habe: Wie krieg' ich die Navi in der reinen html-Version zum Funktionieren, ohne Text einzutragen?

Also Text musst du schon eintragen sonst gibt es ja nix zum anzeigen. Der Text kann aber ganz leicht per CSS ausgeblendet werden. (Ich lass es jetzt mal bewusst wage, du sollst ja am besten selbst draufkommen wie's geht)
Wird die Seite ohne CSS angezeigt steht der Text dann ganz normal da.

Grüße
thebach

[dieselross]

Got it:

CSS:

  
.invisible {  
 display: none;  
}  

und im html:

  
<ul id="menu">  
 <li><a id="home" href="home.html">  
 <span class="invisible">Home</span></a></li>  
 <li><a id="news" href="news.html">  
 <span class="invisible">News</span></a></li>  
 <li><a id="PicsCurrent">  
 <span class="invisible">Galerie</span></a></li>  
 <li><a id="contact" href="contact.html">  
 <span class="invisible">Kontakt</span></a></li>  
</ul>  

Gruß
dieselross

[thebach]

Got it:

Sehr schön :-)
Die Klassen kannst du dir aber sparen, geht mit Selektoren  besser:

  
#menu ul li span {  
 display: none;  
}  

  
<ul id="menu">  
 <li><a id="home" href="home.html"><span>Home</span></a></li>  
 <li><a id="news" href="news.html"><span>News</span></a></li>  
 <li><p id="PicsCurrent"><span>Galerie</span></p></li> <!-- An dieser Stelle besser <p> verwenden -->  
 <li><a id="contact" href="contact.html"><span>Kontakt</span></a></li>  
</ul>  

thebach

[dieselross]

Die Klassen kannst du dir aber sparen, geht mit Selektoren  besser:

Genau das mit dem Selektor hatte ich auch probiert, allerdings hatte ich versucht die a's mit

[code lang css]
li a {
     display: none;
}
[/code]
anzusprechen, was nicht geklappt hat. Verrätst du mir, warum das nicht geht?

Gruß
dieselross

[thebach]

Verrätst du mir, warum das nicht geht?

Das kann ich jetzt nicht ganz nachvollziehen. Mit einer minimalistischen HTML-Datei (eine ul, ein li und ein a) hat es gefunzt(tm). Die Links sind dann natürlich weg und man kann nix mehr anklicken.

thebach

[dieselross]

<ul id="menu">
<li><a id="home" href="home.html"><span>Home</span></a></li>
<li><a id="news" href="news.html"><span>News</span></a></li>
<li><p id="PicsCurrent"><span>Galerie</span></p></li> <!-- An dieser Stelle besser <p> verwenden -->
<li><a id="contact" href="contact.html"><span>Kontakt</span></a></li>
</ul>

  
Und noch 'was: Warum hier besser <p>? Das Element gehört doch zu Liste, oder übersehe ich da 'was?  
  
Gruß  
dieselross

-- 
- life's for learning -

[at]

Hallo.

Warum hier besser <p>?

Ob hier nun ein Absatz besser ist als andere Elemente, sei dahingestellt. Aber das von dir verwandte Anker-Element ist an dieser Stelle in dieser Form, also als Verweisziel, zumindest ungewöhnlich -- wenngleich semantisch überlegenswert.
Generell werden Verweise auf die aktuelle Seite ja eher ungern gesehen. Deshalb gleich das ganze Anker-Element zu ersetzen, ist da wohl eher ein Reflex.

Das Element gehört doch zu Liste, oder übersehe ich da 'was?

Eine Liste besteht aus den Listenpunkten respektive Definitionspaaren und dem umschließenden Listen-Element. Ob du zusätzliche Elemente an erlaubter Stelle integrierst, bleibt dir und deiner Betrachtung der Semantik überlassen, sofern sie dort syntaktisch korrekt sind.
MfG, at

[dieselross]

Also: der Absatz hat zumindest den gravierenden Nachteil, daß er mir das Layout zerhaut.
Die Belassung als Listenelement (ohne Verweis auf die aktuelle Seite [tatsächlich OHNE Verweis]) ist also syntaktisch nicht zu beanstanden? Sollte das der Fall sein, stellt sich die mir Frage warum ich hier etwas ändern sollte. Schließlich funktioniert es einwandfrei und auch der Validator gibt sein OK.

Gruß
dieselross

[thebach]

Also: der Absatz hat zumindest den gravierenden Nachteil, daß er mir das Layout zerhaut.

Per CSS padding und margin auf 0 setzen.

Die Belassung als Listenelement (ohne Verweis auf die aktuelle Seite [tatsächlich OHNE Verweis]) ist also syntaktisch nicht zu beanstanden? Sollte das der Fall sein, stellt sich die mir Frage warum ich hier etwas ändern sollte. Schließlich funktioniert es einwandfrei und auch der Validator gibt sein OK.

Mein Fehler, sorry! Ich war jetzt nur wegen den <a> verwirrt, weil es wie at schon sagte ungewöhnlich ist. Du kannst das <p> welches ich vorschlug auch ganz weglassen.

thebach

[dieselross]

Und wieder einen Schritt weiter:
Das Flackern der Buttons (wegen der Ladezeiten) ist weg.
Ich hab' 'was über background-position gelernt.

Also:

  
/*Menuetasten*/  
#HomeCurrent {  
 background-image: url("../images/HomeDown.jpg");  
 background-repeat: no-repeat;  
 display: block;  
 width: 110px;  
 height: 40px  
}  
#home:link    {  
 display: block;  
 background-image: url("../images/Home3State.jpg");  
 width: 110px;  
 height: 40px;  
 background-repeat: no-repeat;  
 background-position: center top;  
}  
#home:visited {  
 display: block;  
 background-image: url("../images/Home3State.jpg");  
 width: 110px;  
 height: 40px;  
 background-repeat: no-repeat;  
 background-position: center top;  
}  
#home:hover {  
 display: block;  
 background-image: url("../images/Home3State.jpg");  
 width: 110px;  
 height: 40px;  
 background-repeat: no-repeat;  
 background-position: center center;  
}  
#home:active {  
 display: block;  
 background-image: url("../images/Home3State.jpg");  
 width: 110px;  
 height: 40px;  
 background-repeat: no-repeat;  
 background-position: centerbottom;  
}

.
.
.

Dazu gehört dann jeweils ein Bild mit allen drei Zuständen des Buttons.

Gruß
dieselross

[at]

Hallo.

Und wieder einen Schritt weiter:

Das ist zunächst natürlich sehr schön. Ich gratuliere.

Ich hab' 'was über background-position gelernt.

Beachte dabei bitte zwei Dinge: Erstens ist die von dir beschriebene Technik nur für Elemente zu empfehlen, die in Relation zur Fenstergröße absolute Maßeinheiten verwenden, und ist damit per se nur höchst selten einzusetzen. Zweitens empfiehlt es sich in diesem Forum nur bedingt, jeden Fortschritt auch abseits des Kernthemas zu dokumentieren, und sei er noch so erfreulich.
MfG, at

[dieselross]

Die Klassen kannst du dir aber sparen, geht mit Selektoren  besser:

Hmmm. Der IE6 scheint das aber so nicht zu mögen.
Er zeigt mir dann weiter brav (oder auch nicht so brav) die Texte an.
Mit 'was anderem kann ich z. Zt. nicht testen. Heute abend weiß ich mehr.

Gruß
dieselross

[dieselross]

Was bedeutet eigentlich dein "selfcode"?

Gruß
dieselross

[thebach]

Was bedeutet eigentlich dein "selfcode"?

Kannst du selbst schauen: Selfcode Decoder

thebach

[dieselross]

Ja!!! Es funktioniert!
Und jetzt hab' ich auch herausgefunden, wie ich die Überlagerung der Navi durch den Haupttext verhindern kann. Z-Index heißt dasZauberwort!
Richtig?

[thebach]

Ja!!! Es funktioniert!
Und jetzt hab' ich auch herausgefunden, wie ich die Überlagerung der Navi durch den Haupttext verhindern kann. Z-Index heißt dasZauberwort!
Richtig?

I love it when a plan comes together!

the"hannibal"bach

[dieselross]

Hmmm. Und dann wieder doch nicht.
Zu Hause nachgetestet und jetzt klappt alles bis auf...
tja bis auf die Tatsache, daß mein Hauptcontent
(<div id="content">)
jetzt in Safari und Firefox linksbündig steht.
Er sollte aber zentriert sein. Was mach' ich falsch?

HTML:

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

<html>

<head>
  <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
  <title>Rollover per CSS</title>
  <link href="CSS/Rollovers_per_CSS.css" rel="stylesheet" type="text/css" media="all">
  <style type="text/css" media="screen"></style>
 </head>

<body>
  <div id="content">
   <div id="header">
   </div>
   <div id="menu">
    <a class="menu" id="home" href="index.htm"></a>
    <a class="menu" id="news" href="extras/index.htm"></a>
    <a class="menu" id="pics" href="links/index.htm"></a>
    <a class="menu" id="contact" href="mailto:[e-mail]"></a>
   </div>
   <img src="images/MainFondBottom.jpg" id= "footer">
  </div>
 </body>

</html>

CSS:

body  { color: #464646; font-size: 62.5%; font-family: Verdana, Arial, Helvetica, sans-serif; background-image: url("../images/WebBG.jpg"); text-align: center; margin: 0; padding: 0 }

h1 {font-size: 1.4em; font-weight: bold}
#content   { background-image: url("../images/MainFondMain.jpg"); background-repeat: repeat-y; background-attachment: scroll; background-position: 0 0; text-align: left; position: relative; z-index: 0; width: 740px; min-height: 300px; voice-family: inherit     }
#header { display: block; background-image: url("../images/MainFondTop.jpg"); background-repeat: no-repeat; text-align: left; margin-left: -1px; top: -2em; left: -2em; width: 740px; height: 40px }
#menu   { text-decoration: none; background-image: none; list-style-type: none; display: block; position: relative; z-index: 1; right: 41px; width: 110px; float: right }
#mainText   { line-height: 1.6em; padding-right: 10em; padding-left: 3em; position: relative }
#footer { display: block; background-image: url("../images/MainFondBottom.jpg"); background-repeat: no-repeat; margin-bottom: -10px; margin-left: -1px }

#HomeCurrent { background-image: url("../images/SideButtonHomeDown.jpg"); background-repeat: no-repeat; display: block; width: 110px; height: 40px }
#home:link    { display: block; background-image: url("../images/SideButtonHomeUp.jpg"); width: 110px; height: 40px; background-repeat: no-repeat}
#home:visited { display: block; background-image: url("../images/SideButtonHomeUp.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#home:hover   { display: block; background-image: url("../images/SideButtonHomeOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#home:active  { display: block; background-image: url("../images/SideButtonHomeDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

#PicsCurrent { background-image: url("../images/SideButtonPicsDown.jpg"); background-repeat: no-repeat; display: block; width: 110px; height: 40px }
#pics:link     { display: block; background-image: url("../images/SideButtonPicsUp.jpg"); background-repeat: no-repeat; width: 110px; height: 40px }
#pics:visited  { display: block; background-image: url("../images/SideButtonPicsUp.jpg"); background-repeat: no-repeat; width: 110px; height: 40px }
#pics:hover   { display: block; background-image: url("../images/SideButtonPicsOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#pics:active  { display: block; background-image: url("../images/SideButtonPicsDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

#NewsCurrent { background-image: url("../images/SideButtonNewsDown.jpg"); background-repeat: no-repeat; display: block; width: 110px; height: 40px }
#news:link     { display: block; background-image: url("../images/SideButtonNewsUp.jpg"); background-repeat: no-repeat; width: 110px; height: 40px }
#news:visited { display: block; background-image: url("../images/SideButtonNewsUp.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#news:hover   { display: block; background-image: url("../images/SideButtonNewsOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#news:active  { display: block; background-image: url("../images/SideButtonNewsDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

#ContactCurrent { background-image: url("../images/SideButtonContactDown.jpg"); background-repeat: no-repeat; display: block; width: 110px; height: 40px }
#contact:link    { display: block; background-image: url("../images/SideButtonContactUp.jpg"); width: 110px; height: 40px; background-repeat: no-repeat}
#contact:visited { display: block; background-image: url("../images/SideButtonContactUp.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#contact:hover   { display: block; background-image: url("../images/SideButtonContactOver.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }
#contact:active  { display: block; background-image: url("../images/SideButtonContactDown.jpg"); width: 110px; height: 40px;  background-repeat: no-repeat }

[thebach]

Hmmm. Und dann wieder doch nicht.
Zu Hause nachgetestet und jetzt klappt alles bis auf...
tja bis auf die Tatsache, daß mein Hauptcontent
(<div id="content">)
jetzt in Safari und Firefox linksbündig steht.
Er sollte aber zentriert sein. Was mach' ich falsch?

  
#content  
{  
    background-image: url( "../images/MainFondMain.jpg" );  
    background-repeat: repeat-y;  
    background-attachment: scroll;  
    background-position: 0 0;  
    text-align: left;  
    position: relative;  
    z-index: 0;  
    width: 740px;  
    min-height: 300px;  
    voice-family: inherit;  
}  

Also ich kann jetzt nicht wirklich erkennen wo du den Content-Div sagst, dass er sich zentriert zu positionieren hat. Mit position: relative; geht das auch nicht so gut. Setze lieber margin-left und margin-right auf auto.

Eine Bitte: versuche das CSS etwas besser zu formatieren (so wie ich oben). Das ist übersichtlicher und man findet die Fehler leichter.

thebach

[dieselross]

Also ich kann jetzt nicht wirklich erkennen wo du den Content-Div sagst, dass er sich zentriert zu positionieren hat. Mit position: relative; geht das auch nicht so gut. Setze lieber margin-left und margin-right auf auto.

Eine Bitte: versuche das CSS etwas besser zu formatieren (so wie ich oben). Das ist übersichtlicher und man findet die Fehler leichter.

thebach

Also. Ich hab' inzwischen bei Laborenz (CSS Praxis) auch was gefunden:
Im IE funktioniert "margin: auto" nicht.
Dafür aber im html: "text-align: center"
In der Kombination aus beidem scheint die Lösung zu liegen.

Und wegen der Formatierung: ich gelobe Besserung.

[ChrisB]

Hi,

Im IE funktioniert "margin: auto" nicht.

Nur in IE < 6, oder aktuelleren IEs im Quirks Mode - letzteren vermeidet man aber natuerlich wenn moeglich.

Dafür aber im html: "text-align: center"
In der Kombination aus beidem scheint die Lösung zu liegen.

Wie gesagt, Workaround fuer *sehr* alte IE-Versionen.

MfG ChrisB