2 Fragen

[ChrisR]

Hi ich bons nochmal ;)
Ich hab gleich zwie fragen:
1. Als Navigation hab ich auf meiner homepage ein bild. Jetzt möchte ich, dass beim drüberfahre mit der maus das bild verändert wird ( z.B. Aufleuchten oder unterstreichen, denk mal da muss ne zweite grafik her ;) aber wie schaff ichs, dass die grafik nr2 beim drüberscrollen angezeigt wird ?? oO) das nen mouseover effekt oder was ??

2. Wenn ich den browser nicht als vollbild sondern als fenster öffne, das kleiner ist als mein hintergrund der homepage, wird der text bzw. die grafiken nach links eingerückt. Wie kann man das verhindern ?ß


Hoffe meine ständige fragerei nervt nich ;)
Aber ich hab sowas weder hier im forum noch sonst irgendwo gefunden

 

[koslowski]

Hi,

du solltest eine Grafik machen, die alle Zustände enthält (normal und hover z.B.).

Quelltext:

<ul id="navi">
    <li id="navi01"><a href="startseite.htm"></li>
</ul>

CSS:

#navi01  {
    position:relative;
    width:144px;
    height:28px;
     } 
#navi01 a   {
    position:absolute;
    display:block;
    width:100%;
    height:100%;
    background:url(../images/startseite.jpg) no-repeat 0 0;
}
#navi01 a:hover,
#navi01 a:focus   {
    position:absolute;
    width:100%;
    height:100%;
    background:url(../images/startseite.jpg) no-repeat -144px 0;

#navi01 bekommt position:relative damit sich das absolut positionierte a daran orientieren kann.

Per background-position wird der Grafikteil für den Hoverzustand ins Bild geschoben.

So funktioniert das technisch ungefähr.

koslowski

 

[ChrisR]

Hi,
erstmal danke für die rasche antwort.
Ich bin leider nicht so vertraut mit CSS.

Könntest du bitte noch mal genauer erklären wie ichs machen muss :?:
Sorrey habs nciht so ganz geblickt

Muss ich Des CSS Zeug irgendiwe in den Quelltext einbinden oder was ??
Die grafik wird jetzt gar nicht angezeigt, sondern nur der text:

#navi01 { position:relative; width:144px; height:28px; } #navi01 a { position:absolute; display:block; width:100%; height:100%; background:url("index.gif") no-repeat 0 0; } #navi01 a:hover, #navi01 a:focus { position:absolute; width:100%; height:100%; background:url("index.gif") no-repeat -144px 0;



Da ich mich damit nich so auskenn wärs nett wenn du mir die vorgabe in nen grundgerüst einbauen könntest dass ich wiess wie ich mich orientieren kann^^
So hab ich leider keine ahnung wo quelltext und css überhaupt hinkommen

 

[csstester]

Warum willst eigentlich unbedingt grafiken dafür nutzen?
gibt doch auch ganz anständige vorlagen in reinem CSS.

Stu Nicholls | CSSplay | CSS only menus

Hat übrigens den ganz entscheidenden Vorteil das diese dinger dann auch ganz schön aussehen falls jemand Grafiken ausgeschaltet hat.

Desweiteren können sie dann von robots und auch vorlesegeräten erkannt werden was Deiner website zu besseren Rängen und weiterer Barrierefreiheit verhilft.

Gruß
csstester

 

[Efchen]

<ul id="navi">
    <li id="navi01"><a href="startseite.htm"></li>
</ul>

Da fehlt doch was? :-)

So funktioniert das technisch ungefähr.

Perfekt. Und wenn man mit nem Textbrowser kommt? Oder einem Vorlesebrowser? Oder Grafiken abstellt? :-)

Gruß,
-Efchen

 

[koslowski]

Moin,

Da fehlt doch was? :-)
-Efchen

jep, das schließende a-Tag.

Perfekt. Und wenn man mit nem Textbrowser kommt? Oder einem Vorlesebrowser? Oder Grafiken abstellt? :-)
Gruß,
-Efchen

Das ist imho in diesem Fall irrevelant.
Er hat eine Frage bez. grafischen Menü ohne code/css dazuzugeben gestellt.

Vor,- und Nachteile und wie man die Nachteile umgeht weiss ich bereits.

Wäre alles von mir expliziert aufgeführt worden, hätte das den Fragesteller imho überfordert, deshalb habe ich nur die grundsätzliche Systematik beschrieben.

Er will ja auch schon genaueres wissen, deswegen poste ich heute nachmittag/abend nochmal genauer zurück.