Hallo zusammen,
ganz unten in http://www.gemeindeaufbauverein-auerbach.de/berichte…
gibt es Bilder, die je nach Breite der Seite in einer, 2, 3 oder mehr Spalten gezeigt werden.
Wie kann ich dafür sorgen, dass alle Bilder als Gesamtheit mittig unter dem Text sitzen?
Schöne Grüße
JoKu
Du könntest die Bilder in einen DIV-Container packen, per CSS-media-query die feste Breite des Containers in Abhängigkeit von den Screenmaßen bestimmen und mit „margin: 0 auto;“ arbeiten.
Hallo,
ganz unten in http://www.gemeindeaufbauverein-auerbach.de/berichte…
gibt es Bilder, die je nach Breite der Seite in einer, 2, 3
oder mehr Spalten gezeigt werden.Wie kann ich dafür sorgen, dass alle Bilder als Gesamtheit
mittig unter dem Text sitzen?
wenn ich das richtig sehe, sind die Bilder jeweils in einem div eingebunden.
Ab Zeile 42 hast du im Quelltext:
.berichtebildbox {
margin: 10px 5px 10px 5px;
padding: 5px 5px 8px 5px;
border: 1px solid #ccc;
display: inline-block;
text-align: center;
}
Du musst die Angaben in Zeile 45 ändern, und zwar so:
margin: 10px auto 10px auto;
Ich habe keinen Überblick über die Gesamtheit, ich find’s auch ungünstig, eine zentrale CSS-Datei zu benutzen UND noch zusätzliche CSS-Angaben in den einzelnen Dateien, aber im Normalfall wird das Zentrieren eben (außer, wo es mit text-align:center) durch Setzen des linken und rechten Abstands (margin) auf „auto“ realisiert.
Gruß
Christa
Hallo,
das
margin: 10px 5px 10px 5px;
in
margin: 10px auto 10px auto;
zu ändern, hilft leider nicht. damit rücken die Boxen
nur um die nun fehlenden je 5px zusammen.
Gruß
Jochen
Hallo Jochen,
nichts für ungut, aber der Quelltext ist total vermurkst. Das kann eigentlich auch kein Mensch in Handarbeit erstellt haben. 
)
das
margin: 10px 5px 10px 5px;
in
margin: 10px auto 10px auto;
zu ändern, hilft leider nicht. damit rücken die Boxen
nur um die nun fehlenden je 5px zusammen.
Nach dieser Anmerkung habe ich mir die Seite heruntergeladen und mir den Quelltext genauer angeschaut. Ich habe seltenst den Browser auf Vollbildschirm, und als ich mir das gestern angeschaut habe, waren die Bilder nur einspaltig zu sehen, deswegen dachte ich logischerweise an die einfachste Lösung. Aber heute habe ich einiges ausprobiert, und dabei fiel mir zufälligerweise auf, als mal alles auf Vollbildschirm war, dass die Bilder gar nicht einspaltig sind, sondern je nach Browserfensterbreite in der Anzahl pro Zeile variieren.
Ich würde die Breite gar nicht so variabel lassen, denn bei meinem ich glaube 22" großen Monitor, 16:9, die Zeilen viel zu lang sind, was die Lesbarkeit unheimlich erschwert.
Ich weiß nicht genau, ob dieser Link funktioniert, wenn nicht: dort wird eine Länge von 60-130 Zeichen/Zeile als optimal angesehen. D. h., du musst durch die Breite des Inhalts- s sicherstellen, dass die Zeilenlänge ein gewisses Maß nicht überschreitet. Dann kann man auch gucken, wie man die Bilder positioniert.
Es ist jedenfalls keine Sache von 5 Minuten, sorry.
Viele Grüße
Christa
Vermurkst
Hallo nochmal,
nichts für ungut, aber der Quelltext ist total vermurkst.
damit meine ich übrigens, hätte es noch dazu schreiben, sollen, nicht, dass er fehlerhaft ist (das habe ich gar nicht überprüft), sondern dass er sehr viele (höchstwahrscheinlich) überflüssige Elemente beinhaltet, die eine Formatierung sehr erschweren.
Viele Grüße
Christa
Nettes Hallloo aus Ö
also
ich hab das so gelöst
body{
font-family: Arial, sans-serif;
text-align: center;
background-image: url(bilder/franz_zatschkowitsch.png);
background-color: #EEEBDB;
/* background-repeat:repeat-x; */
background-attachment: fixed;
}
#mittig
{
width: 1000pc;
/* zentrieren */
margin: 0 auto;
text-align: left;
}
und (fast) fertig sieht das dann so aus:
http://josef.aichinger.mediaaccount.com/franz_versuche
glG aus Ö