✔ mit hover Bilder wechseln, aber nicht einfach hintergrundbild?
- Themenstarter son gohan
- Beginndatum
- Status
son gohan
Erfahrenes Mitglied
Hallo,
mit Schriftgröße ändern würde das schon gehen, aber dann wäre die Schrift im select Tag auf 7px und die Links daneben müsten auf 15 px und das past nicht im Verhätnis weil es nicht schön aussieht, ich würde die Links am liebsten auf 12 px lassen.
Ich muss vielleicht auch noch etwas weiter rumspielen daran, abaer falls hier jemand noch vorher eine Lösung findet, weil ich sowieso glaube das ich wieder nichts finde, habe ich nichts dagegen.
mit Schriftgröße ändern würde das schon gehen, aber dann wäre die Schrift im select Tag auf 7px und die Links daneben müsten auf 15 px und das past nicht im Verhätnis weil es nicht schön aussieht, ich würde die Links am liebsten auf 12 px lassen.
Ich muss vielleicht auch noch etwas weiter rumspielen daran, abaer falls hier jemand noch vorher eine Lösung findet, weil ich sowieso glaube das ich wieder nichts finde, habe ich nichts dagegen.
Das, was um das alles ist, also das grüne ist vermutlich ein div oder ein anderes Block-Element?
Du könntest versuchen, dessen Höhe festzusetzen (entsprechend des select) und die Zeilenhöhe auf den gleichen Wert bringen.
Dazu vertical-align:middle könnte die Inline-Elemente, was die Links hoffentlich sind, vertical zentrieren.
Du könntest versuchen, dessen Höhe festzusetzen (entsprechend des select) und die Zeilenhöhe auf den gleichen Wert bringen.
Dazu vertical-align:middle könnte die Inline-Elemente, was die Links hoffentlich sind, vertical zentrieren.
son gohan
Erfahrenes Mitglied
Hallo,
ich hab das mall so versucht, aber kapier nicht warum es nicht geht?
gruß
feh
ich hab das mall so versucht, aber kapier nicht warum es nicht geht?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title>Menü</title>
<style type="text/css">
<!--
.combobox {
background-color: #E3F9E6;
color: #000000;
font-size: 10pt;
font-family: arial;
margin-left:10px;
height:25px;
}
#topmenu ul
{
height:25px;
clear: left;
clear: right;
padding: .1em 0;
margin: 0px;
padding-left: 20px;
list-style-type: none;
background-color: #4BCD52;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: #000000;
}
#topmenu li
{
height:25px;
background-color: #4BCD52;
list-style-type: none;
display: inline;
}
#topmenu li a
{
height:25px;
text-decoration: none;
color: #000000;
font-weight: bold;
margin-left: 20px;
padding: 1px 10px;
}
#topmenu li a:hover
{
height:25px;
background-color: #007F00;
color: #ffffff;
margin-left: 20px;
padding: 1px 10px;
}
-->
</style>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="topmenu">
<ul>
<li><script language="JavaScript" type="text/javascript">
<!--
var Jetzt = new Date();
var Tag = Jetzt.getDate();
var Wochentag = Jetzt.getDay();
Wochentagname = new Array ("Sonntag","Montag","Dienstag","Mittwoch","Donnerstag","Freitag","Samstag");
var Monat = Jetzt.getMonth();
Monatsname = new Array ("Januar","Februar","März","April","Mai","Juni","Juli","August","Septemper","Oktober","November","Dezember");
var Jahr = Jetzt.getYear();
if (Jahr<=1900)
Jahr=Jahr+1900;
var Stunden = Jetzt.getHours();
var Minuten = Jetzt.getMinutes();
var NachVoll = ((Minuten < 10) ? ":0" : ":");
document.write("" + Wochentagname[Wochentag] + ", den " + Tag + "." + Monatsname[Monat] + " " + Jahr + " - ");
document.write("" + Stunden + NachVoll + Minuten + " Uhr");
// -->
</script></li>
<li>
<select class="combobox" name="select" onChange="document.getElementById('main').src=this.value">
<option value="#">Menü</option>
<option value="http://www.home.de">Home</option>
<option value="http://www.home.de">Home</option>
<option value="http://www.home.de">Home</option>
<option value="http://www.home.de">Home</option>
<option value="http://www.home.de">Home</option>
</select>
</li>
<li><a href="index.html" onfocus="if(this.blur)this.blur()">Home</a></li>
<li><a href="agb.html" onfocus="if(this.blur)this.blur()">Agb</a></li>
<li><a href="impressum.html" onfocus="if(this.blur)this.blur()">Impressum</a></li>
</ul>
</div>
</body>
</html>gruß
feh
Gumbo
Erfahrenes Mitglied
Probier mal folgendes Stylesheet:
Code:
#topmenu ul {
margin: 0;
height: 1.5em;
list-style-type: none;
background-color: #4BCD52;
color: #000000;
}
#topmenu li {
float: left;
margin: 0 0.25em;
height: 1.5em;
line-height: 1.5;
}
#topmenu li a:link,
#topmenu li a:visited {
display: block;
padding: 0 1em;
text-decoration: none;
color: #000;
font-weight: bolder;
font-family: Arial, sans-serif;
}
#topmenu li a:hover {
color: #fff;
background-color: #007F00;
}Ich habe in Deinem Stylesheet mal ein paar Kleinigkeiten geändert.
(Die Eigenschaften der restlichen Definitionen habe ich gelassen, wie sie waren)
Im FF siehts damit mittig aus.
Gruß hpvw
(Die Eigenschaften der restlichen Definitionen habe ich gelassen, wie sie waren)
Code:
.combobox {
background-color: #E3F9E6;
color: #000000;
font-family: arial;
margin-left:10px;
}
#topmenu ul {
height:25px;
line-height:25px;
vertical-align:middle;
clear: left;
clear: right;
padding: .1em 0;
margin: 0px;
padding-left: 20px;
list-style-type: none;
background-color: #4BCD52;
font-family: arial;
font-size: 13px;
font-weight: bold;
color: #000000;
}Gruß hpvw
M
Maik
Hallo Feh,
in welchem Browser entstand denn dein Screenshot?
Ich habe deinen Source-Code mal in den unterschiedlichen Browsern geladen, respektive getestet, und das Ergebnis kann nicht unterschiedlicher sein, denn Menü und :hover-Effekt sehen in jedem Browser komplett anders aus
in welchem Browser entstand denn dein Screenshot?
Ich habe deinen Source-Code mal in den unterschiedlichen Browsern geladen, respektive getestet, und das Ergebnis kann nicht unterschiedlicher sein, denn Menü und :hover-Effekt sehen in jedem Browser komplett anders aus
Uuups, Du hast recht.
Einen Unterschied gab es nur zu Deinem Screenshot, nicht zu Deinem geposteten Code.
Ich habe Gumbos Beispiel noch mal etwas angepasst und die Schrift (zumindest von den Links mit etwas Probieren angepasst:
Für den Datumstext (Warum machst Du das? Ich sehe die Informationen unten rechts in meinem OS) müßtest Du vermutlich noch ein bisschen schachteln und ein span einfügen.
EDIT: Getestet habe ich mit FF und IE 6 und NS 7.1 Feststellbarer Unterschied:
IE: Select klebt oben
FF: Select klebt unten
NS: Select ist mittig
Einen Unterschied gab es nur zu Deinem Screenshot, nicht zu Deinem geposteten Code.
Ich habe Gumbos Beispiel noch mal etwas angepasst und die Schrift (zumindest von den Links mit etwas Probieren angepasst:
Code:
#topmenu ul {
margin: 0;
height: 1.5em;
list-style-type: none;
background-color: #4BCD52;
color: #000000;
}
#topmenu li {
float: left;
margin: 0 0.25em;
height: 1.5em;
line-height:1.5em;
overflow:hidden;
}
#topmenu li a:link,
#topmenu li a:visited {
display: block;
padding: 0.05em 1em;
text-decoration: none;
color: #000;
font-weight: bolder;
font-family: Arial, sans-serif;
font-size:0.8em;
}
#topmenu li a:hover {
color: #fff;
background-color: #007F00;
}EDIT: Getestet habe ich mit FF und IE 6 und NS 7.1 Feststellbarer Unterschied:
IE: Select klebt oben
FF: Select klebt unten
NS: Select ist mittig
Zuletzt bearbeitet:
son gohan
Erfahrenes Mitglied
Hallo,
@ deine Lösung sieht diesmal richtig gut aus, ich muss mal das ganze etwas genauer ansehen, wie du das geschaffst hast.
@ maik, hi wie gehts wie steht´s? Das Bild habe ich im IE 6.0 gemacht, aber jetzt habe ich erst mal ein gute Vorlage von hpvw und muss die mal studieren. Ich glaube ich sollte mir langsam auch mal diesen FF Brwoser laden.
vielen Dank.
gruß
feh
@ deine Lösung sieht diesmal richtig gut aus, ich muss mal das ganze etwas genauer ansehen, wie du das geschaffst hast.
@ maik, hi wie gehts wie steht´s? Das Bild habe ich im IE 6.0 gemacht, aber jetzt habe ich erst mal ein gute Vorlage von hpvw und muss die mal studieren. Ich glaube ich sollte mir langsam auch mal diesen FF Brwoser laden.
vielen Dank.
gruß
feh
- Status
