main.css und old.css

[angisun]

Hallo,

zum Üben von CSS habe ich ein Template runtergeladen.
Es sind zwei CSS-Dateien dabei: main.css und old.css

Hier mein Problem:

In der Vorlage sehen die Textlinks sauber aus. Sobald der Link jedoch mehr oder weniger als 9 Buchstaben hat, verändert sich der Hintergrund. Das würde ich gerne ändern.


Die main.css

body{
color:black;
background:#f6f6f6;
padding:0;
margin:0;
font:13px verdana, sans-serif;}


#head{
color:black;
background:#cccccc;
border-bottom:3px solid black;
padding-top:50px;
margin:0;}
#head h1{
color:white;
background:#a8a8a8;
padding:2px;
margin:0;
border-top:1px solid black;
font:bold 18px verdana, sans-serif;}


#menulinks{
float:left;
width:120px;}
#menulinks ul{
margin:0px;
padding:30px 0 0 5px;
list-style:none;}
#menulinks li{
padding:0 0 5px 0;
margin:0;}
#menulinks a{
color:black;
background:#e1e1e1;
padding:2px 20px 2px 20px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menulinks a:hover{color:white;background:#9a9a9a;}


#menurechts{
float:right;
width:120px;}
#menurechts ul{
margin:0px;
padding:30px 0 0 0px;
list-style:none;}
#menurechts li{
padding:0 0 5px 0;
margin:0;}
#menurechts a{
color:black;
background:#e1e1e1;
padding:2px 20px 2px 20px;
border:1px solid black;
font:bold 12px verdana, sans-serif;
text-decoration:none;
text-align:center;}
#menurechts a:hover{color:white;background:#9a9a9a;}


#content{
color:black;
background:#ededed;
margin:0 130px 0 130px;
padding:30px;
border-left:2px solid black;
border-right:2px solid black;}
#content h2{
margin:0 0 10px 0;
padding:2px 0 2px 5px;
font:bold 16px verdana, sans-serif;
border-left:10px solid #bcbcbc;
border-bottom:1px solid #bcbcbc;}
#content h3{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 14px verdana, sans-serif;
border-left:8px solid #bcbcbc;
border-bottom:1px solid #bcbcbc;}
#content h4{
margin:25px 0 10px 0;
padding:2px 0 2px 5px;
font:bold 12px verdana, sans-serif;
border-left:6px solid #bcbcbc;
border-bottom:1px solid #bcbcbc;}


#foot{color:white;
background:#a8a8a8;
padding:0;
margin:0;
border-top:2px solid black;}
#foot p{margin:0;padding:4px;}

----------

Die old.css

body{
color:black;
background:#f3f3f3;
padding:0;
margin:0;
font:14px verdana, sans-serif;}

#head h1{
padding:2px;
margin:0;
font:bold 20px verdana, sans-serif;}

#menulinks{
float:left;
width:120px;}
#menulinks ul{
margin:0px;
padding:0;
list-style:none;}
#menulinks li{
padding:0 0 4px 0;
margin:0;}
#menulinks a{
color:black;
background:transparent;
font-weight:bold;
font-size:13px;
text-decoration:none;}

#menurechts{
float:right;
width:120px;}
#menurechts ul{
margin:0px;
padding:0;
list-style:none;}
#menurechts li{
padding:0 0 4px 0;
margin:0;}
#menurechts a{
color:black;
background:transparent;
font-weight:bold;
font-size:13px;
text-decoration:none;}

#content{
color:black;
margin:0;
padding:30px;}
#content h2{
margin:10px;
font:bold 18px verdana, sans-serif;}
#content h3{
margin:10px;
font:bold 16px verdana, sans-serif;}
#content h4{
margin:10px;
font:bold 14px verdana, sans-serif;}

#foot{
padding:0;
margin:0;
border-top:2px solid black;}
#foot p{margin:0;padding:4px;}



Ich habe schon eigies versucht, aber leider finde ich die Lösung nicht.

Wer kann mir helfen?

Gruß Angisun

[Jürgen]

Hallo,

wie gefällt dir das...

Code:

.body {
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
}
.body2 {
font-family: Verdana, Arial;
font-size: 12px;
color: #ffffff;
}

.titel {
background-color: #7B9ABD;
font-family: Verdana, Arial;
font-size: 12px;
padding: 2px;
margin-bottom: 2px;
}
.menu {
background-color: #50779F;
}

.menu a {
display: block;
background-color: #B3C6DB;
font-family: Verdana, Arial;
font-size: 12px;
color: #000000;
padding: 2px;
margin-bottom: 2px;
text-decoration: none;
}
.menu a:hover {
background-color: #e2e7eb;
color: #660033;
padding: 2px;
margin-bottom: 2px;
text-decoration: underline;
}

.content {
background-color: #f5f5f5;
border-left: 1px solid #000000;
font-family: Verdana, Arial;
font-size: 12px;
padding: 2px;
vertical-align: top;
}

Hier kannst Du es in Action sehen...
http://www.juergens-workshops.de/vorlage...index.html

Gruß
Jürgen

[angisun]

Guten Abend Jürgen,
hui das ging ja schnell.......

Ich werde mal Dein Script nehmen. Es hat mich nur geärgert, das ich den Fehler - wenn es denn einen gibt - nicht gefunden habe.

Ich möchte alle meine HP´s ändern und bin erst am Anfang in Sachen CSS.

Vielen Dank und weiterhin einen schönen Abend.

Gruß
Angisun

[mali]

Hallo,

wie gefällt dir das...

Hier kannst Du es in Action sehen...
http://www.juergens-workshops.de/vorlage...index.html

Gruß
Jürgen

auch wenn da nichts mehr drinsteht, kommt mir sehr bekannt vor.

[Jürgen]

Hallo Mali,

was meinst Du?

Gruß
Jürgen

[angisun]

Guten Morgen,

was meinst Du?

Mali meint sicherlich, das da nur das "nackte Template" zu sehen ist. 8)

Wünsche euch einen schönen Tag.


Angisun - Nordlicht und hier tobt ein Sturm

[mali]

hi jürgen,
sah deine seite nicht mal so aus?
oder habe ich das bild, von wo anders in erinnerung?
ist ja schon soooooo lange her.

liebe grüsse und schöne besinnliche weihnachten

dein azubi