Antworten auf deine Fragen:
Neues Thema erstellen

Erledigt - CSS - Bild zentrieren in DW CC

Sisankha

Aktives Mitglied

Hallo Leute :)

Wenn ich in einem Div mit fixer Breite eigentlich nur Text habe und dann dort zwischen zwei Zeilen auf einer eigenen Zeile - also ohne Textumfluss - ein Bild einfüge, dann hätte ich das dort gerne zentriert. Die Bilder haben aber verschiedene Grössen.
Im alten Macromedia-DW gab's dafür, unabhängig von der Bildgrösse, einfach eine Schaltfläche für Zentrieren. Im CC-DW gibts das im CSS-Designer nur für Text.

Ich habe verschiedene Varianten ausprobiert, um die Bilder mittig zu kriegen.
Eine Möglichkeit wäre offenbar, dass ich für jedes Bild ein Div mache, dessen Width und Hight exakt mit der Bildgrösse übereinstimmen. Dann kann dieses Div zentriert werden, in dem man margin left und right auf auto setzt.
Also jedes Bild in einem eigenen Div mit eigener Class oder ID. Das scheint mir aber doch etwas umständlich zu sein.

Versuchsweise hatte ich auch eine Class erstellt, mit dem ich die Bilder via px-Wert im Margin-Left ins Zentrum geschoben habe. Das ginge zwar zügiger, weil ich keine Extra-Div's für jedes Bild brauche und nur mit Rechtsklick schnell die Class an's Bild anhängen könnte. Aber leider funktioniert das nur bei Bildern gleicher Breite. Sobald verschieden breite Bilder drin sind, müsste ich für jede mögliche Bild-Breite eine weitere Class machen. Das kann's dann ja auch nicht sein.

Ich suche eine Möglichkeit, die einfach zu handhaben ist, gleichzeitig aber den Code nicht überlastet. Denn mit der Zeit wird sehr viel Text auf die Seite kommen und da sollen entsprechend viele Bilder zum Auflockern dazwischen. Gäbe das sehr viel mehr Code, wenn jedes Bild eine eigene ID hat? Oder kommt's da gar nicht drauf an, weil sowieso jedes Bild schon allein durch die Quellangabe (in welchem Ordner es liegt) und durch die Plazierung einen Code hat? Vielleicht kommt's dann ja auf ein oder zwei Elemente mehr pro Bild gar nicht mehr an? Ich kann das leider gar nicht abschätzen.

Wenn ich ein Bild im Textfluss plaziere, braucht das auch eine Class oder ID, um es rechts oder links floaten zu lassen und dann die Abstände zum Text anzupassen. Auch dafür fällt mir nichts ein, das ich für alle Bilder gleichzeitig verwenden könnte. Jedenfalls nicht, so lange die Bilder unterschiedliche Grössen haben.

Ich könnte versuchen, mich mit den Bildern auf 4-6 Grössen einzuschränken, so dass ich mit den entsprechenden Klassen arbeiten könnte. Und für gelegentliche Ausnahmen gibts dann eben eine ID.

Übersehe ich als DW-Wiedereinsteiger und absoluter CSS-Neuling etwas?
Wie würdet ihr das lösen?
Bitte in verständlichen Worten für Nicht-Programmierer und CSS-Analphabeten ausdrücken.
Danke
;)


Das wird eine Textseite. Bilder häng ich nur dazwischen, um das Ganze aufzulockern. (Eine weitere Seite für meine Bilder wird dann das nächste Projekt.)
Nein, es ist noch nichts online. Ich probiere nur auf meinem System rum bis es soweit in Griff habe.

Und das mir als Ex-Typografin. Aber das war eben zu Zeiten als Windows noch so neu war, dass alle PC-Freaks den Kopf voller DOS-Befehle hatten und im Geschäft gabs einen speziellen Satzcomputer. So ein sperriges Ding mit 5,25″Disketten. Ja, ja, lang ist's her *g


_
 

Sisankha

Aktives Mitglied

Leider versteh ich den Inhalt des Links nicht, cebito.

Warum "margin: 8px auto" um zu zentrieren?
Und auch bei float right und left sind noch 8px margin angegeben.

Danke auf jeden Fall. Auch wenn mir die Antwort ein Rätsel bleibt :)

-----------------------------------

So. Hab jetzt etwas rumprobiert. Die 8px Margin schieben das Bild in die Mitte. Genau das, was ich ja auch im Eingangspost geschrieben habe. Das funktioniert nur für Bilder gleicher Breite. Wenn ich Bilder verschiedener Breite habe, brauch ich für jede neue Breite eine neue Klasse mit den entsprechenden Massen.

Hab ich das so richtig verstanden?
Wenn das die beste Lösung ist, dann mach ich das so. Ich will nur sicher sein :)
 
Zuletzt bearbeitet:

dn3d_fanboy

Aktives Mitglied

Die 8px sind die Abstände nach oben und unten, also die vertikalen Abstände. Bei der vekürzten Schreibweise für margin (also der Außenabstand) ist der erste Wert für oben/unten, der zweite für rechts/links. auto zentriert also dein Bild in der Mitte.

Du kannst auch jeden x-beliebigen Wert anstatt der 8px angeben und den Abstand entsprechend vergrößern, verkleinern oder mit 0 (auch ohne px dahinter) komplett weglassen.
 

cebito

undefined

Das funktioniert nur für Bilder gleicher Breite. Wenn ich Bilder verschiedener Breite habe, brauch ich für jede neue Breite eine neue Klasse mit den entsprechenden Massen.
Eben nicht. Deshalb habe ich extra verschiedene Größen genommen um zu zeigen, dass jeweils eine Klasse für rechts, links oder mitte ausreicht.
Und wie @dn3d_fanboy schon schrieb, sind die 8px der jeweilige Abstand zum Text. Verändere die Werte dort doch mal, klicke oben auf "Run" und schau, was wo wie passiert, dafür ist das Beispiel da.
 

Sisankha

Aktives Mitglied

Ich hab das schon zigfach probiert so. Das war mein erster Versuch, dn3d.
Seltsamerweise bleibt - mit Margin rechts und links auf auto - das Bild immer am linken Rand kleben. Ich versteh das nicht.
 

Sisankha

Aktives Mitglied

Das ist echt schräg. Wenn ich im Margin Links pxWerte eingebe, wandert das Bild entsprechend nach rechts. Aber wenn ich auf auto umstelle, schwuppst es zurück an den linken Rand und bleibt dort kleben.

Hier der komplette Code von meiner Übungsseite zum Thema:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css">
#container {
height: auto;
width: 600px;
min-height: 400px;
margin-left: auto;
margin-right: auto;
}
.bild_mitte {
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
</style>
</head>

<body>
<span style="text-align: center"></span><span style="text-align: center"></span>
<div id="container">
<p>diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt volutpat. </p>
<p><img src="sol1.png" alt="" width="225" height="223" class="bild_mitte"/></p>
<p>erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur</p>
</div>
</body>
</html>
 
Zuletzt bearbeitet:

cebito

undefined

Schau dir mein Beispiel bitte noch einmal genau an. Die Bilder haben noch eine zweite Klasse, damit sie bestimmte Eigenschaften überhaupt erst annehmen können. Das fehlt bei dir.

Tipp: img ist von Haus aus ein Inlinelement, da sollte was dran geändert werden ;)
 

Sisankha

Aktives Mitglied

Ja, endlich! Das hab ich auch grad bemerkt,als ich dein Beispiel nochmal angesehen habe. Ich muss display auf "block" stellen. Mit diesem "display"-Menü hab ich mich noch gar nicht auseinander gesetzt. Aber das kommt noch :)

Also. Problem gelöst. Vielen dank wieder mal :)

:happy2:
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.613
Beiträge
1.538.346
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben