• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

verlinkung außer mit a href

Status
Für weitere Antworten geschlossen.
F

Fanfa

Neues Mitglied
Hi ich hab ein problem,

ich möchte in meinem menü in einer situation 2 verschiedene farben haben

HTML: 
#header {
    width:750px;
    height:341px;
    margin-left:25px;
    background-image:url(images/banner.jpg);
    display:block;
}
#nav {
    width:744px;
    height:22px;
    margin: 2px 0px 2px 25px;
    background-color:#4169E1;
    padding: 3px 5px 3px 1px;
}
#nav ul {
}
#nav li {
    display:inline;
    background-color:#245882;
    width:120px;
    height:22px;
    float:left;
    margin-left:4px;
    text-align:center;
}
#nav a {
    width:120px;
    height:19px;
    padding-top:3px;
    text-decoration:none;
    color:#4169E1;
    font-weight:800;
    display:block;
}
#nav a:hover {
    color:#FFFF00;
    font-weight:800;
}

das war die css datei

HTML: 
<div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="index.htm">Startseite</a></li>
                <li><a href="chronik.htm">Chronik</a></li>
                <li><a href="vorstandschaft.htm">Vorstandschaft</a></li>
                <li><a href="jugend.htm">Jugend</a></li>
                <li><a href="presse.htm">Presse</a></li>
                <li><a href="impressum.htm">Impressum</a></li>
            </ul>
        </div>

das der html code dazu jetzt sollten die mittleren 4 links genau in der umgekehrten farbe erscheinen

kann mir dazu jemand nen tipp geben?
danke schonmal im vorraus
 
Einfach eine Klasse schreiben, die die umgekehrten Farben enthält und den Links dann diese class zuweisen.
 
du meinst praktisch nochaml z.B.

nen navi generieren mit den umgekehrten farben und die dann zwischen den links einfügen also so

<div id="header"></div>
<div id="nav">
<ul>
 <li><a href="index.htm">Startseite</a></li>

</div>

<div id="navi">
 <li><a href="chronik.htm">Chronik</a></li>
<li><a href="vorstandschaft.htm">Vorstandschaft</a></li>
 <li><a href="jugend.htm">Jugend</a></li>
<li><a href="presse.htm">Presse</a></li>

</div>
</div id="nav">
 <li><a href="impressum.htm">Impressum</a></li> </ul> </div>
 
ich würde einfach den links, die andern aussehen sollen class="anders" geben, und dann über a.anders die links definieren. So haste doch nur wieder div-suppe!
 
Also so:

Code: 
[COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"chronik.htm"[/COLOR]>[/COLOR]Chronik[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>[/COLOR]
 [COLOR=#000080]<li>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000ff]"vorstandschaft.htm" class="KlasseFuerAndereFarbe"[/COLOR]>[/COLOR]Vorstandschaft[COLOR=#008000]</a>[/COLOR][COLOR=#000080]</li>
[/COLOR]
 
sorry ich steh grad iwie aufm schlauch könntest du mir das evtl. schreiben so wie ich das wollte?
 
ja schon das hab ich im richtigen quelltext auch so damit es übersichtlicher ist

aber ich hab nen problem mit der class irgendwie passiert bei mir da nix wenn ich das so schreib wie es als beispiel ist
 
jo das hab ich ja hab die in meiner css geschrieben aber iwie muss da nen fehler sein kannst du mir dafür das beispiel geben?
 
Code: 
#anders {
    width:120px;
    height:19px;
    padding-top:3px;
    text-decoration:none;
    color:#4169E1;
    font-weight:800;
    display:block;
}
#anders:hover {
    color:#FFFF00;
    font-weight:800;
}


und dann hab ich das so in den link eingefügt

<a href="xxx.xxx" class="anders">xxxxxx</a>
 
Zuletzt bearbeitet von einem Moderator:
daran ändert sich auch nix

HTML: 
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 12px;
    margin: 0px;
    padding: 0px;
    background-color:#164871;
}
* {margin: 0px;padding: 0px;}
#container {
    margin: 10px auto;
    text-align: left;
    width: 800px;
}
#main {
    width: 800px;
    background-image:url(images/background.gif);
    
}
/******************** header ********************/
#header {
    width:750px;
    height:341px;
    margin-left:25px;
    background-image:url(images/banner.jpg);
    display:block;
}
#nav {
    width:744px;
    height:22px;
    margin: 2px 0px 2px 25px;
    background-color:#4169E1;
    padding: 3px 5px 3px 1px;
}
#nav ul {
}
#nav li {
    display:inline;
    background-color:#245882;
    width:120px;
    height:22px;
    float:left;
    margin-left:4px;
    text-align:center;
}
#nav a {
    width:120px;
    height:19px;
    padding-top:3px;
    text-decoration:none;
    color:#4169E1;
    font-weight:800;
    display:block;
}
#nav a:hover {
    color:#FFFF00;
    font-weight:800;
}

.anders {
    width:120px;
    height:19px;
    padding-top:3px;
    text-decoration:none;
    color:#FFFF00;
    font-weight:800;
    display:block;
}
.anders:hover {
    color:#4169E1;
    font-weight:800;
}
/******************** Content ********************/
p, h1, a, span{font-family: Arial, Helvetica, sans-serif;}
#content {
    width:750px;
    margin-left:25px;
    background-color:#4169E1;
}
#left {
    float:left;
    width:390px;
    display:inline;
    margin: 20px 0px 30px 20px;
}
#left p {
    font-size: 12px;
    color: #FFD700;
    padding: 5px 0px;    
}
#left a{
    color: #FFD700;
    font-weight:800;
}
#left a:hover{
    color:#FFFFFF;
}
#left h1{
    font-size: 16px;
    color: #FFD700;
    display:inline;
    font-weight:900;
}
#left span{
    font-size: 14px;
    color: #FFD700;
    font-weight: 900;
    display:inline;
    margin-left:8px;
}
#right {
    float:right;
    width:260px;
    background-color:#4169E1;
    color:#FFD700;
    font-weight:900;
    padding: 10px 20px;
    margin: 30px 20px 20px 0px;
    display:inline;
}
#right p{
    padding: 7px 0px;
}
#right a{
    color:#FFD700;
    font-weight:900;
}
#right a:hover{
    color: #052d4e;
}
.post {
    margin-top:20px;
}
.post a{
}

.post a:hover{
}

.post p{
}


/******************** Footer ********************/
#footer {
    width:800px;
    text-align:center;
    color:#FFD700;
    margin: 10px 0px;
}
#footer ul {
}
#footer li {
    display:inline;
    float:none;
    text-align:center;
}
#footer a {
    color:#FFD700;
    font-weight:900;
    text-decoration:none;
}
#footer a:hover {
    text-decoration:underline;
}
#footer span {
    display:block;
    clear:both;
    color:#FFD700;
    margin: 10px 0px;
}
.clear{
    clear:both;
}

das ist die ganze css datei

HTML: 
<div id="container">
    <div id="main">
        <div id="header"></div>
        <div id="nav">
            <ul>
                <li><a href="index.htm">Startseite</a></li>
                <li><a href="chronik.htm" class="anders">Chronik</a></li>
                <li><a href="vorstandschaft.htm">Vorstandschaft</a></li>
                <li><a href="jugend.htm">Jugend</a></li>
                <li><a href="presse.htm">Presse</a></li>
                <li><a href="impressum.htm">Impressum</a></li>
            </div>


und das der teil mit den links
 
Die Farbangaben in .anders werden die die umgebende ID #nav überschrieben. Um das zu "umgehen" schreib ein "!important" an die CSS-Eigenschaften dran. Beispiel:

Code: 
.anders {
    width:120px;
    height:19px;
    padding-top:3px;
    text-decoration:none;
    color:#FFFF00 !important;
    font-weight:800;
    display:block;
}
.anders:hover {
    color:#4169E1 !important;
    font-weight:800;
}
 
das hab ich auch schon probiert und das funktioniert auch nicht

danke das mit dem
!important;
war der richtige einfall
jetzt geht es
 
Zuletzt bearbeitet von einem Moderator:
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben