Webstatt.org - Community seit 2006 - 2012 (2024?)

Codekorrektur

user-333
16.06.2006 20: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 user-158k!
Link: http://www.tr-art.de/demo/version4/
Avatar user-255
16.06.2006 20: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! lächeln
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-333
16.06.2006 20: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 traurig
Avatar user-255
16.06.2006 20: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 zwinkern

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.
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-333
16.06.2006 21: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!
Avatar user-255
16.06.2006 21:48
Original von user-333
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>

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 zwinkern
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-333
17.06.2006 12:08
Original von user-255
Original von user-333
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>

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!



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 Fettes Grinsen

    <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>
user-228
17.06.2006 12:41
http://de.selfhtml.org/css/eigenschaften/listen.htm#list_style_image !
Avatar user-255
17.06.2006 13: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 lächeln</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ß lächeln
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm
user-333
17.06.2006 22: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
Avatar user-255
18.06.2006 10:30
Original von user-333
habs nun teilweise geändert.

Also entweder ganz oder gar nicht. zwinkern

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 lächeln</i>

    </dt>

..und bitte keine inline style Angaben, das bläht nur den Code auf, was man mit CSS eigentlich zu
vermeiden sucht.
Those who can, do. Those who can't, teach. # Musik gehört dem Volk! # last.fm