divs mit float:left zentrieren

[Roland]

hi!

ich hab ca. 20 divs mit folgendem code:

<div style="width:200px; padding:10px; float:left; margin:auto;">
 <a href="'.$link[1].'.htm">
  <img src="/img/icons/'.$link[1].'.jpg" width="150" height="120" style="border:1px solid black;" alt="'.$name[0].'">
  <br>'.$link[0].'
 </a>
</div>

WIE KANN ICH DIESE zentrieren???

thx
Roland

[frankx]

Hallo Roland,

bestenfalls nimm doch erstmal die divs bzw. <img>; der rest ist ja beiwerk. Und wo möchtest Du sie zentrieren? Nebeneinander sind es doch über 3000 pixel, oder?

Gruß, Frankx

[Roland]

hi!

Hallo Roland,

bestenfalls nimm doch erstmal die divs bzw. <img>; der rest ist ja beiwerk. Und wo möchtest Du sie zentrieren? Nebeneinander sind es doch über 3000 pixel, oder?

lol, wenn die Zeile voll is geht es natürlcih in der nächsten weiter!
pro Zeile hat man dann ca. 3-5 Bilder (je nach Auflösung, Browsergröße, ...), diese sind dann aber linksbündig und nicht mittig

lg
Roland

[Detlef G.]

Hallo Roland,

erstmal ein paar Anmerkungen bzw. Fragen.

ich hab ca. 20 divs mit folgendem code:

<div style="width:200px; padding:10px; float:left; margin:auto;">

Wenn du mit float:left festlegst, dass das Div so weit wie möglich links
stehen und umflossen werden soll,  welchen Nutzen soll dann margin:auto haben?

<a href="'.$link[1].'.htm">
  <img src="/img/icons/'.$link[1].'.jpg" width="150" height="120" style="border:1px solid black;" alt="'.$name[0].'">
  <br>'.$link[0].'
</a>
</div>

Warum bläst du das HTML durch 20 identische Inlinestyles so auf?

WIE KANN ICH DIESE zentrieren???

Ist das Layout flexibel oder hat es eine feste Breite?
Davon ist es abhängig, ob es relativ einfach zu realisieren geht.

Auf Wiederlesen
Detlef

[Roland]

hi!

erstmal ein paar Anmerkungen bzw. Fragen.

gern

» Wenn du mit float:left festlegst, dass das Div so weit wie möglich links

stehen und umflossen werden soll,  welchen Nutzen soll dann margin:auto haben?

stimmt, das stamt noch von vorher & gehört nimma rein *schäm*

Warum bläst du das HTML durch 20 identische Inlinestyles so auf?

ehm, weil ich nicht daran gedacht hab *g*, in php sieht das ja nach nict so viel aus^^
aber ich hab das ganze style-attribut gl. gelöscht und im head
    div {width:200px; padding:10px; float:left; margin:auto; }
geschrieben (nutze den head normal auch nicht so viel, da ich eine externe *.css hab)
(hab sonst eh nur 1 div und jetzt steht halt in dem ein bisschen mehr, aber insgesamt is es natürlich schlanker, thx

WIE KANN ICH DIESE zentrieren???

Ist das Layout flexibel oder hat es eine feste Breite?
Davon ist es abhängig, ob es relativ einfach zu realisieren geht.

nein, leider nicht, sonst wäre es relativ leicht
ich könnte natürlich alles in ein div reinpacken, das 300px groß ist und als style-angabe margin:auto;, aber dann ist ein großer vorteil von dieser programmierweise weg, nähmlich das sich die divs selbstständig aufbauen können

Habt ihr vielleicht eine bessere Idee?

DANKE!!
Roland

[Detlef G.]

Hallo Roland

aber ich hab das ganze style-attribut gl. gelöscht und im head
    div {width:200px; padding:10px; float:left; margin:auto; }
geschrieben (nutze den head normal auch nicht so viel, da ich eine externe *.css hab)
(hab sonst eh nur 1 div und jetzt steht halt in dem ein bisschen mehr, aber insgesamt is es natürlich schlanker, thx

Meiner Meinung nach gehört dort kein Div hin. Es ist eine Liste von Links,
die jeweils aus einer Grafik und einem Text bestehen.

Ist das Layout flexibel oder hat es eine feste Breite?
Davon ist es abhängig, ob es relativ einfach zu realisieren geht.
nein, leider nicht,

Wieso leider?
Es ist doch gut, wenn dein Layout flexibel ist. Es wäre nur Unsinn gewesen
komplizierte Lösungsmöglichkeiten zu suchen, wenn die Seite sowieso starr
wäre.

ich könnte natürlich alles in ein div reinpacken,

Oder eine Liste nehmen, womit du automatisch ul als umschließendes Element
hättest. Alles darin kannst du dann einfach und unkompliziert über den
Nachfahrenselektor ansprechen.

Habt ihr vielleicht eine bessere Idee?

Soweit ich das sehe musst du Kompromisse eingehen.
Du könntest die Ausrichtung bei flexibler Seitenbreite mittels Javascript
realisieren. Für den Fall, dass Javascript nicht verfügbar ist, könntest du
dann entweder mit fester Anzahl nebeneinanderstehender Bilder arbeiten und
fester Breite oder flexiblem Abstand zueinander, oder du verzichtest für
diesen Fall auf die Zentrierung.

Ein Beispiel findest du hier unter der Überschrift "Für viele Bilder"

Auf Wiederlesen
Detlef

[Ingo Turski]

Hi,

ich hab ca. 20 divs mit folgendem code:

wozu? Entferne nicht nur die inline-styles, sondern auch die DIVs und gebe dem Elternelement text-align:center, dann werden die Bilder zentriert. Das padding darfst Du - als margin - dann den IMGs geben.

Bleibt nur

<br>'.$link[0].'

aber ist das wirklich nötig? Wenn da nur der Link drin steht, reicht es doch auch, die Bilder zu verlinken.

freundliche Grüße
Ingo

[Roland]

hi!

Hi,

ich hab ca. 20 divs mit folgendem code:
wozu? Entferne nicht nur die inline-styles, sondern auch die DIVs und gebe dem Elternelement text-align:center, dann werden die Bilder zentriert. Das padding darfst Du - als margin - dann den IMGs geben.

Bleibt nur

<br>'.$link[0].'
aber ist das wirklich nötig? Wenn da nur der Link drin steht, reicht es doch auch, die Bilder zu verlinken.

Nö, da steht nicht der Link, sondern der name (in meinem echten script warn die vars ein bisschen komplizierter und ich wolles vereinfachen und hab da scheinbar nen blödsinn gemacht, darunter steht der Name und dies ist auf der Seite wichtig! Damit aber der Name genau unter dem bild steht benötige ich das div...

thx
Roland