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

Warnung bei CSS - Validation

Corraggiouno

Mitglied
Hi,

bekomme eine Warnung bei der Validierung meines CSS-Codes.
Genau genommen betrifft es folgendes Code-Stück
Code:
div#nav li {
display: inline; 
float:left;
}
Die Validierung besagt, dass ich eine Breitenangabe angeben muss bzw. sollte.
Wenn ich aber eine Breite definiere, dann wird meine Liste verzogen und die Links sind mit ihren Abständen nicht mehr symmetrisch!
hier meine Seite : http://mh.netcn.de
 
Zuletzt bearbeitet:
Ich bekomme dort keine Warnung mit dem Webdeveloper und auch nicht beim Validieren beim W3C. Wo ist das Problem? Schon beseitigt?
 
ich bekomme eine Warnung. Wenn ich auf folgender Seite
The W3C CSS Validation Service

meine Seite NET

validiere, bekomme ich folgende Meldung:

Wie machst du das?
W3C CSS Validator results for http://mh.netcn.de/ (CSS level 2.1)

Aber die Antwort steht ja schon da. In früheren CSS Versionen war es nötig einem floatenden Element die Breite anzugeben. Das ist aktuell nicht mehr so. Wobei du hier ohne Probleme eine Breite in Prozent angeben könntest.
 
Wie machst du das?
W3C CSS Validator results for http://mh.netcn.de/ (CSS level 2.1)

Aber die Antwort steht ja schon da. In früheren CSS Versionen war es nötig einem floatenden Element die Breite anzugeben.

also ich kopiere meine seite NET in das vorhandene Adressfeld bei
The W3C CSS Validation Service
und dann wird die Warnung ausgegeben!
Das ist aktuell nicht mehr so. Wobei du hier ohne Probleme eine Breite in Prozent angeben könntest
Wenn ich eine Breite in Prozent angebe, dann sind die Links nicht mehr symmetrisch, also sie haben nicht mehr den gleichen Abstand links und rechts zum Rand!
 
also ich kopiere meine seite NET in das vorhandene Adressfeld bei
The W3C CSS Validation Service
und dann wird die Warnung ausgegeben!
Wenn du auf den Link in meinem Post gehst, sieht du das das nicht so ist. Dort sagt mir der Validator das alles i.O. ist

Wenn ich eine Breite in Prozent angebe, dann sind die Links nicht mehr symmetrisch, also sie haben nicht mehr den gleichen Abstand links und rechts zum Rand!
Was ändert sich den am Abstand vom Rand wenn du eine Breite angibst? Nimm z.b. mal 20%, dann sieht's bei mir so aus, wie ohne .
 
ok, wenn ich aber nun die 20% definiere
Code:
div#nav li {
display: inline; 
float:left;
width:20%;
}
dann sieht das so NET
also am Link "Home" sieht man, dass dieser nicht mehr mittig ausgerichtet ist!
 
Du musst es auch angeben, dass er mittig angezeigt werden soll (display inline sollte überflüssig sein)
Code:
div#nav li {

float:left;
width:20%;
text-align:center;
}
 
aaah, wieder etwas gelernt, vielen dank! Sind dann die 20 % so zu verstehen, dass die Listenelemente je 20 % von 900 px sind, oder?

Code:
div#nav {
background: url(../images/nav_bg.gif) repeat-x;
width:900px;
height:40px;
margin-left:6px;
line-height:40px;
}
Die Angabe padding-left bzw. padding-right sind dann ja wohl auch überflüssig?
Code:
div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
padding-left: 20px;
padding-right: 20px;
}
 
Ja, die 20% sind 20% von dem übergeordneten container. Und ja, die padding Werte sind auch überflüssig, hab ich vorhin nicht gesehen.

EDIT: und ich würd text-align in den Link reinsetzen, das hab ich vorhin auch nicht gesehen. Du willst ja den Text des Links zentrieren. Und auch das clear left ist hier falsch und kann weg.
 
eigentlich müsste ich doch noch den border:
Code:
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
der Liste zuordnen und nicht dem link, oder?
 
wozu würdet ihr mir raten.............soll ich den border in der Liste definieren
Code:
div#nav li {
float:left;
width:178px;
text-align:center;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}

oder in in den Links a
Code:
div#nav a {
display:block;
clear:left;
text-decoration: none;
color:#ffffff;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}
Was ist professioneller bzw. css-konformer?
 
"CSS konform" ist beides, was du lieber machen möchtest, bleibt in dem Fall dir überlassen. Ich würde mir die Frage stellen: Wozu gehört der Rahmen? Zum Link oder zum Listeneintrag?
 
ich habe festgestellt, wenn ich die Variante wähle mit dem Listeneintrag:
Code:
div#nav li {
float:left;
width:180px;
text-align:center;
border-right-style: solid;
border-width: 1px;
border-color: #ffffff;
}
Dann wird das letzte Listenelement in die nächste Zeile verschoben. Kannst du mir sagen warum?
Ich finde den Fehler nicht! NET
 
Stimmt, weil er Border zu der Breite dazu addiert wird. Insofern wäre es doch besser den Border dem Link zu geben und die Breite der Listenenträge dann wieder in Prozent
 
Zurück
Oben