Spaghetti Kot loswerden

Webdesign & Technik HTML & CSS
1

Hallo
Kleiner Geck am Rande mit der Überschrift ( aber die macht neugierig, oder? ) bin schon der deutschen Sprache mächtig. Spass beiseite, Ernst herbei.
Brauche mal einen Stupser, einen Tip, oder mal eine Vorlage für die Auslagerung von Bildgrössen, Abstände sowie alle weiteren Informationen zu den Bildern als externe css Datei.

Der Grund für meinen Wunsch ist den letzten Spaghetticode noch aus meinem Html Code zu entfernen. Das Programm was ich zur Optimierung benutze zeigt mir das noch als Fehler bzw. als Spaghetticode an. Ich habe so ein Beispiel schon mal im www gesehen aber ich finde es ums “Verrecken” nicht mehr wieder.

Meine Vorstellung wäre so

images.css
bild1 widht…
bild2 wight…
usw.

auf der Webseite denke ich müsste man nur noch

Link zum Bild </div bild1>eingeben und der Code bzw. die Bildangaben wären ausgelagert, oder?

Hat das jemand von Euch schon so gemacht und kann mir ein Beispiel zeigen, Grundkenntnisse sind bei mir schon vorhanden aber ein falsches Zeichen und aus Code wird Kot und die Sache funzt nicht und verursacht bei mir viel Freizeitverlust.

Für jede Hilfe und für jeden Hinweis bin ich dankbar.

Euer Frankieboy

2

Nun, CSS ist für das Layout zuständig.
Dort definiert man eher für Hintergrundbilder im Header, Navigation, Footer… etc.
Dort ist es ja in der Regel fix, um was für Elemente es sich handelt, z.B. ein Hintergrundbild für die Navigation wird dort im Element div.nav_img angegeben oder ähnliche Bezeichnungen. Dort sieht man dann häufiger einzelne kleine Grafiken für Farbverläufe, über dessen Abmessungen man sich schon vorher im klaren ist.

Aber deine Vorgehensweise mit den Div-Elementen und der scheinbar unbestimmten Anzahl an Bilder, kann ich nicht ganz nachvollziehen. Es wirkt als suchst du eine alternative zum HTML Element.
Wenn es sich bei dir um Bilder handelt, die im Content der Seite vorkommen. In Beiträge oder Texte oder ähnliches und somit mehr zum Inhalt, also dem „Vordergrund“ gehören, dann nutzt man eher das Element (mit dem alt Attribut).

Sonst zu deiner Frage:
Wenn du div Elemente in der Form

etc. nutzt, dann kannst du diese auch in der CSS Datei definieren. Allerdings muss da auch der Link zum Bild stehen, außer du definierst den Link direkt mit dem style Attribut.

mfg Balmung

3

Solche Tools zur Optimierung sind ganz nett für grobe Fehler, aber sie unterscheiden nicht zwischen sinnvoll und nicht sinnvoll. Abstände für Bilder, sofern sie immer gleich sind, kannst du über CSS einfach über

definieren. Aber die Bildgröße auszulagern ist eben nicht sinnvoll und du solltest sie deshalb dort belassen wo sie sind und den Fehler als Unzulänglichkeit des Tools abtun.

4

Hallo
Vielen Dank für die Antworten und habe jetzt mal “rumprobiert”, habe die Fehlermeldung die ja eigentlich gar keine ist sondern mehr ein Vorschlag Html Code zu verbessern und relevante Daten in Css auszulagern. Habe das etwas missverstanden und dachte es bezieht sich auf die Bildwerte und den Rand um das Bild, habe vorhin mal bei einem Bild zweiteres entfernt und die Meldung ist weg. Also lag wie so oft der Fehler bei mir und nicht beim Programm.

Nochmals Dank für die hilfreichen Antworten, hurra bin wieder einen Schritt weiter und etwas gescheiter. :wink:

Frank