DIVs horizontal mittig

[Stefan Becker]

Hallo,

ich habe DIVs, die in einem DIV sich mittig verteilen sollen. Leider bleiben
Sie immer links orientiert.

<div class="art-content-layout-row">
<div class="art-infobox">
<div class="art-infobox-headline">�sthetikzentrum</div>
<div class="art-infobox-image"><img width="200" height="135" alt=""
class="art-lightbox"
src="/images/template-content/shutterstock_19883491.jpg" style="margin-top:
0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></div>
<div class="art-infobox-text">
<p>Nicht jeder sieht so jung aus, wie er sich f�hlt. F�r den, der daran
etwas �ndern m�chte, bieten wir Ihnen in unserer Praxis zahlreiche
M�glichkeiten, die Sie nicht nur optisch sondern auch biologisch
Verj�ngen.</p>
<p>Weil Sch�nheit auch Hautsache ist.</p>
</div>
</div>
<div class="art-infobox">
<div class="art-infobox-headline">Dermatologisches Zentrum</div>
<div class="art-infobox-image"><img width="200" height="135" alt=""
class="art-lightbox"
src="/images/template-content/shutterstock_19883491.jpg" style="margin-top:
0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"></div>
<div class="art-infobox-text">
<p></p>
</div>
</div>
<div class="art-infobox">
<div class="art-infobox-headline">Laserzentrum</div>
<div class="art-infobox-image"><img width="200" height="135" alt=""
class="art-lightbox"
src="/images/template-content/shutterstock_19883491.jpg" style="margin-top:
0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"></div>
<div class="art-infobox-text">
<p></p>
</div>
</div>
<div style="clear:left;"></div>
<div class="art-infobox">
<div class="art-infobox-headline">Lichttherapiezentrum</div>
<div class="art-infobox-image"><img width="200" height="135" alt=""
class="art-lightbox"
src="/images/template-content/shutterstock_19883491.jpg" style="margin-top:
0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></div>
<div class="art-infobox-text">
<p></p>
</div>
</div>
<div class="art-infobox">
<div class="art-infobox-headline">Podologiezentrum</div>
<div class="art-infobox-image"><img width="200" height="135" alt=""
class="art-lightbox"
src="/images/template-content/shutterstock_19883491.jpg" style="margin-top:
0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; "></div>
<div class="art-infobox-text">
<p></p>
</div>
</div>
<div class="art-infobox">
<div class="art-infobox-headline">Podologiezentrum</div>
<div class="art-infobox-image"><img width="200" height="135" alt=""
class="art-lightbox"
src="/images/template-content/shutterstock_19883491.jpg" style="margin-top:
0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px;"></div>
<div class="art-infobox-text">
<p></p>
</div>
</div>
</div>
</div>
</div>

Meine css sieht wie folgt aus:

.art-startboxen {
margin: auto;
width: 1000px;
}
.art-infobox {
float: left;
margin: auto;
padding: 0 10px 0 0;
width: 220px;
}
.art-infobox-headline {
background: url("../images/bg-infobox.png") repeat-x scroll 0 0 #FFFFFF;
color: #FFFFFF;
font-size: 14px;
height: 15px;
padding: 5px 0;
text-align: center;
text-transform: uppercase;
}
.art-infobox-text {
border-bottom: 1px dotted #B2B2B1;
border-top: 1px dotted #B2B2B1;
line-height: 140%;
margin-bottom: 10px;
margin-top: 10px;
min-height: 210px;
padding: 6px 5px;
}

.art-content-layout-row {
display: table-row;
margin: auto;
}

Hat jemand eventuell eine Idee was ich falsch mache.

Vielen Dank!

Stefan

[Susanne Jäger]

Stefan Becker schrieb am 23.02.2013 20:16:

> ich habe DIVs, die in einem DIV sich mittig verteilen sollen. Leider
> bleiben Sie immer links orientiert.

ich nehme an die sind gemeint

> .art-infobox {
> float: left;
> margin: auto;
> padding: 0 10px 0 0;
> width: 220px;
> }

> Hat jemand eventuell eine Idee was ich falsch mache.

Du kannst nicht gleichzeitig floaten und erwarten, dass margin: auto
interpretiert wird. Float gewinnt und schiebt alles nach links.
Fr�her(tm) war dein Ansinnen nicht ohne weiteres l�sbar, evtl geht eine
Kombi aus text-align: center; und display: inline-block, ich habe aber
keine Ahnung ob das funktioniert. ... Wenn du ein vern�nftiges Beispiel
online gestellt h�ttest, lie�e sich das schnell mit geeigneten
Werkzeugen im Browser ausprobieren, so ist mir das zu umst�ndlich.
Sonst k�me es auf die weiteren Rahmenbedingungen - welche Zielbrowser,
was ist fix, was nicht u.a. an.

Gru�
Susanne

[Thomas 'PointedEars' Lahn]

Stefan Becker wrote:

> ich habe DIVs, die in einem DIV sich mittig verteilen sollen. Leider
> bleiben Sie immer links orientiert.
>
> <div class="art-content-layout-row">
> <div class="art-infobox">

> <div class="art-infobox-headline">Ästhetikzentrum</div>

> <div class="art-infobox-image"><img width="200" height="135" alt=""
> class="art-lightbox"
> src="/images/template-content/shutterstock_19883491.jpg"
> style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px;
> margin-left: 0px; "></div> <div class="art-infobox-text">

Lesbarer Code sieht anders aus; es gibt nicht einmal Einrückungen,
geschweige denn eine Usenet-freundliche Zeilenlänge. Auch verwendest Du
CSS-Klassen nicht effizient. Alternative:

<div class="art-content">
<div class="layout-row">
<div class="infobox">
<div class="headline">Ästhetikzentrum</div>
<div class="image"><img
src="/images/template-content/shutterstock_19883491.jpg"
width="200" height="135" alt="" class="lightbox"
style="margin: 0"></div>
<div class="text">
…

Die entsprechenden (kompatibelsten) CSS-Selektoren sind dann:

.art-content .layout-row
.art-content .layout-row .infobox
.art-content .layout-row .infobox .headline
.art-content .layout-row .infobox .image
.art-content .layout-row .infobox .image .lightbox
.art-content .layout-row .infobox .text

Wobei natürlich Infix-Komponenten weggelassen werden kann, wenn es dann
keine ungewollten Überlagerungen mit anderen Regeln gibt.

Grundsätzlich ist die Markup-Struktur jedoch überarbeitungswürdig (Divitis).
Prüfe, ob Du auf div-Elemente verzichten bzw. sie durch semantische Elemente
ersetzen kannst:

<http://html5doctor.com/downloads/h5d-sectioning-flowchart.png>

(Mindestens in Frage kommen ul- und li-Elemente für Listen, siehe den Zweig
“Does it have *any* semantics → yes”.)

Schliesslich solltest Du prüfen, ob es in diesem Fall sinnvoll ist, Inline-
Stylesheets durch CSS-Regeln zu setzen.

> Hat jemand eventuell eine Idee was ich falsch mache.

Das ist keine Frage, und wenn es eine wäre, dann wäre es die fhcsale.

<http://www.tty1.net/smart-questions_de.html>


PointedEars
--
> Ich habe mir bereits mehrere Mausverfolger aus dem Netz
> heruntergeladen.
Bei uns laufen genug Katzen rum, da muß ich mir keinen Mausverfolger
runterladen... -- Georg Maaß, <b7mnk1$2iafr$2...@ID-3551.news.dfncis.de>

[Thomas 'PointedEars' Lahn]

Thomas 'PointedEars' Lahn wrote:

> Schliesslich solltest Du prüfen, ob es in diesem Fall sinnvoll ist,
> Inline- Stylesheets durch CSS-Regeln zu setzen.

zu _ersetzen_

[Arno Welzel]

Stefan Becker, 2013-02-23 20:16:

> Hallo,
>
> ich habe DIVs, die in einem DIV sich mittig verteilen sollen. Leider
> bleiben Sie immer links orientiert.

[lange Codschnipsel entfernt]

Bitte k�nftig f�r solche Fragen eine *URL* nennen, wo man ein *reales*
Minimal-Beispiel ansehen kann. Das erleichtert die Hilfestellung
erheblich. Es ist n�mlich kein Spass, sich anhand von unleserlichen
Codefragmenten raussuchen zu m�ssen, was der Fragesteller wohl konkret
bezweckt.

Mir f�llt nur folgendes auf:

.art-infobox {
float: left;
margin: auto;
padding: 0 10px 0 0;
width: 220px;
}

was genau soll float:left *und* margin:auto denn bewirken? Entweder ist
das Element links ausgerichtet *oder* mittig durch margin:auto - aber
beides zusammen ist unsinnig.

--
Arno Welzel
http://arnowelzel.de
http://de-rec-fahrrad.de