"Normale" Grafik strecken mit CSS statt im HTML-Tag
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
anschaulichkeit
ansinnen
aufbau
beginn
beispiel
code
datei
effekt
einbindung
element
frage
gewohnheit
konzentrieren
machen
realisieren
tag
tip
url
warnung
weglassen
-
Hallo zusammen,
ich bin noch ein Anfänger auf dem Gebiet, deswegen entschuldigt bitte die peinlichen tag/frage">Fragen.
Mein Problem: Ich habe vorhin eine selbstgedichtete HTML-Seite mit dem W3-Validator überprüfen lassen.
Die fehlerhafte Zeile:
<img src="blablabla.png" alt="Grafik mit Transparenz" align="center" width="100%">
Da waren die letzten beiden Attribute (align und width) als falsch markiert, ich solle das bitte in CSS machen.
Meine Frage: Warum und wie soll ich das machen?
Danke für jeden Tipp
LG -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Verzichte auf die Größenangaben innerhalb des IMG-Tags und definiere die Größen im Stylesheet. Der Validator akzeptiert nur absolute Werte in Pixeln. Dumm gelaufen, denn das läuft dem Ansinnen an responsive Webdesign zuwider. Manchmal muß man einfach die Meldungen des Validators ignorieren und seine Seite so bauen, daß sie vernünftig funktioniert. ^^
-
Und jetzt noch das wie:
Momentaner Stand:
<img src="blablabla.png" alt="Grafik mit Transparenz" align="center" width="100%">
Um das HTML Element per CSS anzusprechen, muss es identifiziert werden können. Die einfachsten Methoden sind über eine ID oder Class, wobei die ID eindeutig ist, also nur einmal vorkommt, die Class aber mehreren Elementen verteilt werden können.
Setzen wir also eine class:
<img src="blablabla.png" alt="Grafik mit Transparenz" class="bild" />
Das CSS muss natürlich an den richtigen Ort. Normalerweise wird das als .css Datei gespeichert und eingebunden, bei wenig Code kann das aber direkt in die .html Datei. So sieht z.B. der Aufbau dann aus:
<!DOCTYPE html> <html> <head> <title>Dein Titel</title> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> </style> </head> <body> </body> </html>
In den style Tag kommt jetzt dein CSS. Wie vorher erwähnt könntest du auch eine css Datei einbinden:
<link rel="stylesheet" type="text/css" href="deine_datei.css">
Konzentrieren wir uns jetzt aber auf den <style> Tag. Um eine Klasse anzusprechen verwendet man einen Punkt. Da ich im HTML
angegeben habe, muss esclass="bild"
heissen. Bei einer ID wird das über.bild
gemacht.#bild
Das wär dann also:
<style> .bild{ width: 100%; vertical-align: middle; } </style>
CSS kann natürlich noch mehr, aber mit ID und Class kommst du zu beginn sehr weit, bzw kannst theoretisch alles realisieren, nur gibt es bessere Wege dafür. Das wär jetzt aber zu viel auf einmal. Bei Interesse kannst du aber natürlich gerne fragen.
Unser Edergebnis ist also:
<!DOCTYPE html> <html> <head> <title>Dein Titel</title> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> .bild{ width: 100%; vertical-align: middle; } </style> </head> <body> <img src="blablabla.png" alt="Grafik mit Transparenz" class="bild" /> </body> </html>Und wir bekommen die Rückmeldung:
validator.w3.org sagt:
This document was successfully checked as HTML5!
Result: Passed, 2 warning(s)
Die zwei Warnungen liegen aber nicht am Code, sondern am Checker selbst.
Beitrag zuletzt geändert: 10.2.2015 9:21:26 von c143 -
Herzlichen Dank für Eure Hilfe!
@c143: Sehr schön, ausführlich und vor allem für Anfänger wie mich verständlich erklärt!
Alles klappt jetzt perfekt.
Ich bin begeistert und fast geschockt, wenn ich sehe, was Ihr Euch für eine Arbeit für mich macht!
Nur eine Frage habe ich noch: Was macht jQuery dort (Z. 6)?
c143 schrieb u. a.:
Hast Du es nur aus Gewohnheit/zur Anschaulichkeit eingebunden oder hat es einen Effekt in dem Beispiel?
<!DOCTYPE html> <html> <head> <title>Dein Titel</title> <meta charset="UTF-8"> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> .bild{ width: 100%; vertical-align: middle; } </style> </head> <body> <img src="blablabla.png" alt="Grafik mit Transparenz" class="bild" /> </body> </html>
Beitrag zuletzt geändert: 10.2.2015 16:18:45 von ww-h -
In diesem Fall hat das, wie ich sehe, keine Bedeutung, du könntest das auch weglassen.
-
ww-h schrieb:
Oh, mein Fehler, sry. Das ist einfach meine Vorlage die ich immer benutze um den HTML-Aufbau zu haben und die ich auch für dich kopiert habe. Den Script-Tag hab ich entfernt, die Einbindung für jQuery aber wohl vergessen. Kannst du natürlich löschen.
Hast Du es nur aus Gewohnheit/zur Anschaulichkeit eingebunden oder hat es einen Effekt in dem Beispiel?
Freut mich, dass die Erklärung verständlich war.
Beitrag zuletzt geändert: 10.2.2015 16:57:28 von c143 -
Okay, dann bin ich ja beruhigt, dass ich wenigstens das erkennen konnte.
Tausend Dank! -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
