kostenloser Webspace werbefrei: lima-city


"Normale" Grafik strecken mit CSS statt im HTML-Tag

lima-cityForumDie eigene HomepageHTML, CSS & Javascript

  1. Autor dieses Themas

    ww-h

    ww-h hat kostenlosen Webspace.

    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
  2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

  3. 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. ^^
  4. 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
    class="bild"
    angegeben habe, muss es
    .bild
    heissen. Bei einer ID wird das über
    #bild
    gemacht.

    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
  5. Autor dieses Themas

    ww-h

    ww-h hat kostenlosen Webspace.

    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.:

    <!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>
    Hast Du es nur aus Gewohnheit/zur Anschaulichkeit eingebunden oder hat es einen Effekt in dem Beispiel?

    Beitrag zuletzt geändert: 10.2.2015 16:18:45 von ww-h
  6. matthias-detsch

    Kostenloser Webspace von matthias-detsch

    matthias-detsch hat kostenlosen Webspace.

    In diesem Fall hat das, wie ich sehe, keine Bedeutung, du könntest das auch weglassen.
  7. ww-h schrieb:
    Hast Du es nur aus Gewohnheit/zur Anschaulichkeit eingebunden oder hat es einen Effekt in dem Beispiel?
    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.

    Freut mich, dass die Erklärung verständlich war.

    Beitrag zuletzt geändert: 10.2.2015 16:57:28 von c143
  8. Autor dieses Themas

    ww-h

    ww-h hat kostenlosen Webspace.

    Okay, dann bin ich ja beruhigt, dass ich wenigstens das erkennen konnte.
    Tausend Dank!
  9. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

    lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

Login zum Webhosting ohne Werbung!