Hi,
ich hatte bisher eine Tabelle, um meine Grafiken anzuordnen.
Nun will ich das aber alles mit CSS machen.
Wie kann ich Grafiken zentrieren? Ich habe 3 Grafiken, die nebeneinander in der Mitte der Seite erscheinen sollen.
Wie muß ich das in der CSS-Datei definieren?
.xxx
{
align=center;
}
Einfach ein class defienieren und dann mit <img class="xxx"... die Grafik anzeigen lassen?
Seite 1 von 1
Html/css - Wie Kann Ich Grafiken Zentrieren?
Anzeige
#2
geschrieben 11. September 2006 - 23:08
1. Die CSS Syntax beachten, Dreamwaver bietet hie übigens eine Autovervollständigung zum Teil an
#mein_style{
Eigenschaft: Wert;
Eigenschaft2: Wert2;
}
...
2. Der CSS Befehl der dem HTML align Attribut gleich kommt lautet text-align
Ach ja, wenn du es per class="mein_style" einbinden willst musst du statt dem # einen . verwenden^^
und die 3 bilder am besten in einem Div Container einbinden, sieht dann so aus:
<div class="mei_style"><img ... /><img ... /></div>
P.S.: http://de.selfhtml.org/css/
#mein_style{
Eigenschaft: Wert;
Eigenschaft2: Wert2;
}
...
2. Der CSS Befehl der dem HTML align Attribut gleich kommt lautet text-align
Ach ja, wenn du es per class="mein_style" einbinden willst musst du statt dem # einen . verwenden^^
und die 3 bilder am besten in einem Div Container einbinden, sieht dann so aus:
<div class="mei_style"><img ... /><img ... /></div>
P.S.: http://de.selfhtml.org/css/
Dieser Beitrag wurde von [Elite-|-Killer] bearbeitet: 11. September 2006 - 23:12
#3
geschrieben 12. September 2006 - 00:02
self-html.org kenne ich schon.
Also meine Grafiken werden jetzt zentriert nebeneinander angezeigt
Aber wie mache ich das mit Text? Mein Text soll in 2 Spalten dargestellt werden.
Mit einer Tabelle siehts so aus: richtig (aber mit Tabelle)
So siehts momentan aus ohne Tabelle: falsch (leider nur 1-spaltig)
Mit welchen Befehlen kann ich diesen Text 2-spaltig machen? Geht das nur mit einer Tabelle?
Also meine Grafiken werden jetzt zentriert nebeneinander angezeigt
Aber wie mache ich das mit Text? Mein Text soll in 2 Spalten dargestellt werden.
Mit einer Tabelle siehts so aus: richtig (aber mit Tabelle)
So siehts momentan aus ohne Tabelle: falsch (leider nur 1-spaltig)
Mit welchen Befehlen kann ich diesen Text 2-spaltig machen? Geht das nur mit einer Tabelle?
Dieser Beitrag wurde von Bib bearbeitet: 12. September 2006 - 00:03
#4
geschrieben 12. September 2006 - 00:32
text-align ist aber wie der name schon sagt zum text zentrieren und nicht für blockelemente. der ie macht das zwar fälschlicherweise aber der firefox zentriert wirklich nur den text damit. um ein blockelement zu zentrieren kann man es entweder so in ein div packe
<div align="center">ELEMENT</div>
oder man positioniert es relativ und setzt margin für left und right auf auto.
so mach ich das jedenfalls. ich schließe nicht aus, dass es noch eine elegantere lösung gibt.
<div align="center">ELEMENT</div>
oder man positioniert es relativ und setzt margin für left und right auf auto.
so mach ich das jedenfalls. ich schließe nicht aus, dass es noch eine elegantere lösung gibt.
Der Pessimist sagt: "Das Glas ist halb leer,"
Der Optimist sagt: "Das Glas ist halb voll."
Der Realist sagt: "Bedienung, zwei Neue!"
Der Optimist sagt: "Das Glas ist halb voll."
Der Realist sagt: "Bedienung, zwei Neue!"
#5
geschrieben 12. September 2006 - 00:53
das mit <div align="center"></div> ist dahingehend problematisch, da es ab XHTML1.0 Strict nimmer erlaubt ist -.-
#6
geschrieben 12. September 2006 - 02:22
Zitat
' date='12.09.2006, 01:53' post='722277']
das mit <div align="center"></div> ist dahingehend problematisch, da es ab XHTML1.0 Strict nimmer erlaubt ist -.-
das mit <div align="center"></div> ist dahingehend problematisch, da es ab XHTML1.0 Strict nimmer erlaubt ist -.-
drum ja die zweite möglichkeit.
Der Pessimist sagt: "Das Glas ist halb leer,"
Der Optimist sagt: "Das Glas ist halb voll."
Der Realist sagt: "Bedienung, zwei Neue!"
Der Optimist sagt: "Das Glas ist halb voll."
Der Realist sagt: "Bedienung, zwei Neue!"
#7
geschrieben 12. September 2006 - 06:51
Also ist dann die einzig "konforme" Lösung, mit linken und rechten Rand auf Auto setzen?
Wie bekomme ich aber nun die Text-Daten 2-spaltig angezeigt? HTML-Tabellen sind ja verpönt und darum möchte ich die ganz weglassen. Bei den meisten Seiten hats ohne Tabellen wunderbar geklappt. Nur eben bei diesem 2-spaltigen Text gehts nicht so recht.
Wie bekomme ich aber nun die Text-Daten 2-spaltig angezeigt? HTML-Tabellen sind ja verpönt und darum möchte ich die ganz weglassen. Bei den meisten Seiten hats ohne Tabellen wunderbar geklappt. Nur eben bei diesem 2-spaltigen Text gehts nicht so recht.
#8
geschrieben 12. September 2006 - 06:58
text-align richtet Text innerhalb von Blockelementen aus. Horizontale Ausrichtung von weiteren Inline-Elementen ist m.W. nicht vorgesehen.
Um eine Grafik horizontal auszurichten, muss sie erst als Blockelement formatiert werden und wird dann (wie Gitarremann sagte) mit margin:auto formatiert.
Bitte hier weiterlesen: Layouten ohne Tabellen.
Um eine Grafik horizontal auszurichten, muss sie erst als Blockelement formatiert werden und wird dann (wie Gitarremann sagte) mit margin:auto formatiert.
Bitte hier weiterlesen: Layouten ohne Tabellen.
Thema verteilen:
Seite 1 von 1