mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Mi 18.01.2017 23:30 Benutzername: Passwort: Auto-Login

Thema: css-problem vom 25.05.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> css-problem
Autor Nachricht
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Do 25.05.2006 14:51
Titel

css-problem

Antworten mit Zitat Zum Seitenanfang

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>&nbsp;</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: Nuremberg +/- 30km
Alter: 31
Geschlecht: Weiblich
Verfasst Do 25.05.2006 15:22
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Glas

Dabei seit: 24.05.2003
Ort: Bremen
Alter: 34
Geschlecht: Männlich
Verfasst Do 25.05.2006 15:31
Titel

Antworten mit Zitat Zum Seitenanfang

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 15:32, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden
213db

Dabei seit: 20.09.2005
Ort: Nuremberg +/- 30km
Alter: 31
Geschlecht: Weiblich
Verfasst Do 25.05.2006 15:36
Titel

Antworten mit Zitat Zum Seitenanfang

achso. das wusst ich nicht. ich hab es nur so gelernt. thanks!
  View user's profile Private Nachricht senden
Benutzer 4545
Account gelöscht Threadersteller


Ort: -

Verfasst Fr 26.05.2006 08:55
Titel

Antworten mit Zitat Zum Seitenanfang

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: 38
Geschlecht: Männlich
Verfasst Fr 26.05.2006 16:02
Titel

Antworten mit Zitat Zum Seitenanfang

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 Lächel
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen [CSS] Kleines CSS-Problem
IE-CSS-Problem
CSS Problem
CSS Problem (IE)
css-Problem
CSS Problem
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


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.