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

Bilder in HTML zentrieren

Status
Für weitere Antworten geschlossen.
E

easy1987

Neues Mitglied
Hi Leute,

ich habe diese Woche angefangen eine Page auf HTML zu programmieren, bin also ein absoluter Anfänger, da ich das auch vorher noch nie gemacht habe. Hatte mir auch ein paar Tutorials durchgelesen. Nun Hänge ich an einem Problem.

Ich habe auf der Startseite ein langes Bild, das ich gerne in der Mitte der Page haben möchte, weiß aber nicht, wie ich das umsetzen kann. Habe es erst mit der Eigenschaft align="center" versucht, aber das funktioniert bei Bildern nicht.

Vielleicht kann mir ja jemand von euch weiter helfen.

Danke schon mal im Vorraus.

bye easy
 
Wie und wo möchtest du es einbinden ? Ein Code-Abschnitt) währe hilfreich.
Im allgemeinen würde ich es jetzt so sagen:
Code: 
<div style="width: 100%; margin: 0 auto; text-align: center;">
 <img src="bild.gif" alt="Bild">
</div>

Die Styles lassen sich natürlich auch im HEAD oder einer extra CSS-Datei einbinden.
 
hi,

danke erstmal für die schnelle Antwort. Ich hatte so angefangen, dass ich im Body einfach folgendes eingetragen habe:

HTML: 
<img src="Willkommen1.png" alt="WillkommenLogo" />

[Edit]
Ich hab meinen fehler gefunden. Ich habe es jetzt wie folgt gemacht:
HTML: 
 <div align="center"><img src="Willkommen1.png" alt="WillkommenLogo" /></div>
[/EDIT]

bye easy
 
Du brauchst keinen zusätzlichen div. Schreib einfach in die css-Datei:
Code: 
.bildindermitte {display:block; text-align:center;  margin:0 auto;}
und in die html-Datei:
HTML: 
<img class="bildindermitte" src="Willkommen1.png" alt="WillkommenLogo" />
 
Ich hab meinen fehler gefunden. Ich habe es jetzt wie folgt gemacht:
Code: 
[COLOR=#000080]<div align=[COLOR=#0000ff]"center"[/COLOR]>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000ff]"Willkommen1.png"[/COLOR] alt=[COLOR=#0000ff]"WillkommenLogo"[/COLOR] />[/COLOR][COLOR=#000080]</div>[/COLOR]
Zum Vergrößern anklicken....
Naja, wobei das align-Attribut in der Abschnittskennzeichnung ist als deprecated (missbilligt) gekennzeichnet ist.
 
Das heisst, dass das Attribut noch zum HTML-Standard gehört, aber in Zukunft nicht mehr geben wird. Desweiteren darf es so nur in der HTML-Variante Transitional eingesetzt werden.

Mein Tip: Mach es gleich mit CSS-Stylesheets. Das gleicher Ergebnis erhälst du mit:
Code: 
[COLOR=#000080]<div style="text-align:[COLOR=#0000ff] center;"[/COLOR]>[/COLOR][COLOR=#800080]<img src=[COLOR=#0000ff]"Willkommen1.png"[/COLOR] alt=[COLOR=#0000ff]"WillkommenLogo"[/COLOR] />[/COLOR][COLOR=#000080]</div>
[/COLOR]
 
Zuletzt bearbeitet:
ich habe diese Woche angefangen eine Page auf HTML zu programmieren, bin also ein absoluter Anfänger, da ich das auch vorher noch nie gemacht habe. Hatte mir auch ein paar Tutorials durchgelesen. Nun Hänge ich an einem Problem.
Zum Vergrößern anklicken....

Ich wollte nur mal sagen, dass HTML & Co nichts mit programmieren zu tun hat, weil HTML eine Auszeichnungssprache ist.
Programmiersprachen und Auszeichnungssprachen sind nämlich 2 paar Schuhe. ;)
 
hi,

danke für den Link, aber den Spruch hättest du dir sparen können.

Sorry ich bin 1. Anfänger und 2. eine Frau. Demnach darf ich auch dumme Fragen stellen.

bye easy
 
folgendes z.b. zentriert einen Div horizontal:

CSS:
Code: 
DIV#deinDiv{
   width:Deine feste Breite;
   margin:0px auto;
}


HTML:
<div id="deinDiv">Dein Inhalt</div>
Zum Vergrößern anklicken....
Hättest Du mal Goooooogle bemüht, wärst Du sicher selbst drauf gestoßen. Auch als Frau...:roll:
 
hi,

aber warum soll ich denn stunden suchen, wenn ich hier ein tolles Forum mit netten Leuten habe, die mir auch weiter helfen. Dafür ist ein Forum doch da.

bye easy
 
Du willst nicht das man Dir hilft, sondern du möchtest alles vorgekaut bekommen. Der Tip mit dem margin:0px auto kam schon in der ersten Antwort.
 
hi,

das kann schon sein, aber was nutzt mir ein Qullcode, wenn ich ihn nicht verstehe und nachvollziehen kann???

Wenn man das nicht nachvollziehen kann, kann man es nicht anwenden oder weiter entwickeln...

bye easy
 
das kann schon sein, aber was nutzt mir ein Qullcode, wenn ich ihn nicht verstehe und nachvollziehen kann???
Zum Vergrößern anklicken....
Wenn ich das richtig verstehe, möchtest du diesen Code erklärt haben.
Code: 
margin: 0 auto;
Mit der ersten Angabe gibst du den Rand oben und unten zum Elternelement, bzw. zum Fenster an. Mit der Zweiten Angabe (auto) sagst du den Browser, wie groß der Abstand links und rechts zum Eleternelement bzw. Fensterrand sein soll. Wenn er Zentriert sein soll, gibst du auto an, der Browser rechnet diesen Rand also automatisch aus. Fehlt diese Angabe, so nimmt der Browser (vor allen der FF) einen festen eingestellten Rand von Links (wieviel das sind, kann ich jetzt nicht sagen).
Ich hoffe, ich hab Dir weitergeholfen.
 
hi,

ja danke du hast mir echt weiter geholfen. So kann ich das dann auch auf andere Problemstellungen anwenden. Habe die Seite jetzt auch weitgehends fertig.

bye easy
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben