| Autor |
Nachricht |
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht: 
|
Verfasst Fr 03.04.2009 09:42
Titel CSS Menü ... und der IE spielt wieder nicht mit... |
  |
|
hallo ihr,
ich bin grad wieder dabei ein CSS Menü mit hilfe von Listen zu schreiben. ich werd gleich noch den code posten.
Soweit wie ich jetzt bin, passt der grobe aufbau. Firefox, Chrome und Safari zeigen alles gleich, beim IE wird die unterliste nach rechts verschoben. welche angaben kann ich denn machen, damit die darstellung im IE genauso ist, wie in den andern browsern?
und mein 2. problem: alle navigationspunkte haben ein hintergrundbild. die hauptnavi in einem hellen grün, die subnavi in einem etwas dunkleren grün. jetzt möcht ich, dass der aktive subnavipunkt (also der punkt, auf dessen seite man sich grad befindet) ein anderes hintergrund bild nutzt. ein sehr helles grün.
wenn ich dem #area_81 ul li ul li a:focus ein hintergrund bild gebe, klappt das nicht. also wo dann?!
für ein bisschen hilfe und tipps wäre ich euch ganz dankbar. die ausmessungen meiner hintergrundbilder ist übrigens 300 x 28 px.
| Code: |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation</title>
<style type="text/css">
#area_81 {
position:relative;
width:400px;
}
#area_81 ul {
list-style:none;
}
#area_81 ul li {
background-image:url(test_navi_hg_01.jpg);
background-repeat:repeat-y;
line-height:28px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
padding-bottom:2px;
}
#area_81 ul li a{
text-decoration:none;
padding-left:10px;
}
#area_81 ul li a:link{
color:#000;
}
#area_81 ul li a:visited{
color:#000;
}
#area_81 ul li a:hover{
color:#c8c7c7;
}
#area_81 ul li a:focus{
color:#c8c7c7;
}
#area_81 ul li ul {
padding-left:0;
line-height:25px;
}
#area_81 ul li ul li {
font-size:12px;
padding-left:25px;background-image:url(test_navi_hg_02.jpg);
background-repeat:repeat-y;
}
#area_81 ul li ul li a:link{
text-decoration:none;
}
#area_81 ul li ul li a:link{
color:#000;
}
#area_81 ul li ul li a:visited{
color:#000;
}
#area_81 ul li ul li a:hover{
color:#c8c7c7;
}
#area_81 ul li ul li a:focus{
color:#c8c7c7;
background-image:url(test_navi_hg_01.jpg);
}
</style>
</head>
<body>
<div id="area_81">
<ul>
<li><a href="home.html">Startseite</a></li>
<li><a href="sicherheit.html">IT-Sicherheit</a></li>
<li><a href="vernetzung.html">Standortvernetzung</a></li>
<li><a href="hardware.html">Hardware + Software</a>
<ul>
<li><a href="#">Server</a></li>
<li><a href="#">Server</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressumg.html">Impressum</a></li>
</ul>
</div>
</body>
</html> |
vielen dank schon mal im voraus!!!
|
|
| |
  |
 |
Engholm
Dabei seit: 07.07.2005
Ort: Westerstede
Alter: 49
Geschlecht: 
|
Verfasst Fr 03.04.2009 10:13
Titel
|
|
|
Zu Problem 1: Das Problem mit der unterschiedlichen Darstellung waren wohl die paddings. Versuchs mal so:
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Navigation</title>
<style type="text/css">
* html body {
margin:0px;
padding:0px;
}
#area_81 {
width:400px;
}
#area_81 ul {
list-style:none;
}
#area_81 ul li {
background-image:url(test_navi_hg_01.jpg);
background-repeat:repeat-y;
line-height:28px;
font-family:Verdana, Geneva, sans-serif;
font-size:14px;
font-weight:bold;
padding-bottom:2px;
}
#area_81 ul li a{
text-decoration:none;
}
#area_81 ul li a:link{
color:#000;
}
#area_81 ul li a:visited{
color:#000;
}
#area_81 ul li a:hover{
color:#c8c7c7;
}
#area_81 ul li a:focus{
color:#c8c7c7;
}
#area_81 ul li ul {
line-height:25px;
}
#area_81 ul li ul li {
font-size:12px;
background-repeat:repeat-y;
margin-left:-15px;
}
#area_81 ul li ul li a:link{
text-decoration:none;
}
#area_81 ul li ul li a:link{
color:#000;
}
#area_81 ul li ul li a:visited{
color:#000;
}
#area_81 ul li ul li a:hover{
color:#c8c7c7;
}
#area_81 ul li ul li a:focus{
color:#c8c7c7;
background-image:url(test_navi_hg_01.jpg);
}
</style>
</head>
<body>
<div id="area_81">
<ul>
<li><a href="home.html">Startseite</a></li>
<li><a href="sicherheit.html">IT-Sicherheit</a></li>
<li><a href="vernetzung.html">Standortvernetzung</a></li>
<li><a href="hardware.html">Hardware + Software</a>
<ul>
<li><a href="#">Server</a></li>
<li><a href="#">Server</a></li>
</ul>
</li>
<li><a href="kontakt.html">Kontakt</a></li>
<li><a href="impressumg.html">Impressum</a></li>
</ul>
</div>
</body>
</html> |
Zu Problem 2:
Ein aktivem link wird normalerweise a:active zugewiesen
|
|
| |
 |
|
|
Anzeige
|
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst Fr 03.04.2009 10:38
Titel
|
|
|
huhu, danke für die antwort.
ich habs jetzt mal ausgetestet. wenn ich die paddings weglasse, dann passt die listen-darstellung in keinem browser mehr. also lass ichs lieber drin, dann ist es wenigstens in 3 von 4 richtig.
und das mit dem active- background image funzt auch nicht :/
ich werd gleich verrückt, ich sitz scho wieder 2 tage lang an dem mist... 
|
|
| |
|
|
willshedo
Dabei seit: 21.12.2005
Ort: Waldshut
Alter: 51
Geschlecht: -
|
Verfasst So 05.04.2009 02:03
Titel
|
|
|
Hi,
1:
#area_81 ul {
list-style:none;
padding:0;
margin:0;
}
2.
a:active schon probiert?
background-image:url(test_navi_hg_01.jpg) !important; ?
Schönen Sonntag!
|
|
| |
|
|
traumgaertner
Dabei seit: 18.01.2009
Ort: Franken
Alter: 43
Geschlecht:
|
Verfasst So 05.04.2009 02:11
Titel Re: CSS Menü ... und der IE spielt wieder nicht mit... |
|
|
| house baby hat geschrieben: | | jetzt möcht ich, dass der aktive subnavipunkt (also der punkt, auf dessen seite man sich grad befindet |
Sorry, aber das geht mit CSS doch gar nicht 
|
|
| |
|
|
house baby
Threadersteller
Dabei seit: 18.12.2008
Ort: bei Forchheim
Alter: 36
Geschlecht:
|
Verfasst So 05.04.2009 18:17
Titel
|
|
|
halllo nochmal,
danke nochmal für die tipps. a:active hab ich auch probiert, das funktioniert auch nicht. und wenn traumgaertner sagt, das es gar net geht, dann hat er/sie recht  es ging einfach nicht.
naja man muss sich ja auch nicht 100% ans layout halten. wär zwar cool gewesen, wenns klappt, aber man ko ja nier alles ham 
das problem mit der darstellung im IE hab ich jetzt irgendwie gelöst, ich hab keinen blassen schimmer wie, aber seltsamerweise klappt jetzt zumindest die listendarstellung im IE.
ich hab halt den code nochmal neu geschrieben und ihn dann in den bestehenden code der seite reinkopiert. und seltsamerweise gings dann. CSS is mir einfach ein rätsel.
vielen dank nochmal und einen schönen, arbeitsfreien sonntag!
|
|
| |
|
|
traumgaertner
Dabei seit: 18.01.2009
Ort: Franken
Alter: 43
Geschlecht:
|
Verfasst So 05.04.2009 19:39
Titel
|
|
|
ER hat recht
Die aktive Seite grafisch hervorheben geht nur im HTML-Code der Seite selbst die gerade aufgerufen ist (sprich, den entsprechenen Link der Seite auf der man sich gerade befindet manuell entsprechend definieren) oder aber halt per Javascript. Sind beides keine schönen Lösungen - letzteres läuft nicht überall (obwohl das eher zu vernachlässigen sein dürfte da es sich um keine wirklich wichtige Funktion handelt die das Funktionieren der Seite beeinträchtigen könnte) und ersteres einfach unheimlich viel Aufwand wenn die Site relativ umfangreich ist.
Aber so ist es nunmal ^^
a:active bezieht sich nur(!) auf den Effekt der bei gedrückter Maustaste auf einem Link erscheinen soll, und ist m.E. nach ein völlig unsinniger Tag.
Grüsse nach Forchheim
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
wie erstelle ich diesen menü effekt bzw. das gesammte menü?
CSS Menü - Finde nicht das richtige Menü
[JS] IE spielt nicht mit!
flash spielt mp3 nicht ab ?
CSS-Problem - IE spielt nicht mit.
Flash Film spielt sich falsch ab
|
|
Willkommen auf dem Portal für Mediengestalter
