[/dev/NULL]

Tja.. da isser wieder der Newbi, der es wissen will.

Ich hab vor/soll/muß eine Webseite bauen, leider mehr von Serveradministration den von Webdesign ne Ahnung.

Ein Design hab ich vorgegeben bekommen, sehen kann man das auch. Tja und da fängt dann bei mir daß große Fragezeichen an. Angeblich geht es ganz einfach mit Tables, aber ich hab irgendwo mal gelesen, das wäre nicht mehr in

Also hab ich CSS4you und CSS Praxis aufgerufen und per Try and Error versucht. Der erste Stand ist unter dem Link zu finden, aber glücklich bin ich damit nicht.

Eigentlich benutze ich jetzt nur divs statt Tables und so richtig hinhauen tut es nicht überall.. auf dem IE schauts mit am besten aus (in meinem Liebling Opera ist es ok, aber nicht gut, im FF ist das ergebniss mäßig).

Also meine Frage: wie müßte ich sowas richtig anpacken, wo hättet ihr divs, wo tables wo sonstwas genommen?

CSS/HTML ist valide, aber nicht schön, auch hier hab ich grundsätzliche Fragen:
Wann nutze ich besser in ID als immer nur class? Warum haben meine <a> in der Navigation einen Rahmen unten und oben (Opera und FF), warum kann ich das erste <a> nicht einrücken (weder textindent, noch padding?)
Warum ist nur bei FF unten rechts das Ding grau, wo doch das umschliessende Div weißen Hintergrund hat?

Wer tauschen will: biete rel fundiertes Wissen über Serverbetrieb unter Debian

Jan

[fricca]

Zitat von /dev/NULL

Also meine Frage: wie müßte ich sowas richtig anpacken, wo hättet ihr divs, wo tables wo sonstwas genommen?

Du hast etwas sehr viele divs.
Der Zweck eines div-Elementes ist es nur, andere Elemente zu Gruppen zusammenzufassen.
Ein div selbst hat keinerlei Bedeutung.
Stichwort: semantisches Markup
http://www.vorsprungdurchwebstandard...scher-code.php
http://www.vorsprungdurchwebstandard...trocoding.html

Tabellen brauchst du nur für tabellarische Daten

Wann nutze ich besser in ID als immer nur class?

Eine ID identifiziert ein Element eindeutig in einem Dokument.
z.B. #navigation, #content, #footer
IDs dienen auch als Ziel für Sprunglinks.

Du solltest dich mehr mit Selektoren auseinandersetzen.
Die meisten deiner Klassen sind überflüssig - und Benennungen wie .padd-left18 sind sehr ungünstig. Was machst du, wenn der Kunde plötzlich 20px haben will?
http://www.informit.com/articles/article.asp?p=170514


Mal ein Beispiel für eine Navigation:
sinnvolles Element für eine Navigation ist eine Liste (Auflistung von Links)

<ul id="navigation">[*]home[*]services
    [...][/list]

Für die Gestaltung des Menüs per CSS bieten sich jetzt Nachfahrenselektoren an:
#navigation li {padding-left:1em;}
#navigation li a {...}

Klassen sind erst dann nötig, wenn sich einige Elemente anders verhalten sollen als die anderen gleichartigen:
p {color:black;}
p.wichtig {color:red;}

Warum ist nur bei FF unten rechts das Ding grau, wo doch das umschliessende Div weißen Hintergrund hat?

.mysite ist doch das umschließende Element? Da sehe ich keine Hintergrundfarbe.

HTH
fricca

[/dev/NULL]

Ohh das hilft schonmal.. danke, werde mich mal daran machen.

Ich weiß das ich viele Divs habe, aber bei den meisten(=) fiel mir dann keine bessere Lösung ein.. ich braiche (denke ich) den für den schatten außen rum, bei den Textboxen (jaja da ist noch was im argen) hab ich es sonst nicht hinbekommen, das die einen links die anderen rechts floaten und eine durchgehend farbige Titelleiste haben.

Egal.. ich werde mir mal die Navigation vornehmen und dann noch was über Selektoren lesen. Danach melde ich mich wieder

DANKE!
Es hat geholfen.. hoffe ich *g*
Jan

[fricca]

Zitat von /dev/NULL

ich braiche (denke ich) den für den schatten außen rum

Auch body kann ein Hintergrundbild bekommen...

Vergiss erstmal die divs - strukturiere deinen Code semantisch sinnvoll, dann erst mach dir Gedanken darüber, welches Element welches Aussehen bekommen soll.

[/dev/NULL]

Zitat von fricca

Auch body kann ein Hintergrundbild bekommen...

Jep.. ich weiß, allerdings ist mir keine gute Idee gekommen, wie ich dann sagen kann: hintergrund grau, bild in der Mitte genau um die Seite rum..
spätestens wenn ich die Seite groß mache verschiebt er mir den Hintergund - ich will ja die Siete gern zentriert haben..

Aber Du hast schon recht.. ich schau mal wegen Strukturierung dann schreib ich nochmal.

[fricca]

background-position?

[/dev/NULL]

.. Du hast natürlich recht.. mit nem repeat-y und position center geht es wunderbar.. *grummel* da hätte ich ja auch vorher drauf kommen können.

Hab jetzt schon etwa 10 Divs aus meiner Suppe entfernt, ein paar wie z.B. das was um Angebot und Bild war hab ich behalten - bzw fiel mir da auch keine gut semantik für ein. ich mach da morgen mit weiter und stell es dann (noch ohne style) zur Kritik.. und nerv mit mehr fragen.

Danke und gute Nacht

[/dev/NULL]

So hab dann mal ein bischen gewerkelt mein Ding von mehr oder weniger allen divs befreit und mach mich jetzt an die Styles..


Ich hoffe das Ding ist jetzt semantisch genug (http://rootsvr.de/neueSite/index_semantisch.htm) mehr ist mir zumindest nicht eingefallen, aber jetzt kommen die Stilfragen *g*

1: wie bekomme ich AGB/KONTAKT/IMPRESSUM rechts an den rand den rest links? mit float:left // float:right hatte ich keinen erfolg

und generell: wenn ich jetzt z.B. von der Navi nur das linkeste Element tiefer einrücken will, wie mache ich das im style am besten? eigene class/ID?

2: Wie bekomme ich den Text 'XL Webspace ..." unter das "Angebot" zZ ist das h1 einfach sehr groß und hat nen Backgroundbild, oder wäre hier ein div doch angebracht?

3: Wie bekomme ich die Texte schön neben/untereinander (siehe ursprungsseite) geht das ohne divs?

4: Wo kommen im footer die Umrandungen der Bilder/Links im IE und FF her, bzw wie bekomme ich die weg?


Fragen über Fragen..

[fricca]

Zitat von /dev/NULL

Ich hoffe das Ding ist jetzt semantisch genug

Hmm.
<span class="text-box">
Das ist ein klassischer Fall für ein p-Element!

alt="Rootsvr.de Logo"
Sinnvoller wäre: "Rootsvr.de - die Wurzel ..."

1: wie bekomme ich AGB/KONTAKT/IMPRESSUM rechts an den rand den rest links?

Da ist ja nicht wirklich viel Platz für eine Aufteilung... Probier auch mal aus, was passiert, wenn der Benutzer im Browser die Schrift vergrößert. [um Rundungsfehler in einigen Browsern zu vermeiden, solltest du die Schriftgröße in body auf 100.01% setzen]
Ich würde fürs Menü display:inline (statt float) einsetzen (float ohne width macht Probleme in einigen Browsern).
text-align:right im ul und mit Hilfe einer Klasse den gewünschten Abstand zw. AGB usw. erzeugen.

Setz mal mit * {margin:0; padding:0;} alle Default-Randabstände der Browser auf Null.

BTW: display:box gibt es nicht.

2: Wie bekomme ich den Text 'XL Webspace ..." unter das "Angebot" zZ ist das h1 einfach sehr groß und hat nen Backgroundbild, oder wäre hier ein div doch angebracht?

Ein div ist immer dann angebracht, wenn es mehrere Elemente sinnvoll zusammenfasst...
Ist diese h1 wirklich die Seitenüberschrift?

3: Wie bekomme ich die Texte schön neben/untereinander (siehe ursprungsseite) geht das ohne divs?

Nein, das geht nicht ohne divs. Divs sind nicht böse, wenn sie bestimmungsgemäß eingesetzt werden

4: Wo kommen im footer die Umrandungen der Bilder/Links im IE und FF her, bzw wie bekomme ich die weg?

#footer a img {border:none;}

[/dev/NULL]

Zitat von fricca

Hmm.
<span class="text-box">
Das ist ein klassischer Fall für ein p-Element!

alt="Rootsvr.de Logo"
Sinnvoller wäre: "Rootsvr.de - die Wurzel ..."

Hmm könntest recht haben *fixed*

1: wie bekomme ich AGB/KONTAKT/IMPRESSUM rechts an den rand den rest links?
Da ist ja nicht wirklich viel Platz für eine Aufteilung... Probier auch mal aus, was passiert, wenn der Benutzer im Browser die Schrift vergrößert. [um Rundungsfehler in einigen Browsern zu vermeiden, solltest du die Schriftgröße in body auf 100.01% setzen]
Ich würde fürs Menü display:inline (statt float) einsetzen (float ohne width macht Probleme in einigen Browsern).
text-align:right im ul und mit Hilfe einer Klasse den gewünschten Abstand zw. AGB usw. erzeugen.

Schriftgröße 100.01.. ok.. wenn Du das sagst
display inline.. ok.. die Ränder geb ich dann per class und definiere da nen Padding.
EDIT1: Padding geht nicht.. margin geht!
EDIT2: geht anscheinend auch nur im IE und FF, gibt es da ne Opera Lösung?

Setz mal mit * {margin:0; padding:0;} alle Default-Randabstände der Browser auf Null.

Das hatte mir noch gefehlt.. hatte mich die ganze Zeit gewundert wieso ich z.B. oben und unten noch ein paar Pixel zuviel hatte.

BTW: display:box gibt es nicht.

jaja ich weiß ka was mich geritten hat, das Block ist dann eh rausgefallen

2: Wie bekomme ich den Text 'XL Webspace ..." unter das "Angebot" zZ ist das h1 einfach sehr groß und hat nen Backgroundbild, oder wäre hier ein div doch angebracht?
Ein div ist immer dann angebracht, wenn es mehrere Elemente sinnvoll zusammenfasst...
Ist diese h1 wirklich die Seitenüberschrift?

Ok.. das scheint mir dann mal sinnvoll zu sein. naja es ist keine Überschrift, aber ist es denn semantisch korrekt jetzt da nen h2 oder hX zu nehmen, wenn ich kein h1 habe? und im gewissen sinn ein 'tada-hier ganz toll und wichtig' - Text ist es ja schon.

3: Wie bekomme ich die Texte schön neben/untereinander (siehe ursprungsseite) geht das ohne divs?
Nein, das geht nicht ohne divs. Divs sind nicht böse, wenn sie bestimmungsgemäß eingesetzt werden

ok.. dann hab ich ja schonmal ne gewisse Vorlage.

4: Wo kommen im footer die Umrandungen der Bilder/Links im IE und FF her, bzw wie bekomme ich die weg?
#footer a img {border:none;}

Thanks.

dann hab ich ja wieder was zu tun.. ich danke! Update gibt es dann vermutlich morgen ..