 Willkommen auf dem Portal für Mediengestalter
|
|
|
| Autor |
Nachricht |
Benutzer 4545
Account gelöscht Threadersteller
Ort: -
|
Verfasst Do 25.05.2006 15:51
Titel css-problem |
  |
|
hallo ihr lieben,
ich habe ein problem. ich möchte das menü (nur mit css) so gestalten, das
es so aussieht wie bei www.ftd.de
allerdings klappt das unterstreichen nicht, wenn man über den menüpunkt
fährt. was hab ich da falsch gemacht?
und wie stellt man es ein, das das "unterstrichene" wenn man den untermenüpunkt
anklickt vom hauptmenüpunkt verschwindet und auf den untermenüpunkt übergeht?
ich hoffe ihr wisst was ich meine. über hilfe wäre ich dankbar.
der code
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Unbenanntes Dokument</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="versuch.css" rel="stylesheet" type="text/css">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_showHideLayers() { //v6.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
//-->
</script>
</head>
<body>
<div id="Layer1" style="position:absolute; left:189px; top:118px; width:100; height:20px; z-index:1; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px #FFFFFF; visibility: hidden;">
<td height="20"; colspan="3" class="normal"
onMouseDown="className='over'" onMouseUp="className='normal'"
onMouseOver="className='over" onMouseOut="className='normal"><a
class="link_spezial" href="#">Geschichte</a></p></td>
</div>
<div id="Layer2" style="position:absolute; left:189; top:138; width:100; height:20; z-index:2; visibility: hidden;">
<td height="20"; colspan="3" class="normal"
onMouseDown="className='over'" onMouseUp="className='normal'"
onMouseOver="className='over'" onMouseOut="className='normal'">
<a class="link_spezial" href="#">Philosophie</a></td>
</div>
<table width="180" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3" bgcolor="#FFFF66">
<p> </p>
<p><span class="standard">Suche</span><span class="Suche">
<input name="suche" type="text" id="suche" size="20
" maxlength="30">
</span></p></td>
</tr>
<tr>
<td width="59" bgcolor="#FFFF66">
<input name="Zahlmethode" type="radio" class="abstand" value="Mastercard">
<span class="standard">News</span></td>
<td bgcolor="#FFFF66">
<input type="radio" name="Zahlmethode" value="Mastercard">
<span class="standard">Kurs</span></td>
<td bgcolor="#FFFF66" class="standard"><strong>OK</strong></td>
</tr>
<tr>
<td colspan="3" class="standard">Homepage</td>
</tr>
<tr>
<td height="20" colspan="3" class="normal" onMouseDown="className='over'" onMouseUp="className='normal'" onMouseOver="className='over';MM_showHideLayers('Layer1','','show','Layer2','','show')" onMouseOut="className='normal'"><a class="link_spezial" href="#">Meinung</a></td>
</tr>
</table>
</body>
</html>
|
und hier das zugehörige stylesheet:
| Code: |
.streifen {
border-top-width: thin;
border-top-style: solid;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
boder-top-color: #FFFFFF;
}
.ok {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #FFFF66;
background-color: #000000;
}
.standard {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
.link_spezial:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
.link_spezial:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #990000;
text-decoration: underline;
}
.link_spezial:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #ff0000;
text-decoration: underline;
}
.link_spezial:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #999999;
text-decoration: none;
}
.normal {
background-color:#FFFF66;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
padding-left: 10px;
}
.over {
background-color: #FFFFFF;
cursor: hand;
cursor: pointer;
color: #000000;
padding-left: 10px;
}
.down {
background-color: #CC6699;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
padding-left: 10px;
text-decoration: underline;
}
|
liebe grüße[/code]
|
|
| |
|
 |
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Do 25.05.2006 16:22
Titel
|
|
|
Ich weiss zwar nicht,ob das bei CSS1 anders war,aber
nach den aktuellen CSS-Spezifikationen 2 + 2.1 legt
man die Hintergrundfarbe nicht mit
| Code: | | background-color: #FFFFFF; |
sondern mit
| Code: | | background: #FFFFFF; |
fest. Damit müsstest du schonmal den gewünschten
Hover-Effekt erreichen. Um deine Codeschnipsel zu testen,
fehlt mir die Zeit. Veilleicht heut abend,wenns noch keiner gemacht hat.
Cya
|
|
| |
  |
|
|
Anzeige
|
|
|
Glas
Dabei seit: 24.05.2003
Ort: Bremen
Alter: 41
Geschlecht: 
|
Verfasst Do 25.05.2006 16:31
Titel
|
|
|
Ob background oder background-color in den CSS Deklarationen ist schnurz.
Das eine ist lediglich die Kurzschreibweise des anderen und ermöglicht die Angabe eines HG Bildes sowie dessen Position etc. ohne extra deklarationen.
Sprich statt:
| Code: |
background-color:
background-image:
background-repeat:
background-position:
|
einfach
| Code: |
background: #fff url() 0 0 repeat-x;
|
Zuletzt bearbeitet von Glas am Do 25.05.2006 16:32, insgesamt 1-mal bearbeitet
|
|
| |
|
|
213db
Dabei seit: 20.09.2005
Ort: -
Alter: -
Geschlecht:
|
Verfasst Do 25.05.2006 16:36
Titel
|
|
|
|
achso. das wusst ich nicht. ich hab es nur so gelernt. thanks!
|
|
| |
|
|
Benutzer 4545
Account gelöscht Threadersteller
Ort: -
|
Verfasst Fr 26.05.2006 09:55
Titel
|
|
|
also ist das mit dem background richtig ja? die farbe wechselt ja auch,
nur das unterstrichene klappt nicht!
|
|
| |
|
|
Impigra
Dabei seit: 17.05.2006
Ort: Egenhofen
Alter: 45
Geschlecht:
|
Verfasst Fr 26.05.2006 17:02
Titel
|
|
|
naja... so falsch war das nicht...
nur hast Du den Anchor an sich noch nicht definiert...
a:link ist nur für noch nicht besuchte Seiten aktiv...
tausche doch mal den Bereich mit der Link Definition gegen das hier aus...
| Code: | .link_spezial {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
text-decoration: none;
}
.link_spezial:visited {
color: #999999;
text-decoration: none;
}
.link_spezial:hover {
color: #990000;
text-decoration: underline;
}
.link_spezial:active {
color: #ff0000;
text-decoration: underline;
}
.link_spezial:link {
/* Formatierung für noch nicht besuchte Dateien */
} |
Ach ja... es sind nicht alle Formate in den einzelnen Pseudoklassen definiert... das braucht es auch nicht weil sich diese vom Elternelement vererben.
nur die Änderungen werden dann auch wirksam.
Und die Reihenfolge spielt eine Rolle. Wird der Anchor Aktiv ist der :hover schon dagewesen 
|
|
| |
 |
|
| |
|
|
| Ähnliche Themen |
Formmailer-Problem-neues problem
PHP Problem
CSS-Problem im IE7
CSS Problem
SQL-Problem
PS Problem
|
|
|
Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.
|
|
