...und es am Ende doch umfärben! (CSS)

Dieses Thema im Forum "Web Page Design" wurde erstellt von _julius, 20.03.2006.

  1. _julius

    _julius Thread Starter MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    MacUser seit:
    11.10.2004
    Hey Leute,

    hab ne Frage: hab ein Menü komplett aus Text bestehend! Selbstverständlich färben sich die Menüelemente nach den globalen Hover etc Einstellungen ein. Ich möchte aber, dass der Text im Menü oben eine andere Farbe hat als die anderen 0815-Links in meiner Seite. Wie kann ich das Menü umfärben und es trotzdem als Link belassen?

    Machts gut

    Julius
     
  2. simusch

    simusch MacUser Mitglied

    Beiträge:
    2.221
    Zustimmungen:
    186
    MacUser seit:
    27.09.2004
    das geht, indem du den menulink speziell definierst.
    du hast ja wohl das menu als class definiert (.menu) oder so

    dann einfach:

    .menu a {....}
    .menu a:hover {....}

    und für die normalen links

    a {....}
    a:hover {....}
     
  3. _julius

    _julius Thread Starter MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    MacUser seit:
    11.10.2004
    danke! in firefox klappts nur leider reagiert unser lieber internet explorer schon wieder nicht drauf :(

    was tun?
     
    Zuletzt bearbeitet: 20.03.2006
  4. _julius

    _julius Thread Starter MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    MacUser seit:
    11.10.2004
    hat irgendjemand eine idee wie ich den ie auch dort überlisten kann?
     
  5. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Der IE kann zwar vieles nicht, aber das kann er.

    Gib mal Code, ohne ist schwer zu sagen, wo du den Fehler hast.

    Matt
     
  6. _julius

    _julius Thread Starter MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    MacUser seit:
    11.10.2004
    HTML:
    /*Layout beginnt*/
    
    body {
    	margin:0px;
    	padding:0px;
    	background-color:#e2e2e2;
    	background-image:url(images/background.jpg);
    	background-attachment:fixed;
    	background-repeat: repeat-x;
    }
    
    #mainframe {
    	width:645px;
    	height:551px;
    	border-bottom:1px;
    	border-left:1px;
    	border-right:1px;
    	border-top:0px;
    	border-style:solid;
    	border-color:#999999;
    	background-color:#FFFFFF;
    }
    
    #header {
    	background-image:url(images/header.jpg);
    	height:102px;
    	width:645px;
    	}
    	
    #menu {
    	background-image:url(images/menu.jpg);
    	background-attachment:scroll;
    	background-repeat:repeat-x;
    	height:19px;
    	width:645px;
    	border-bottom:1px;
    	border-left:0px;
    	border-right:0px;
    	border-top:1px;
    	border-style:solid;
    	border-color:#999999;
    	
    	}
    	
    
    #firstline {
    	height:20px;
    	background-color:#FFFFFF;
    	background-image:url(images/topborder.jpg);
    	background-attachment:scroll;
    	background-repeat:repeat-x;
    	text-align:left;
    	}
    
    #content {
    	height:396px;
    	width:633px;
    	background-color:#FFFFFF;
    	background-image:url(images/contentbackground.jpg);
    	background-attachment:scroll;
    	background-position:left bottom;
    	background-repeat:no-repeat;
    	font-family:Arial, Helvetica, sans-serif;
    	font-size:12px;
    	color:#000000;
    	text-align:left;
    	margin: 5px;
    	}
    	
    #bottomborder {
    	height:20px;
    	width:645px;
    }
    
    .menulinks {
    	float:left;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#999999;
    	font-size:12px;
    	margin-left:5px;
    	padding:2px;
    }
    	
    .menurechts {
    	float:right;
    	font-family:Arial, Helvetica, sans-serif;
    	color:#CCCCCC;
    	font-size:12px;
    	margin-left:2px;
    	margin-right:5px;
    	padding-top: 2px;
    }
    
    /*Layout endet*/
    
    
    /*Formatierungs-Tags beginnen*/
    
    .headline {
    	font-size:16px;
    	color:#666666;
    	}
    
    a:link {
    	color: #0079FF;
    	text-decoration: none;
    }
    
    a:visited {
    	color: #0066FF;
    	text-decoration: none;
    }
    
    /* Menü Formatierung */
    
    .menurechts a {
    	color:#666666;
    	}
    .menurechts a:hover {
    	color:#0079FF;
    	}
    	
    .menulinks a {
    	color:#999999;
    	}
    .menulinks a:hover {
    	color:#0079FF;
    	}
    
    /* Ende Menü Formatierung */
    
    Und natürlich die Seite selbst:

    HTML:
    <!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=iso-8859-1" />
    <meta name="description" content="Die offizielle Webseite der Parkresidenz Klünderberg des Ostseebad Binz auf der Insel Rügen." />
    <meta name="keywords" content="Rügen, Webseite, Homepage, Klünderberg, Ostseebad Binz, Nordsee, Ostsee, Wasser, Immobilien, Ferien, Wohnung" />
    
    <!-- TemplateBeginEditable name="doctitle" -->
    <title>Bitte Eingeben</title>
    <!-- TemplateEndEditable -->
    <link href="../design.css" rel="stylesheet" type="text/css" />
    <!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
    </head>
    
    <body>
    <div align="center">
    		<div id="mainframe">
    				<div id="header"></div>
    					<div id="menu">
    						<div class="menulinks"><a href="#">Impressum</a></div>
    						<div class="menurechts">
    <a href="#">Home</a> | <a href="#">Anfahrt</a> | <a href="#">Kontakt</a> | <a href="#">Infos</a> | <a href="#">Wohnung</a> | <a href="#">R&uuml;gen</a></div>
    		 			 </div>
    				<div id="firstline"></div>
    		<div id="content"><!-- TemplateBeginEditable name="Inhalt" -->Inhalt<!-- TemplateEndEditable --></div>
    		</div>
    	</div>
    </div>
    
    </body>
    </html>
    
     
  7. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Mach mal
    Code:
    /* Menü Formatierung */
    
    .menurechts a, .menurechts a:visited {
    	color:#666666;
    	}
    .menurechts a:hover {
    	color:#0079FF;
    	}
    	
    .menulinks a, .menulinks a:visited {
    	color:#999999;
    	}
    .menulinks a:hover {
    	color:#0079FF;
    	}
    
    /* Ende Menü Formatierung */
    
    draus.

    Du hast in deiner div-Suppe übrigens irgendwo einen schließenden div zu viel. Und du solltest ernsthaft darüber nachdenken, andere Elemente, die semantisch sinnvoller sind, zu benutzen. Das heilt auch die ausgeprägte divitis.

    Du bist ja auf dem richtigen Weg, aber warum machst du nicht
    HTML:
    <div align="center">
    auch mit css?

    Matt
     
  8. _julius

    _julius Thread Starter MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    MacUser seit:
    11.10.2004
    zu letzterem: wie schaut die css-alternative zum mittigmachen aus?

    hast du gute alternativen zum <div>en?
     
  9. _julius

    _julius Thread Starter MacUser Mitglied

    Beiträge:
    722
    Zustimmungen:
    0
    MacUser seit:
    11.10.2004
    *LACH*

    nachdem ich ein div entfernt habe, dass auch eigentlich nicht hingehört geht das mit dem formatieren des menüs!!! selbst die margin-anpassung der menüelemente geht... geil :D

    aber die frage: ist div nicht schick? :D alternativen schauen wie aus?
     
  10. msslovi0

    msslovi0 MacUser Mitglied

    Beiträge:
    2.713
    Zustimmungen:
    115
    MacUser seit:
    20.03.2005
    Mit css zentrieren:
    HTML:
    body {
      text-align: center;
    }
    
    #center {
      margin: 0 auto;
      text-align: left;
    }
    Das ist doppelt gemoppelt, allerdings bekommen ältere IE-Versionen das ganze sonst nicht gebacken.

    Wegen Alternativen zu <div>: Kommt immer drauf an. Für Menüs <ul> und <li>, das habe ich aber heute morgen schon mal geschrieben.

    Schau dir mal http://bartelme.at/articles/34/ an.

    Matt
     
Die Seite wird geladen...
Ähnliche Themen - Ende doch umfärben
  1. stivi87
    Antworten:
    8
    Aufrufe:
    1.619
  2. MiloHela
    Antworten:
    9
    Aufrufe:
    683

Diese Seite empfehlen