Willkommen in der Webstatt Zum Webstatt Blog und Stories
trefixxx am 16.06.06 22:21

Hallo,

ich möchte den Code meiner Website hier einmal vorstellen und bewerten lassen.
Es gibt noch einige Probleme, die ich einfach nicht lösen kann.

Die Darstellung im FF ist richtig, aber im Opera und IE sind die teilweise katastophal.

Bitte vermeidet es, mir einfach eine Zeile hinzuklatschen, in dem ein Fehler vorkommen soll. Ich habe den code nach meinem wissen erstellt und ich werde es auch nicht selbstständig lösen können (meistens auf jeden Fall), wenn mir jemand einen "in zeile 16 ist ein dummer fehler"-kommentar auftischt.

Bitte kommentiert den Fehler kurz, was man besser machen muss/sollte. Falls das einfach zu viel wird, könnt ihr auch gerne auf Erklärungsseiten verweisen - ich bin ja nicht lesefaul und interessenlos.

Ein großen Dank!
Link: http://www.tr-art.de/demo/version4/

netcup.de Warum gibt es hier Werbung?
milahu milahu am 16.06.06 22:34

Als einzigen Unterschied in der Darstellung zwischen Firefox und Opera konnte ich nur
Schriftgröße und Zeilenabstände ausmachen.
Internet Explorer hab ich hier grade nicht zur Verfügung. Kannst mal nen Schnappschuss machen?

PS: Doddal genial datt Ding! :)

trefixxx am 16.06.06 22:44

Hier ein Screenshot meines IE 6

Schaue dir auch mal bitte folgendes an:
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tr-art.de%2Fdemo%2Fversion4%2F

Dazu fällt mir leider auch keine Lösung ein :(

milahu milahu am 16.06.06 22:58

Mhh hast wohl was mit den Abständen vergurkt.. :-\
*{margin:0;padding:0}
...mit dem CSS Prolog kannst du dich von vom Browser definierten Standard-Werten lösen.
Vielleicht hilft's hier ja sogar ;)

Quote
document type does not allow element "span" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag

In XHTML Strict darfst du <span> nur innerhalb o.g. Elementen verwenden.

trefixxx am 16.06.06 23:32

also das formular hab ich nun in ein <fieldset> gesteckt. Siehe Link oben!
Mit dem einbinden der Grafik weiß ich nicht weiter. Welches element soll ich denn hier benutzen?

Genausowenig komme ich mit deiner anmerkung der margin-und paddingbefehle zurecht.


edit:
also laut dem validator ist nun alles strict, allerdings gibt es noch einige fehler im IE! siehe Screenshot oben! Es muss allerdings gesagt werden, dass es IE 6 ist!

milahu milahu am 16.06.06 23:48

Quote
Original von trefixxx
Mit dem einbinden der Grafik weiß ich nicht weiter. Welches element soll ich denn hier benutzen?

Du wirst zum <div>-Salat gezwungen! *g
<div style="width:100px;height:100px;background:url(globus.jpg) no-repeat"></div>
Quote
Genausowenig komme ich mit deiner anmerkung der margin-und paddingbefehle zurecht.

Ich seh grad: Du verwendest da eine Tabelle*, wo sie nicht hingehört! Da wäre doch eine
Definitionsliste (dl) nicht verkehrt!

Schöner ist es übrigens, wirklich nur dort <img> zu verwenden, wo die Grafik zum Inhalt gehört.
Ansonsten möglichst Hintergrundbilder nutzen. Beispiel:
#highlights{
text-indent:-999em; /* text rausschieben*/
width:300px;
height:50px;
background:url(highlight.jpg) no-repeat;
}
<schnipp />
<h2 id="highlights">Highlights</h2>


* ...und Tabellen machen ja bekanntlich immer Ärger ;)

trefixxx am 17.06.06 14:08

Quote
Original von milahu
[quote]Original von trefixxx
Mit dem einbinden der Grafik weiß ich nicht weiter. Welches element soll ich denn hier benutzen?

Du wirst zum <div>-Salat gezwungen! *g
<div style="width:100px;height:100px;background:url(globus.jpg) no-repeat"></div>
Quote
Genausowenig komme ich mit deiner anmerkung der margin-und paddingbefehle zurecht.

Ich seh grad: Du verwendest da eine Tabelle*, wo sie nicht hingehört! Da wäre doch eine
Definitionsliste (dl) nicht verkehrt![/quote]


Alles klar. Habe mal eine Liste erstellt, allerdings <li>. Wenn du mir jetzt sagst, wie ich anstatt des Punktes da meine Grafik hinsetzen kann, wäre ich dir sehr verbunden :D

<ul>
<li><h2>Forstwirtschaft</h2>
<h3>June 10th 2006</h3>
Weit hinten, hinter den Wortbergen, fern der Länder Vokalien und Konsonantien leben die Blindtexte.
Abgeschieden wohnen Sie in Buchstabhausen an der Küste des Semantik, eines großen Sprachozeans.
<p><img src="images/t_link.gif" alt="Topic link" />&nbsp;<a href="#">Read more</a></p></li>
</ul>

leo am 17.06.06 14:41

http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_image !

milahu milahu am 17.06.06 15:19

Die anderen Überschriften solltest du auch noch in dem Stil ersetzen und nebenbei noch die Tabelle
ersetzen -- wie gesagt: Definitionslisten eignen sich da tollst:
<dl>
<dt>
<h3 class="title">Dtl im WM-Fieber</h3>
<span class="cat">Gesellschaft</span>
<span class="comments">10 Kommentare</span>
<span class="date">Heute :)</span>
</dt>
<dd>
<p>Bla.. blubbdidupp</p>
<p>Bla.. blubbdidupp</p>
<p class="more">Mehr...</p>
</dd>
</dl>

Den hellen Hintergrundbalken verpasst du dem dt, mit float:right kommt das Datum nach rechts und
die orangen Akzente kannst mit border-left bzw. border-right setzen -- viel Spaß :)

trefixxx am 18.06.06 00:51

Link: http://www.tr-art.de/demo/version4/

habs nun teilweise geändert.

Den Balken habe ich so reingesetzt, wie du es vorgeschlagen hast, aber die schrift geht einfach nciht in die mitte.
Genauo wenig kann ich das IE-Problem lösen. Anscheinend wertet der IE 1 Pixel wie 2 Pixel - marin-left: 81px; wird also zu margin-left: 162px; (so sieht's auf jeden fall aus).

außerdem: wie krieg ich nun die fehler weg?
http://validator.w3.org/check?uri=http%3A%2F%2Fwww.tr-art.de%2Fdemo%2Fversion4%2F

milahu milahu am 18.06.06 12:30

Quote
Original von trefixxx
habs nun teilweise geändert.

Also entweder ganz oder gar nicht. ;)

So sollte das der W3 Validator durchgehen lassen:
<dt>
<b>Dtl im WM-Fieber</b>
<span class="cat">Gesellschaft</span>
<span class="comments">10 Kommentare</span>
<i>Heute :)</i>
</dt>

..und bitte keine inline style Angaben, das bläht nur den Code auf, was man mit CSS eigentlich zu
vermeiden sucht.

Creative Commons Lizenzvertrag
Alle Inhalte des Webstatt-Archivs stehen unter einer Creative Commons Namensnennung - Weitergabe unter gleichen Bedingungen 3.0 Unported Lizenz.

Impressum & Kontakt