alternative zu div align (und überhaupt Menuaufbau)

[Marc]

Also, ich bin totaler neuling in Sachen CSS. Meine frage ist nun ob mein Aufbau überhaupt was taugt und welche Alternative es zu "div align" gibt, daß mir beim check als veraltet angezeigt wurde.

Das steht zum beispiel in der Css-Datei für ein Menu:

.menulinks {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 12px;
 font-style: normal;
 line-height: normal;
 font-weight: normal;
 font-variant: normal;
 text-transform: none;
 color: #000000;
 background-attachment: fixed;
 background-color: #CCCCCC;
 background-image: none;
 background-repeat: no-repeat;
 background-position: left 57px;
 text-align:center;
 padding: 1%;
 height: 5%;
 width: 20%;
 border: thin solid #333333;
 list-style-type: none;
 clear: left;
 float: left;
 top: 0px;
 position: static;
 left: 50px;

und in der HTML-Datei rufe ich es so ab.

div class="menu1" id="test"
  div align="center" class="menulinks" Home

(hab die "<>"´s weggelassen)

Ist es überkompliziert wenn ich nun jeden Menupunkt extra per "div class" einsetze ?
Und wie ersetze ich div align ?
Muss ich dazu alles nochmals ummodeln ? also auch die Css-datei ?

[Der Martin]

Hallo Marc,

Also, ich bin totaler neuling in Sachen CSS.

das ist überhaupt keine Schande. Nur solltest du gerade in dem Stadium aufpassen und dich nicht gleich von den verbreiteten Krankheiten (z.B. Divitis) anstecken lassen.

.menulinks {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;

Schlecht. Schriftgrößen in px sind nicht skalierbar und damit vom Standpunkt der Usability zu vermeiden. Verwende stattdessen lieber die Einheiten % oder em für die Schriftgröße.

font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;

Das kannst du alles weglassen, da Defaultwerte.

color: #000000;
background-attachment: fixed;
background-color: #CCCCCC;
background-image: none;
background-repeat: no-repeat;
background-position: left 57px;

Wenn du *kein* Hintergrundbild willst, brauchst du auch nicht seine Ausrichtung, Wiederholung etc. anzugeben.

list-style-type: none;

Wie, list-style-type für ein div?

clear: left;
float: left;

Das meinst du nicht wirklich so, oder?

top: 0px;
left: 50px;
position: static;

Wenn du position:static angibst (Defaultwert), haben top und left keine Wirkung.
Alles in allem habe ich tatsächlich den Eindruck, dass du hier eine Liste von CSS-Eigenschaften abspulst, ohne zu verstehen, was du eigentlich tust.

div class="menu1" id="test"
  div align="center" class="menulinks" Home

Das align="center" wird doch sowieso durch text-align:center im CSS überschrieben (zufällig sogar mit dem gleichen Wert).

Ist es überkompliziert wenn ich nun jeden Menupunkt extra per "div class" einsetze ?

Nein. Aber warum die vielen divs? Genau das meinte ich mit Divitis. Eine Navigationsleiste ist zum Beispiel eine Liste von Links. Also warum zeichnest du sie nicht als Liste aus? Ein div-Element sollte nur die letzte Zuflucht sein, um andere Elemente zu gruppieren, wenn es kein besser geeignetes HTML-Element dafür gibt.

Und wie ersetze ich div align ?
Muss ich dazu alles nochmals ummodeln ? also auch die Css-datei ?

Besser is' das.

Schönen Abend noch,
 Martin

PS: Du plenkst.

[Gunnar Bittersmann]

Hello out there!

Und wozu red ich mir da auch noch den Mund fusslig?

See ya up the road,
Gunnar

[Gunnar Bittersmann]

Hello out there!

font-size: 12px;

Schriftgrößen solltest du nicht in Pixel angeben, sondern in em oder %, oder auch gar keine Angabe machen. Dann sind sie für alle Nutzer ihren Bedürfnissen entsprechend einstellbar.

font-style: normal;
line-height: normal;
font-weight: normal;
font-variant: normal;

Das dürften alles Defaultwerte sein, die Angaben sind also überflüssig.

background-attachment: fixed;
background-color: #CCCCCC;
background-image: none;
background-repeat: no-repeat;
background-position: left 57px;

Da du kein Hintergrundbild, sondern lediglich eine -farbe hast, sind alle Angaben außer jener überflüssig.

text-align:center;

Da hast du doch deine gewünschte Zentrierung! (*)

list-style-type: none;

list-style-type für ein div? Aber lass das mal so stehen, das wirst du gleich brauchen. (**)

top: 0px;
position: static;
left: 50px;

position: static ist ebenfalls default, die Angabe also überflüssig. top und left wirken nur bei von static abweichender position-Eigenschaft, die Angaben sind also auch überflüssig. [CSS2 §9.3]

div class="menu1" id="test"
  div align="center" class="menulinks" Home

Diagnose: klarer Fall von Divitis. Ist aber heilbar:

[code lang=html]<ul class="menu1" id="test"> <!-- brauchst du Klasse und ID? -->
  <li>Home</li>
  <li><a href="foo">Foo</a></li>
</ul>

(**) da die Liste jetzt eine Liste ist, bei der du keine Bullets haben möchtest.

Eine Klasse für alle li ist nicht erforderlich, da du die mit dem http://de.selfhtml.org/css/formate/zentrale.htm#verschachtelte_elemente@title=Nachfahrenselektor auswählen kannst.

Und wie ersetze ich div align ?

(*) hast du doch schon.

See ya up the road,
Gunnar

PS: Du plenkst.

[Der Martin]

Hallo Gunnar,

ich werde den Eindruck nicht los, dass dein Posting -von ein paar Formulierungen abgesehen- ein Duplikat von meinem ist. Zufall?

PS: Du plenkst.

Das habe ich auch exakt so drunterstehen. ;-)

Schönes Wochenende noch,
 Martin

[Gunnar Bittersmann]

Hello out there!

ich werde den Eindruck nicht los, dass dein Posting -von ein paar Formulierungen abgesehen- ein Duplikat von meinem ist.

Den Eindruck hatte ich auch, als ich dein Posting las – nachdem ich meins abschickt hatte. Deshalb meine Frage.

Willst du "(ZUR INFO) Doppelposting" druntersetzen?

Zufall?

Vorsehung?

PS: Du plenkst.
Das habe ich auch exakt so drunterstehen. ;-)

Das hast du bei mir abgeschrieben.

See ya up the road,
Gunnar