• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Überschrift an der Seite von Bild

I-Tiger

I-Tiger

Mitglied
Hallo Leute,
ich bin vollkommen neu im Forum und hätte eine Frage bezüglich HTML. Ist es möglich eine Überschrift an der Seite eines Bildes zu positionieren, mit <h1> bekomme ich die Überschrift immer unter das Bild?
Hier mal mein HTML-Code
HTML: 
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/probe.css">
</head>
<body bgcolor="#561216">

<dl class="bildunterschrift">
   <dt><img src="Bilder/HLF.jpg" width=600 height=400 alt="Bildbeschreibung" title="Bildbeschreibung" align="top" hspace=20>hhhh</dt>
   <b><dd><p class="Bildunterschrift2">HLF der Hauptamtlichen Kräfte Schwedt/Oder</dd></b></p>
</dl>


                

</body>

</html>
Dazu kommt mein CSS-Code:
Code: 
.menue {
    color:black;
    text-decoration:none;
}
.menue:hover{
color:silver;
letter-spacing:5px;
font-style:italic;
}

dl.bildunterschrift {float: left; margin:10px 10px 10px 0;}
dl.bildunterschrift dd {margin:0; font-size:100%;}

.bildunterschrift2 {
text-align: center;
}
P.S. In Sachen CSS, bin ich teilweise komplett unbeleckt :).
MfG
 
Werbung:
Erstmal ist dein HTML Code ein wenig angestaubt. Design läuft immer über CSS. Auch die Hintergrundfarbe des bodys. dl wird für Definitionslisten verwendent, für sonst nichts. Bei dem img-Tag sind auch einige attribute, die da nicht hingehören, sie meine Lösung unten. Auch die Verschachtelung der Tags stimmt teilweise nicht (p-Tag). Versuche es mal so:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/probe.css">
    </head>
    <body>
        <figure>
            <img src="Bilder/HLF.jpg" width="600px" height="400px" alt="Bildbeschreibung" title="Bildbeschreibung" />
            <figcaption>
                <p class="bildunterschrift">HLF der Hauptamtlichen Kräfte Schwedt/Oder</p>
            </figcaption>
        </figure>
    </body>
</html>
Code: 
body{
    background:#561216;
}
figure{
    display:block;
}
figure img{
    float:left;
}
figcaption{
    float:right;
}
So oder so ähnlich sollte es funktionieren. Das ist jetzt die HTML5 lösung. Wenn du kein HTML5 einsetzen magst, ersetz einfach figure durch ein div (mit id oder class, mit der du dann im CSS figure ersetzt). Figcaption kann dann raus, und das ersetzt du im CSS durch .bildunterschrift.
 
Zuletzt bearbeitet:
Danke ersteinmal!
Und wie kann ich jetzt eine Bildunterschrift, sprich unter dem Bild erstellen?
Kannst du mir bitte nochmal kurz erläutern was <figure> und <figcaption> bedeutet? ;)
 
Werbung:
Hier eine Erklärung zu den Tags: http://html5-webdesign.de/figure.html
Sorry, hatte deine Frage nicht ganz verstanden. Also, du kannst einfach außerhalb des Figure-Elements eine Überschrift einfügen. Dann gibst du der mittels CSS ein float:left oder float:right, und dem figure-Element die entsprechend andere Richtung. Das sollte funktionieren.
 
Danke ersteinmal.
Könntest du mir bitte den Schnipsel schreiben den ich ergänzen müsste ;), hab mich nochnicht so wirklich mit den float's beschäftigt. Danke im Vorraus
 
So könnte es gehen. Wenn nicht, dann gib der Überschrift mal die Breite, die noch übrig bleibt (also body - figure = h1Breite).
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/probe.css">
    </head>
    <body>
    <h1>Überschrift</h1>
        <figure>
            <img src="Bilder/HLF.jpg" width="600px" height="400px" alt="Bildbeschreibung" title="Bildbeschreibung" />
            <figcaption>
                <p class="bildunterschrift">HLF der Hauptamtlichen Kräfte Schwedt/Oder</p>
            </figcaption>
        </figure>
    </body>
</html>
Code: 
body{
    background:#561216;
}
h1{
    float:right;
}
figure{
    display:block;
    float:left;
    width: 400px;
}
figure img{
    float:left;
}
figcaption{
    float:right;
}
 
Werbung:
Alles klar danke, jetzt ist soweit alles richtig, aber könnte man die Überschrift direkt neben dem Bild positionieren? Jetzt ist sie am äußersten rechten Rand :)
 
Geht immer noch nicht, habe jetzt die h1 im CSS-Bereich geändert und im HTML-Bereich geändert, aber es bleibt so:
HTML: 
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="css/probe.css">
    </head>
    <body>

    <p>
        <figure>
            <img style="float: left; margin-right: 10px;" src="Bilder/HLF.jpg" width="600px" height="400px" alt="Bildbeschreibung"  title="Bildbeschreibung"> <h1>Text an der Seite</h1>
            <figcaption>
               <p style="clear: both;">Text unter dem Bild</p>

            </figcaption>

        </figure>
      
    </body>
</html>
Und CSS:
Code: 
body{
    background:#561216;
}
h1{
    float:left;
}
figure{
    display:block;
    float:left;
    width: 400px;
}
figure img{
    float:right;
}
figcaption{
    float:left;
}
 
Werbung:
Hallo

Du

Code: 
...
<figure>
<img style="float: left; margin-right: 10px;" src="Bilder/HLF.jpg" width="600px" height="400px" alt="Bildbeschreibung"  title="Bildbeschreibung"> <h1>Text an der Seite</h1>
<figcaption>
...

hingegen Info von Trüffelkrieger

außerhalb des Figure-Elements eine Überschrift einfügen
Zum Vergrößern anklicken....

und

Code: 
...
<h1>Überschrift</h1>
<figure>
...


Gruss

MrMurphy
 
Jetzt geht es^^, aber die Schrift neben dem Bild ist teilweise im Bild ;). Kann man das noch irgendwie beheben?
 
Hallo

wahrscheinlich kann das behoben werden. Stell deine Seite bitte mal online bereit, sonst kann man nur blöd raten. Freeware-Anbieter gibt's heutzutage ja mehr als genug.

Gruss

MrMurphy
 
Werbung:
Hallo,

ich hab' mal die Feuerwehr als Beispiel genommen.

Du hast dem figure-Element eine Breite von 400px mit auf den Weg gegeben, dem darin liegenden img-Element jedoch eine Breite von 600px. Das kann nicht funktionieren.

Gruss

MrMurphy
 
Ich danke dir, es geht :). Wie bekomme ich nun einen fließenden Text unter der Überschrift? Es tut mir leid, dass ich soviele Fragen stelle =/.
 
Werbung:
Ich habe mir die Seite angeschaut und direkt wieder zugemacht. Grundlagenkenntnisse lassen sich sich in Forenposts nicht vermitteln.
 
Werbung:
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben