nicht angemeldet
Bekomme Zentrierung nicht hin....
Hallo zusammen,
vielleicht könnt Ihr mir ja helfen.
Ich möchte 3 Grafiken in einem Container nebeneinander anordnen.
Die Grafik Logo_Mitte soll zentriert zwischen Logo_Links und Logo_Rechts ausgerichtet werden. Ich bin jetzt schon Stunden dabei und komme nicht weiter. Habe ich die Logo Mitte zentriert, wird es aber in der nächsten Zeile dargestellt.
Habt Ihr einen Tipp für mich?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
</head>
<style type="text/css">
div#logo_links
{float:left}
div#logo_mitte
{
margin:auto
}
div#logo_rechts
{
float:right
}
</style>
<body>
<div id="logo_links">
<img src="images/logo_kopfteil.gif" width="108" height="78" alt="Logo links" />
</div>
<div id="logo_mitte">
<img src="images/kopfteil_begruessung.gif" width="550" height="78" alt="Logo mitte" />
</div>
<div id="logo_rechts">
<img src="images/logo_kopfteil_gespiegelt.gif" width="108" height="78" alt="Logo rechts" />
</div>
</body>
</html>
Schon einmal ein großes THX.
Gruß
Roggi
-
Ich möchte 3 Grafiken in einem Container nebeneinander anordnen.
Du hast aber drei Container.
Die Grafik Logo_Mitte soll zentriert zwischen Logo_Links und Logo_Rechts ausgerichtet werden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">Die loose-Variante ist wenig geeignet für den Einsatz von CSS, weil viele Browser da mehr oder weniger machen, was sie wollen, und nicht das, was sie laut Standard sollen. Verwende wo irgend möglich strict, um den standardkonformen Modus zu aktivieren (siehe http://hsivonen.iki.fi/doctype/).
div#logo_links
{float:left}div#logo_mitte
{margin:auto}div#logo_rechts
{float:right}Gebe #logo_mitte mal einen Rahmen (border:1px solid red). Du wirst sehen, dass das Element zwar mittig positioniert wurde, aber nicht da, wo Du wahrscheinlich vermutest.
<div id="logo_links">
<img src="images/logo_kopfteil.gif" width="108" height="78" alt="Logo links" />
</div>Es ist nicht so, dass das <img>-Element sich nicht direkt per CSS bearbeiten ließe. Und auch in diesem Fall sind zwei der drei <div>s überflüssig und das verbleibende womöglich auch noch fehl am Platze.
Damit hängt dann auch irgendwo Dein Problem zusammen: Anstatt einfach das <img>-Element via text-align in einem <p> zu zentrieren, wie man es mit allen Inline-Elementen macht, kippst Du lauter einzelne <div>s in den Code.
Schon einmal ein großes THX.
THX wird eindeutig überbewertet. Ein einfaches Danke hätte gereicht.
-
Hallo Hork beim Tort,
dann noch einmal ein einfaches Danke ;-).
Den Dokumenttyp habe ich geändert. Anschließend den roten Rahmen gesetzt. Der Rahmen wurde über die gesamte Seitenbreite angezeigt. Deshalb habe ich den erst einmal auf die Breite der Grafik reduziert.
Und jetzt wird es für mich etwas zu kryptisch. Leider verstehe ich nicht so ganz, was ich da nun machen muss.
Zitat:
Es ist nicht so, dass das <img>-Element sich nicht direkt per CSS bearbeiten ließe. Und auch in diesem Fall sind zwei der drei <div>s überflüssig und das verbleibende womöglich auch noch fehl am Platze.
Damit hängt dann auch irgendwo Dein Problem zusammen: Anstatt einfach das <img>-Element via text-align in einem <p> zu zentrieren, wie man es mit allen Inline-Elementen macht, kippst Du lauter einzelne <div>s in den Code.
Gruß und danke
Roggi
-
Und jetzt wird es für mich etwas zu kryptisch. Leider verstehe ich nicht so ganz, was ich da nun machen muss.
Es ist nicht so, dass das <img>-Element sich nicht direkt per CSS bearbeiten ließe. Und auch in diesem Fall sind zwei der drei <div>s überflüssig und das verbleibende womöglich auch noch fehl am Platze.
Mein erster Ansatz (n.b.: ich kenne das Umfeld nicht) wäre grob folgender:
<p id="logozeile">
<img id="l" usw…>
<img id="r" usw…>
<img id="m" usw…>
</p>p#logozeile {
text-align:center;
}
p#logozeile img#l {
float:left;
}
p#logozeile img#r {
float:right;
}Das hat allerdings den Nachteil, dass die Elementreihenfolge nicht gehalten wird (links, rechts, mittig), da zu umfließende Elemente zuerst kommen müssen. Deshalb als zweiter Ansatz:
<p id="logozeile">
<img id="l" usw…>
<img id="m" usw…>
<img id="r" usw…>
</p>p#logozeile {
text-align:center;
}
p#logozeile img#l {
position:absolute;
left:0;
}
p#logozeile img#r {
position:absolute;
right:0;
}Wie Du siehst, ist es zumindest grundsätzlich nicht nötig, jedes Bild in ein eigenes <div> zu packen; die <img>-Elemente kann man genauso gut direkt mit CSS formatieren. Damit fallen zwei Deiner <div>s weg.
Das dritte <div> habe ich durch ein <p> ersetzt. Ich denke, hier kann man gerne ein echtes Absatz-Element einfügen statt eines bedeutungslosen <div>s. Aber ich gebe zu, dass man geteilter Meinung sein kann über die Frage, ob das im Kontext nun Sinn ergibt oder nicht (deshalb schrieb ich "_womöglich_ fehl am Platz").
-
Hallo Tork,
ich habe von einem Chatmitglied noch diesen Lösungsansatz erhalten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
h1 { text-align: center; background:url(images/logo_kopfteil.gif) no-repeat left center; }
h1 span { display: block; background:url(images/logo_kopfteil_gespiegelt.gif) no-repeat right center; }
</style>
</head><body>
<h1><span><img src="images/kopfteil_begruessung.gif" alt="555. Argus Online" /></span>
</body>
</html>Ich werde aber auch deinen Vorschlag alleine schon aus lerntechnischen gründen ausprobieren.
Nochmal (ist ein einfaches) Danke.......
Gruß
Roggi
-
-
-