JS: Ausfälle ; DESIGN: Was fehlt hier?

SideWinder

So also, das geht offenbar nur mit CSS wenn ich die TD-"Klasse" verändere, was wiederrum nicht per style="" funktioniert.

Also habe ich ab jetzt eine externe *.css-Datei.

Ist soetwas als Grundform schon gut, oder ist das grundlegend falsch? Und hat eine CSS-Datei keinen head oder soetwas? Fängt die gleich gnadenlos mit dem ersten Element an?

body { background-image : url (./pictures/background.jpg);
       font-family : sans-serif;
       font-size : medium;
       font-style : normal;
       font-variant : normal;
       font-weight : normal;
       letter-spacing : normal;
       position : absolute;
       text-align : left;
       text-decoration : none;
       text-indent : 0px;
       text-transform : none;
       vertical-align : baseline;
       white-space : pre;
       word-spacing : normal;
}

#head { position : absolute;
        border-color : black;
        border-style : inset;
        border-width : 2px;
        top : 20px;
        left: 20px;
        height: 100px;
        width: 980px;
}

#body { position : absolute;
        border-color : black;
        border-style : none;
        border-width : 2px;
        top : 140px;
        left: 20px;
        height: 500px;
        width: 980px;
}

#nav { position : absolute;
       border-color : black;
       border-style : inset;
       border-width : 2px;
       top : 0px;
       left: 0px;
       height: 340px;
       width: 175px;
}

#login { position : absolute;
         border-color : black;
         border-style : inset;
         border-width : 2px;
         top : 360px;
         left: 0px;
         height: 140px;
         width: 175px;
}

#main { position : absolute;
        border-color : black;
        border-style : inset;
        border-width : 2px;
        top : 0px;
        left: 195px;
        height: 500px;
        width: 785px;
}

#copyright { position : absolute;
             top : 645px;
             left: 20px;
             height: 23px;
             width: 980px;
}

Per id="bla" füge ich die Styles dann den einzelnen DIV zu. Die Body-Klasse soll mehr allgemein dienen, damit ich nicht immer alles angeben muss -> vererbt wird doch unter CSS oder?

BTW: Kann ich nun main zB noch Unterklassen hinzufügen, wie zB main.ueberschrift und main.text oder muss ich da wieder eigene bauen?

MfG SideWinder

[ Dieser Beitrag wurde am 16.05.2003 um 16:27 Uhr von SideWinder editiert. ]

flenders

btw: meistens nimmt man nicht id und # sondern class und . (id muss ja eindeutig im Dokument sein)

O'Dog

hatte dir vor 500 Jahren mal dzu ein Beispielcode gepostet Gibt es doch!

BTW. deine aktuelle navi funzt auch im moz net

bis dänn, O'Dog

SideWinder

@O'Dog: Jo, hatte ich ganz vergessen :). Aus der kann ich auch noch was rausholen.

@flenders: Die id ist bei mir eindeutig. Frage ist das Tag <body> und die ID body eindeutig oder nicht?

Also:

body {} und
#body {}

Wo sind weitere Vorteile von CLASS?

MfG SideWinder

flenders

du kannst eben mehrere Bereiche erstellen, die alle den selben Style verwenden, z.B. 20 verschiedene Textboxen alle mit class="textbox"
Ich denke mit dem boy und #body sollte es keine Probleme geben, bin mir aber nicht sicher (kannst aber doch auch einfach sicherheitshalben nen anderen Namen wählen)

SideWinder

Aha, also für TD, etc. dann lieber CLASS für DIV die alle einen einzelnen Style brauchen lieber ID

MfG SideWinder

SideWinder

Also JS ist raus. Habe jetzt O'Dogs Code etwas umgebaut: http://www.faulerhund.net/sidewinder/test .

Probleme

Seht euch mal den Unterschied IE zu Opera an - was kann ich tun, damit das gleich aussieht? Bei www.linuxfaqs.de gibts auch keine Probleme - die haben aber so ziemlich genau den gleichen NAV-Code wie ich nun :(.

Weitere Fragen:

Ist der Hintergrund nun angenehmer?
Was kann man sonst noch tun um das Design besser zu machen (Schriften werde ich noch ändern). Die c't gibts leider nicht mehr - ob man da was scannen könnte...

MfG SideWinder

[ Dieser Beitrag wurde am 17.05.2003 um 19:05 Uhr von SideWinder editiert. ]

[ Dieser Beitrag wurde am 17.05.2003 um 19:07 Uhr von SideWinder editiert. ]

O'Dog

Jap, im Mozilla sieht deine Seite jetzt schön schlicht aus

Hier ist ein umfangreiches Tutorial zu CSS von der iX http://www.heise.de/ix/artikel/2003/03/050/

So auf den ersten Blick würd' ich sagen das einer deiner Probleme die Vererbung von CSS innerhalb verschachtelter HTML-Tags ist.

O'Dog

SideWinder

Aha, aber welche Tags werden da vererbt dass der Opera so einen Mist daraus macht und der IE das perfekt darstellen kann?

---

Gibt es im Internet eigentlich auch Web-Design-Tutorials? In diesem Punkt habe ich nämlich dringendst Nachhilfe nötig :D.

MfG SideWinder

O'Dog

Original erstellt von SideWinder:
**Aha, aber welche Tags werden da vererbt dass der Opera so einen Mist daraus macht und der IE das perfekt darstellen kann?
**

Das liegt wohl daran das der IE das Falsch darstellt. Wenn du eine Standardkonforme Seite bauen willst ist es besser nicht zuerst im IE zu testen sondern Mozilla (Opera sollte es auch tun) und später nur die Bugs des IE zu berücksichtigen (eventuell ein paar Sachen rausnehmen). Der IE ist zu fehlertolerant.

Im Moz hat es beispielsweise einiges gebracht den Style "white-space : pre;"
aus dem Body herauszunehmen (da es im body definiert ist gilt dieser style auch für alle Tags innerhalb des bodies, wenn si denn nicht überschrieben wird). Wobei ich hier den Parameter "pre" nicht für sehr vorteilhaft halte, besser ist es Zeilenumbrüche mit "br" expliziet anzugeben.

O'Dog

SideWinder

Hab jetzt noch einiges geändert, was haltet ihr nun davon? Ist das CSS nun okay?

MfG SideWinder

SideWinder

BTW: Mit -moz-border-radius : 8px; lässt er mich nicht durch den CSS-Validator?!

MfG SideWinder

O'Dog

Original erstellt von SideWinder:
BTW: Mit -moz-border-radius : 8px; lässt er mich nicht durch den CSS-Validator?!

das ist auch nur für den Moz (erzeugt Runde Ecken, kein richtiges CSS) kann'ze rausnehmen

O'Dog

hmm, irgendwas stimmt noch net, der moz zieht das stylesheet nicht.
Vermutlich liegts nur daran das im link-Tag ein backslash statt ein slash steht!?

SideWinder

Fixed.

MfG SideWinder