umstieg auf xhtml und css gründlich misslungen

[Henrik]

im iexplorer 5 passte alles, jetzt in firebird bleibt nur noch ein verhackstücktes etwas übrig.
fehler:
1) <hr /> trennlinien werden nicht angezeigt
2) der "content" container wird nicht neben, sondern unter
dem menü angezeigt (falsche pixelangaben? - wie gesagt, im
iexplorer geht es)
3) der <img /> tag im titel wurde nicht berücksichtigt (das
bild existiert zwar noch nicht, aber es sollte ja
wenigstens ein rahmen zu sehen sein)
4) diverse Andere (http://validator.w3.org/check?uri=http%3A%2F%2Fbrede10c.userhost.de%2Findex_css.html&charset=iso-8859-1+%28Western+Europe%29&doctype=XHTML+1.0+Strict&verbose=1)

[edit: für die, die es noch nicht gesehen haben: die url isthttp://brede10c.userhost.de/index_css.html]

[Nase]

Ich habe mal probiert, deine Seite etwas umzuschreiben. Allerdings stoße ich dabei auf Probleme, die ich zur Zeit nicht beheben kann. Das größte Problem ist, dass Firefox einfach nicht den äußeren Container dem Inhalt in der Höhe anpassen will. Warum das so ist? Wenn ich das wüsste. Ich teste noch mal ein bisschen.

[Henrik]

ich hab für den äußeren container höhe 100% angegeben, damit auch bei auflösungen höher als 1280x960 die website nicht oben am browserfenster klebt, sondern sich über die gesamte höhe zieht. liegt es vielleicht daran?

[Nase]

Nein. Normal müsste sich der äußere Container an dem Inhalt ausrichten. Demnach müsste dieser mindestens so hoch sein, wie das Menu, aber auf keinen Fall kleiner.

[Endorphine]

Was ist/war denn die Vorlage für diese Seitenversion?

Ich kann dir wirklich nur empfehlen, XHTML und CSS von der Pike auf neu zu lernen. Du gehst einen viel zu schweren Weg, in dem du es dir vermeintlich leichter machen willst... Die meisten Fehler sind vermeidbar und werden erst gar nicht gemacht, wenn erst mal ein solides Grundwissen vorhanden ist.

Ich wäre an deiner Stelle auch vorerst bei 4.01 transitional geblieben und hätte das valide geschrieben. Dann auf 4.01 strict umschalten und wieder Validität herstellen. Dazu muss man dann Markup und Layout möglichst vollständig trennen (externes Stylesheet und div/span, welche über Klassen/IDs mit CSS gestyled werden). Ich denke dass du es dir in der Form mit XHTML nur unnötig schwer machst und den zehnten vor den ersten Schritt gehen willst.

[Nase]

@ Endorphine: Vielleicht kannst du ihm ja trotzdem bei seinem Problem helfen. Der Fehler ist leicht reproduzierbar. Er hat ein div als übergeordnetes Element. In diesem div sind zwei weitere, eins für das Menu, das andere für den Inhalt. Das Menu müsste ja float: left; als Eigenschaft haben, damit es links und das anderes div daneben dargestellt wird. Im Internet Explorer und in Opera kein Problem. Doch bei Firefox sieht es so aus, dass, wenn das Menu höher ist als der Inhalt, das übergeordnete div nicht in der Höhe vergrößert wird, sondern die Höhe beibehält, die der Inhalts hat. Insgesamt recht seltsam und ich weiss auch nicht, was daran falsch sein soll.

[Aqualon]

The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements. (http://www.w3.org/TR/CSS2/visuren.html#propdef-float)

Der Content ist einfach zu breit. Du musst die Breite auf 565px setzen, dann klappt es auch in Mozilla.

Aqua

[Nase]

Original geschrieben von Aqualon
The right outer edge of a left-floating box may not be to the right of the left outer edge of any right-floating box that is to the right of it. Analogous rules hold for right-floating elements. (http://www.w3.org/TR/CSS2/visuren.html#propdef-float)

Der Content ist einfach zu breit. Du musst die Breite auf 565px setzen, dann klappt es auch in Mozilla.

Aqua Das löst sein Problem aber auch nur zu einem geringen Teil. Guck dir diese Seite (http://brede10c.userhost.de/index_css.html) mal im Firefox an.

[Henrik]

ja, wie gesagt, es habert nicht nur am content container sondern auch an den nicht dargestellten <hr /> tags und dem logo.
was xthml angeht: endorphine schreibt ja in xhtml, endorphine hat ahnung, also versuche ich von ihm zu lernen - :-)

[Aqualon]

Die Trennlinie muss folgendermaßen aussehen, um angezeigt zu werden.

<hr style="background-color: rgb(255, 200, 0); width: 563px; height: 3px;">

Die Farbe wird nur als background-color erkannt und nicht als color und das noshade="noshade" ist auch nicht gerade gültiges XHTML Transitional 1.0, sondern wohl proprietärer IE-Code.

Der <img>-Tag wird schon richtig verarbeitet. Das Bild wird nicht gefunden, deswegen wird dort der Inhalt des Alt-Tags angezeigt. Dass der Rahmen nicht angezeigt wird, liegt daran, dass "img {border:none;}" im CSS gesetzt ist.

Die ganzen Fehler im Validator sind meistens Syntax-Fehler. Bei XHTML Transitional 1.0 müssen alle Tags geschlossen sein, also bspw. <img />< <hr /> oder <br />

Ausserdem würde ich alle <p>-Tags kategorisch weglassen, wenn sie genausogut durch <br /><br /> ersetzt werden können.

Aqua

Edit: Hab gerade festgestellt, dass der IE da nicht mitmacht.
Edit2: Border muss doch rein:
<hr style="border:none; color: rgb(255, 200, 0); background-color: rgb(255, 200, 0);
width: 563px; height: 3px;">

[Aqualon]

Das Problem mit der Höhe habe ich auch noch nicht gelöst...

Mal weiterprobieren.

Aqua

Edit: Wenn du dem Hauptcontainer das Attribut position:absolute verpasst und height:auto anstatt height:100% nimmst, ist immerhin der Hintergrund komplett durchgängig. Allerdings klebt dann die Seite am linken Bildschirmrand. Eine Möglichkeit zur Zentrierung fällt mir gerade auch nicht ein.

[BennY85]

Original geschrieben von _3dfx_rulez
im iexplorer 5 passte alles, jetzt in firebird bleibt nur noch ein verhackstücktes etwas übrig.
fehler:
1) <hr /> trennlinien werden nicht angezeigt
2) der "content" container wird nicht neben, sondern unter
dem menü angezeigt (falsche pixelangaben? - wie gesagt, im
iexplorer geht es)
3) der <img /> tag im titel wurde nicht berücksichtigt (das
bild existiert zwar noch nicht, aber es sollte ja
wenigstens ein rahmen zu sehen sein)
4) diverse Andere (http://validator.w3.org/check?uri=http%3A%2F%2Fbrede10c.userhost.de%2Findex_css.html&charset=iso-8859-1+%28Western+Europe%29&doctype=XHTML+1.0+Strict&verbose=1)

[edit: für die, die es noch nicht gesehen haben: die url isthttp://brede10c.userhost.de/index_css.html]

ohne mal die vorherigen dinge zu lesen.
1.) <hr /> benutzt man nicht, es ist nicht logisch, nimm einen absatz und gib ihm einen border-bottom: 1px solid color;

2.) float: left hilft evt? div's sind blockelemente!
3.) <img /> ist nich valid es fehlt src und alt

4.) anzusehn hab ich garkeine lust :D

[Nase]

Zentrierung funktioniert auch im Firefox, wenn du dem body-Tag margin: 0px und padding: 0px verpasst. Ansonsten so wie im Code von _3dfx_rulez.

Edit: Allerdings geht das nur ohne position: absolute;. Übrigens zerreißt mir das das Design im IE.

[Endorphine]

Original geschrieben von Aqualon
Ausserdem würde ich alle <p>-Tags kategorisch weglassen, wenn sie genausogut durch <br /><br /> ersetzt werden können. Öööh... Ich sehe es genau andersrum: warum sollte man einen harten Zeilenumbruch erzwingen und den Browser im Unklaren darüber lassen, was man bezweckt, wenn man auch explizit sagen kann, dass ein bestimmter Textabschnitt ein Paragraph ist, der an einer bestimmten Stelle beginnt und an einer bestimmten Stelle endet?

Das sagt auch schon die Richtlinie der Wohlgeformtheit für XHTML (aus XML abgeleitet). Wenn man mit harten Zeilenumbrüchen formatiert kann man auch Text in der Luft hängen lassen - frei im Body. Und das ist nicht wohlgeformt. Unausgezeichneter Inhalt ist kein HTML im Sinne der Erfinder (zum Glück wird er aber mit dem default UA-Stylesheet dargestellt).

Zeilenumbrüche sind genaugenommen auch Layout, kein Markup. Für Layout ist aber CSS da... Ein Paragraph <p></p> ist dagegen sauberes Markup. <br /> und <hr /> sollte man deshalb so selten wie möglich einsetzen.

Edit: Ach ja, ein "<br /><br />" verbraucht 12 Zeichen, ein <p></p> gerade mal sieben Zeichen. Formatierung mit harten Zeilenumbrüchen ist also auch bloat. *eg* Des weiteren können selbst uralte Browser, die HTML tatsächlich als SGML-Anwendung betrachten nicht über ein sauberes <p></p> stolpern. Über einen "hoffentlich ist's abwärtskompatibel" harten Zeilenumbruch nach <br /> aber schon. :D

[Endorphine]

Original geschrieben von _3dfx_rulez
was xthml angeht: endorphine schreibt ja in xhtml, endorphine hat ahnung, also versuche ich von ihm zu lernen - :-) Danke für die Blumen. ;)

Ich sehe mich aber eher als Anfänger, der selbst noch nicht sehr weit gekommen ist (von Javascript als browserseitiger Skriptsprache oder PHP als serverseitiger hab' ich z. B. noch null Plan). Wenn du echte Webauthoringcracks sehen willst kann ich dir de.comm.infosystems.www.authoring.misc und/oder de.comm.infosystems.www.pages.misc empfehlen.

Edit: Die Forensoftware will bei jedem "www" einen Link daraus machen. Es sind jedoch Newsgroups gemeint. :)

[Henrik]

was das noshade:noshade angeht: http://selfhtml.teamone.de/html/xhtml/unterschiede.htm#leere_elemente

<img /> ist nich valid es fehlt src und alt
ja, weiß ich, ich hab ja auch immer src alt und auch title mit drin, habs hier nur nicht reingepinnt, weil sie ja eigentlich - glaub ich - nicht zum tag gehören, sondern attribute sind.

und was die farben angeht: wieso soll ich rgb [blablabla) nehmen? ist #123456 nicht valide?
hab ich bisher immer benutzt und war io, auch der validator spuckt keinen fehler aus.

[BennY85]

zum thema img. jo sry habs mir halt nicht ganz angeschaut. die attribute sind aber pflicht wenn du valid schreiben willst, aber das scheinst du ja beachtet zu haben :)


zum thema zentrierung von div ein kleines beispiel :) :

<head>
<style>

body {text-align:center;}
#container {m argin-left: 0 auto; margin-right: 0 auto; }

</style>
</head>

<body>

<div id="container">
<!-- CONTENT -->
</div>

</body>


#123456 solltest du nicht nehmen weil es eine 32Bit Farbangabe ist und man immer vom worst-case ausgehen sollte = User hat seinen Bildschirm auf 8Bit (256 Farben) eingestellt.

darum: #003366 #AACCFF sowas wäre okay. immer in 3er schritten :)

[Nase]

Original geschrieben von BennY85
zum thema zentrierung von div ein kleines beispiel :) :
Gut, dass wir darauf noch nicht selber gekommen sind. Wenn du dir auch mal den Code von 3dfx_rulez angucken würdest, könntest du sehen, dass es da genau so auch drin steht. Leider verhindern einige weitere Styleangaben, dass Firefox die Zentrierung vernimmt. Diese Styleangaben sind aber notwendig, damit andere Probleme gelöst werden.

[HellHorse]

Original geschrieben von BennY85
darum: #003366 #AACCFF sowas wäre okay. immer in 3er schritten :)
Da kann man doch gleich #036 bzw #ACF nehmen, oder?

[mictasm]

Ja!

[BennY85]

Original geschrieben von Nase
Gut, dass wir darauf noch nicht selber gekommen sind. Wenn du dir auch mal den Code von 3dfx_rulez angucken würdest, könntest du sehen, dass es da genau so auch drin steht. Leider verhindern einige weitere Styleangaben, dass Firefox die Zentrierung vernimmt. Diese Styleangaben sind aber notwendig, damit andere Probleme gelöst werden.

wie gesagt es war ein beispiel, ab jetzt poste ich einfach nichtmehr in diesem beitrag und ende.

wenn andere styleangaben das verhindern weil sie gebraucht sind, dann ist der code schlecht...

und man sollte die ursache beheben und keine andere lösung suchen.

[Nase]

Original geschrieben von BennY85
wie gesagt es war ein beispiel, ab jetzt poste ich einfach nichtmehr in diesem beitrag und ende.

wenn andere styleangaben das verhindern weil sie gebraucht sind, dann ist der code schlecht...

und man sollte die ursache beheben und keine andere lösung suchen. Also Browser wechseln? Ok, alles klar.

[Henrik]

ja kommt, regt euch ab.
also neucoden, oder wie??
wundert mich eigentlich, da ich mir das ganze anhand der codebeispiele von www.css4you.de zusammengebastelt habe.

[Gast]

also was ist jetzt??
könnt ihr mir noch helfen?
_3dfx inna schule

[Aqualon]

Schau dir mal http://www.positioniseverything.net/piefecta-rigid.html

Die Seite ist vom Aufbau ähnlich zu deiner und vielleicht bekommst du es mit den Hinweisen auf der Seite hin, dass deine Seite so funktioniert wie gewollt.

Aqua

[Henrik]

danke, werds mal probieren