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

Inhalt einers DIV vertikal mittig ausrichen

L

leumas

Neues Mitglied
Hallo,
ich weiß nicht ob ich hier im richtigen Unterforum bin... bin noch Anfänger.

Ich habe von meinem Vater den Auftrag bekommen, eine Seite zu entwickeln, auf der sich 20 Buttons befinden sollen. (In einer 4x5er Matrix angeordnet)
Mein Lösungsansatz sieht bis jetzt folgendermaßen aus: Titel ist vorerst egal

Mein Ansatz war es, 4 Spalten anzulegen in denen dann jeweils untereinander 5 Bilder (Buttons) je in einem DIV angezeigt werden. Die 5 Bilder deswegen je in einem DIV, damit ich die Abstände zwischen den Bildern (Buttons) variieren kann.

Mein Problem:
Ich kann die Bilder (Buttons) in einem DIV nicht vertikal mittig ausrichten.
Habe schon gegooglet und mehrer Lösungsansätze ausprobiert, jedoch ohne Erfolg.

Bin natürlich für Grundlegen andere Lösungsansätze was die Matrix angeht offen!

HTML: 
<html>
<head>

<title>Titel ist vorerst egal</title>
<link rel="stylesheet" type="text/css" href="data/style.css" />

</head>
<body>

<div id="main">

<div id="logo">
</div>

<div id="column">
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
</div>

<div id="column">
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
</div>

<div id="column">
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
</div>

<div id="column">
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
<div id="button"><a href="http://www.google.de"><img src="data/button.png" alt="button" width="122" height="42" border="0" /></a></div>
</div>

</div>

</body>
</html>

Meine CSS:
Code: 
#main{
width:800px;
height:450px;
background:black;
border: 1px solid yellow;
/* Zentrierung */
left: 50%;
top: 50%;
position: absolute;
margin-left: -400px;
margin-top: -225px;
}

#logo{
float:top; 
width:800px;
height:50px;
background:red;
}

#column{
width:200px;
height:400px;
background:blue;
float:left;
}

#button{
width:200px;
height:80px;
background:green;
text-align:center;
vertical-align: center; <-- funktioniert nicht
}

MfG
leumas
 
Fehler die ich auf den ersten Blick sehe:
* Doctype fehlt
* Mehrfache Verwendung von IDs
* <div>-Wüste
* Absolute Positionierung

Ich würde dir raten auf Grund dieser Stichwörter deinen Quellcode nochmal anzuschauen und etwas sauberer zu gestalten.

Tipps:
Die Bilder sind eine Liste - also formatiere sie auch so.
Und Du suchst eigentlich nach vertikaler Ausrichtung von Blockelementen - unter dem Stichwort solltest Du deine Versuche (nach Korrektur o.g. Codes) einschränken können. Hier im Forum wird die Frage übrigens auch öfter gestellt und gelöst ;)
 
threadi schrieb:
Fehler die ich auf den ersten Blick sehe:
* Doctype fehlt
* Mehrfache Verwendung von IDs
* <div>-Wüste
* Absolute Positionierung
Zum Vergrößern anklicken....
* Doctype fehlt: Brauch ich das, wenn ich später nur lokal Arbeite? Ich hab den Code nur im Windows Editor geschrieben. K.A. welche HTML Version ich verwende?
* Mehrfache Verwendung von IDs: Hab gedacht, dass ist die gängige Methode um die selben Eigenschaften auf mehrere DIVS anzuwenden.
* <div>-Wüste: Da ich absoluter Neuling bin, hab ich keine Ahnung wie ich es sonst umsetzten sollte.
* Absolute Positionierung: Stand so in einer Lösung (Internet) um den main-DIV im Browserfenster zu zentrieren.

threadi schrieb:
Die Bilder sind eine Liste - also formatiere sie auch so.
Zum Vergrößern anklicken....
Was meinst du mit: ,,also formatiere sie auch so."
 
leumas schrieb:
* Doctype fehlt: Brauch ich das, wenn ich später nur lokal Arbeite? Ich hab den Code nur im Windows Editor geschrieben. K.A. welche HTML Version ich verwende?
Zum Vergrößern anklicken....

Ein Doctype gehört zu jedem HTML-Dokument, egal wo es gespeichert wird und wie es angezeigt wird. Ohne Doctype hält sich kein Browser an die gültigen Standards zur Darstellung von Webseiten - was für dich von vornherein die Arbeit schwerer macht überhaupt eine Webseite irgendwie darstellen zu können.

* Mehrfache Verwendung von IDs: Hab gedacht, dass ist die gängige Methode um die selben Eigenschaften auf mehrere DIVS anzuwenden.
Zum Vergrößern anklicken....

Nein, dafür sind Klassen gedacht. IDs sollte man nur für wirklich einmal im HTML-Dokument vorkommende Elemente verwenden.

* <div>-Wüste: Da ich absoluter Neuling bin, hab ich keine Ahnung wie ich es sonst umsetzten sollte.
Zum Vergrößern anklicken....

Nutze HTML dafür wie es gedacht ist. HTML stellt eine Menge an Elementen bereit die Inhalten eine entsprechend semantische Bedeutung geben. <h1> bis <h6> für Überschriften, <p> für Texte - und eben <ul> für Listen (egal von was). Daher meinte ich auch, dass Du hier eine Liste von Bildern hast - also wäre <ul> die richtige Wahl statt dem bedeutungslosen Gruppierungselement <div>.

* Absolute Positionierung: Stand so in einer Lösung (Internet) um den main-DIV im Browserfenster zu zentrieren.
Zum Vergrößern anklicken....

Für vertikale Zentrierung kann man durchaus absolute Positionierung verwenden, braucht dafür aber zum Einen validen HTML-Code (also auch mit Doctype) und zum Anderen ein Verständnis dafür wie man HTML-Elemente korrekt mit Styles formatiert (z.B. indem man keine IDs mehrfach verwendet um eine Eigenschaft mehreren Elementen zu geben - das geht zwangsläufig nach hinten los).
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben