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

anfänger braucht hilfe

Status
Für weitere Antworten geschlossen.
N

nedder

Neues Mitglied
ich bin ein absoluter anfänger und kapier einfach
nicht wie ich mit div tags inhalte praktisch
positionieren kann. hab mir zwar schon das ganze
theoretische durchgelesen, aber scheitere jetzt daran,
dass ich als erstes mal eine einfache grafik mittig
positionieren will und es nicht hinbekomme. kann
mir jemand erklären wie man hier konkret vorgeht?

danke
 
Werbung:
Also erstmal ist wichtig zu begreifen, dass man das Layout nicht mit <div> macht, denn HTML ist nur für die Semantik deiner Seite zuständig. Was du schon richtig erkannt hast, Layout macht man mit CSS. Um dein Bild mittig zu zentrieren, schreibst du in CSS
Code: 
img {margin: 0 auto;}
Da ein Image nun aber ein Inline-Element ist und diese in einem Block-Element stehen müssen (ab 1.0 Strict), ist die Frage, in welchem Zusammenhang dein Bild zum Rest der Seite steht. Ist es eines von mehreren Bildern, dann sollte es in einer Liste stehen (<ul>), gibt es zu den Bildern noch Beschreibungen, dann wäre eine Definitionsliste wohl angebrachter (<dl>).

Zum testen kannst du es auch in ein <div> packen.

Code: 
<div>
  <img src="" alt="" />
</div>
Code: 
div img {
  margin: 0 auto;
}
Für die Erklärung der CSS-Eigenschaften kannst du hier nachschauen CSS 4 You - The Finest in Stylesheets
 
hmm klappt nicht bei mir, stimmt das nicht so:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">

div img {
margin: 0 auto;
}
</style>
</head>
<body>

<div>
<img src="logo_l.gif" alt="" />
</div>

</body>
</html>
 
Werbung:
Ich hab noch vergessen zu erwähnen, dass du das Image noch zu einem Block-Element machen solltest (display: block), alternativ geht auch dem div text-align: center zu geben.
 
Mit
Code: 
margin: 0 auto;
werden Blockelemente mit fester Breite zentriert. Eine Feste Breite hat das Bild, aber ein Blockelement ist es nicht. Es müsste also entweder
Code: 
div img {
    display: block;
    margin: 0 auto;
}
oder
Code: 
div {
    text-align: center;
}
heißen.

Gruß
Junny

edit: Grr Thor, schon das zweite Mal jetzt! Das hat doch System... :-D
 
Werbung:
Werbung:
Dann sollte es auch funktionieren.

Ach du meinst das vertikale Zentrieren?
Das einzige, was mir einfällt, wäre
Code: 
div {display: table-cell;}
, allerdings kann das der IE nicht.
 
Zuletzt bearbeitet:
also ich habe wie gesagt zum obrigen code nur noch display: block;
in die style angabe hinzugefügt. vielleicht muss man ja noch was hinzufügen?
 
Werbung:
also das mit dem div {display: table-cell;}
geht bei mir auch nicht. aber wenn es eh nicht
für den ie geht is es sowieso nicht praxistauglich.

aber es kann doch nicht so schwer sein
(oder doch?) ein bild in der mitte des bildschirms
zu zentrieren...
 
Wie gesagt, horizontal ist kein Problem, das hast du ja auch schon hinbekommen, aber vertikal ist momentan noch nicht anders möglich, als mit table-cell. Javascript wäre evtl. noch möglich, allerdings etwas aufwändiger und nicht nutzbar, wenn jemand Javascript deaktiviert hat.
 
Werbung:
Tabellen sind für tabellarische Daten vorgesehen, ein Bild gehört da nicht zu. Möglich wäre es, ist aber nicht im Sinn von HTML, welches deinen Inhalt logisch Auszeichnet.

Stell dir einen Vorlesebrowser vor und denjenigen, der ihm zuhört. Er erwartet, tabellarische Daten zu hören, hört aber nur deinen Alternativtext, den du im <img> geschrieben hast. Ich wäre verwirrt.
 
Mit Vorsicht zu genießen, wenn andere Elemente vorkommen und erfordert Fixes für Browser, die min-height nicht kennen:

PHP: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
<!--
html, body {
    display: block;
    margin: 0;
    padding: 0;
    height: 100%;
    min-height: 180px; /* Damit Bild nicht abgeschnitten wird, erfordert noch Fix fuer unfaehige Browser */
}
dl {
    display: block;
    position: relative; /* Denk ueber die Konsequenzen nach */
    top: 50%; /* Liste beginnt nach der Haelfte des Elternelements */
    margin-top: -90px; /* Um etwa haelfte des Bilds nach oben schieben */
    text-align: center; /* Horizontale Zentrierung der Inline-Elemente dadrin */
}
-->
</style>
</head>
<body>
<dl>
  <dt><img src="http://www.google.de/logos/holiday08_5.gif" width="276" height="165" /></dt>
  <dd>Googles Weihnachtsbild</dd>
</dl>
</body>
</html>

Gruß
Junny
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben