Problem: Image Elemente und Text nicht mittig ausgerichtet

[Andreas]

ich hab eine ganz einfache HTML Datei mit Text und Bildern. Ganz unten habe ich folgendes fix positioniert:

Code:
----------------------
in html datei (natürlich css schon eingebunden, das ja funktioniert hat):

<div id="unten">
   <a href="index12.htm"><img src="vorheriges.gif" alt="vorheriges Bild" width="60" height="40" border="0"></a>
      
   <a href="index02.htm")"><img src="nächstes.gif" alt="nächstes Bild" width="60" height="40" border="0"></a>
   <p></p>

© &Ouml;TB TV Mödling 1863
</div>

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

in css datei:

#unten {   position:"absolute"; bottom:"0px"; }

jetzt ist es aber so das er die 2 Image Elemente und den Text von der Mitte aus nach rechts ausgerichtet hat. dh. dass die Image Objekte nicht in der Mitte waren sondern nur der linke Rand der Elemente war mittig ausgerichtet.
Nur möcht ich nicht left:"...px" angeben müssen, da wenn man die Fenstergröße mit der Maus verändert ist es wieder nicht in der Mitte. Das Bottom muss bleiben da es auf jeden Fall ganz unten immer am gleichen Platz ausgerichtet sein muss!!

Hoffentlich fällt euch was ein!! Danke für die Mühe!
---------
MFG

Andi

[MudGuard]

Hi,

<div id="unten">
   <a href="index12.htm"><img src="vorheriges.gif" alt="vorheriges Bild" width="60" height="40" border="0"></a>
      
   <a href="index02.htm")"><img src="nächstes.gif" alt="nächstes Bild" width="60" height="40" border="0"></a>

^^ was wird das?

<p></p>
© &Ouml;TB TV Mödling 1863
</div>
in css datei:
#unten {   position:"absolute"; bottom:"0px"; }

Welcher Browser macht denn so einen Unsinn mit?
Weder symbolische Konstante (wie absolute) noch Längenangaben dürfen in "" eingeschlossen werden.

jetzt ist es aber so das er die 2 Image Elemente und den Text von der Mitte aus nach rechts ausgerichtet hat. dh. dass die Image Objekte nicht in der Mitte waren sondern nur der linke Rand der Elemente war mittig ausgerichtet.

Im vorhandenen Code gibt es nichts, was auf eine Zentrierung hinweist.
Eigentlich müßten die Bilder also links angeordnet sein.

Nur möcht ich nicht left:"...px" angeben müssen, da wenn man die Fenstergröße mit der Maus verändert ist es wieder nicht in der Mitte.

Also soll das div in die Mitte?
margin-left:auto; margin-right:auto; sorgt in modernen Browsern dafür.

cu,
Andreas

[Andreas]

HI

Das wird eine Homepage für einen Turnverein. Wobei diese HTML Seite 1 Bild und 1 Beschreibung und diese 2 Links enthält.
ich will diese 2 Links (die ja Bilder sind) mittig und unten ausrichten mittels CSS Angaben. Nun der code der da steht hab ich nach langem studieren von selfhtml geschrieben:

Code:
----------------------
in html datei (natürlich css schon eingebunden, das ja funktioniert hat):

<div id="unten">
   <a href="index12.htm"><img src="vorheriges.gif" alt="vorheriges Bild" width="60" height="40" border="0"></a>
      
   <a href="index02.htm")"><img src="nächstes.gif" alt="nächstes Bild" width="60" height="40" border="0"></a>
   <p></p>

© &Ouml;TB TV Mödling 1863
</div>

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

in css datei:

#unten {   position:"absolute"; bottom:"0px"; }
-----------------------------------------

Ich versteh absolut nicht was du meinst: "»» Weder symbolische Konstante (wie absolute) noch Längenangaben dürfen in "" eingeschlossen werden.
"

Wegen der Zentrierung hab ich mehreres probiert: einmal mit <div align="center"> in der html seite, dann im css code mit text-align:"center"; vertical-align:"middle"; , dann mit left:"50%"; dann mit jetzt deinen Angaben margin-left:auto; margin-right:auto;
Funktioniert hat alles nicht, da wieder nur die äußere linke kante in der mitte war aber nicht das gesamte objekt. Ich habs auch ohne den "" Gänsefüßchen bei dem Code in CSS probiert, genau das gleiche.
(Ich arbeite mit IE6.0!)

Kann mir wer helfen wie ich den Code anders schreiben müsste oder welche Code zeilen ich dazufügen muss. Bitte mit genauer Anleitung, bin kein Profi!

Danke

Andreas

[Axel Richter]

Hallo,

Ich versteh absolut nicht was du meinst: "»» Weder symbolische Konstante (wie absolute) noch Längenangaben dürfen in "" eingeschlossen werden.

Er meint, in CSS muss es position:absolute; bottom:0; und _nicht_ position:"absolute"; bottom:"0"; heißen.

Wegen der Zentrierung hab ich mehreres probiert: einmal mit <div align="center"> in der html seite, dann im css code mit text-align:center;

Das wäre gegangen, wenn der div eine Breite gehabt hätte. Wobei align="center" nicht mehr verwendet werden sollte.

dann mit left:"50%";

Das schiebt den linken Rand des div in die Mitte.

dann mit jetzt deinen Angaben margin-left:auto; margin-right:auto;

Das sollte eigentlich gehen. Zumindest in NN7, Mozilla und IE6.0 mit doctype-Angabe HTML 4.01.
http://selfhtml.teamone.de/html/allgemein/grundgeruest.htm#dokumenttyp

Probier's mal so:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
#unten {position:absolute; bottom:0; width:100%; text-align:center;}
-->
</style>
</head>
<body>
<div id="unten">
   <a href="index12.htm"><img src="vorheriges.gif" alt="vorheriges Bild" width="60" height="40" border="0"></a>
      
   <a href="index02.htm"><img src="nächstes.gif" alt="nächstes Bild" width="60" height="40" border="0"></a>
<p>© &Ouml;TB TV Mödling 1863</p>
</div>
</body>
</html>

Hinweise:
Der div hat eine Breite von 100% (gesamte Dokumentbreite). Der Inhalt des div ist zentriert. Da die Zentrierung sich nur auf Inline-Elemente (a, img) und Texte auswirken soll, reicht das. Sollen im <div id="unten"> weitere Blockelemente (andere divs) zentriert werden, dann müssen _diese_ margin-left:auto und margin-right:auto bekommen.

Gruß

Axel

[MudGuard]

Hi,

dann mit left:"50%";
Das schiebt den linken Rand des div in die Mitte.

Nein. Diese Angabe ist fehlerhaft, muß also ignoriert werden.
Auch diese Längenangaben muß ohne "" geschrieben werden.
cu,
Andreas

[Axel Richter]

Hallo,

gut, ich korrigiere mich:

dann mit left:"50%";

Damit schiebt der MSIE den linken Rand des div in die Mitte.

Gruß :P

Axel