Supportnet / Forum / Webseiten/HTML

Hallo, ich versuche grade, eine Seite von Tabellenlayout auf css umzustellen. Dabei tritt bei Opera und Mozilla folgendes Problem auf, beim IE allerdings nicht: Die Navigation (halb am linken, halb am rechten Rand des Fensters) konnte ich in folgender Art und Weise ausrichten: [code]<div style="position:absolute; top:20px; left:10px">[/code] Nun aber der Hauptinhalt, der horizontal zentriert erscheinen soll: [code]<div style="text-align:center"> <IMG SRC="dateien/titel.jpg" border=0 width="465" height="566" alt="Titel"> <a class="mail" style="position:absolute; top:520px; left:130px; background-image:none; font-weight:normal" href="mailto:mailadresse">mailtext</a> </div>[/code] Die Ausrichtung des Bildes gelang mit text-align:center perfekt, die email-Adresse allerdings schwirrt bei o.g. Browsern ganz links oben rum. Offensichtlich ist die Ausrichtung nicht am <div> orientiert, sondern am gesamten body. Nur warum? Darf vielleicht ein <a> nicht Unterelement eines <div> sein? Falls dem so ist, wie kann ich das Problem umgehen? Vielen Dank, Pida

Hallo,

ich habe mit "div style" angefangen und schnell gemerkt, dass die verschiedenen Browser (Oprera, Netscape) die Pixel-Angaben unterschiedlich interpretieren. Bin dann zu Tabellen übergegangen, aber alles andere mache ich mit CSS.

silverone

N'anbend!

Du Positionierst die Mail Adresse mit "position:absolute" in dem fall hat die Option "text-align:center" im div keine Auswirkung auf auf die Position deiner Mail-Adresse

MfG
Dr. Ma-Busen

@silverone: Die Option halt ich mir auch noch auf.

@Dr.M.: Da hast du recht. Wenn ich diese Angaben (position, top, left) weglasse, wird die Mailadresse aber auch nicht zentriert, sondern ganz links im Fenster angezeigt.
Daher obiger Versuch. Eigentlich (Verhalten des IE, Infos von SelfHtml) sollte die linke obere Ecke der Mailaddresse sich 520px unter und 130px rechts von der linken oberen Ecke des <div> (in diesem Fall selbige Ecke des Bildes) befinden. Statt dessen erfolgt die Ausrichtung an der linken oberen Ecke des Browserfensters.

Das sollte nicht so sein laut
http://de.selfhtml.org/css/eigenschaften/positionierung.htm#position

Danke, Pida

Ja, du hast da ja auch zwei objekte in dem DIV. Ein Bild und den Link und der Browser reit die Objekte neben einander, von rechts nach links. Mach mal zwischen Bild und Link ein <br> dann ist der Link zentriert.

Die geschichte da bei selfHTML kenne ich, schau dir das noch mal an das Beispiel. Dort sind alle DIV Objekte mit position:absolute positioniert. Da habe ich auch mal ne zeit dran gesessen bis ich gemerkt habe, dass das ganze nur anscheinend dann geht, wenn das übergeordnete DIV auch mit position:absolute positioniert ist.



MfG
Dr. Ma-Busen

Auf der Selfhtml-Seite zu der dein Link führt sthet u.a.

Dein Quellcode wird weniger fehleranfällig, wenn du erst mal alles unnötige entfernst. Mit unnötig meine ich natürlich "für die Lösung des Problems unnötig". So solltest du also erst mal so Sachen wie "background-image:none; font-weight:normal" weg lassen bis das Problem gelöst ist. Und das "position:absolute" solltest du auf jeden Fall aus dem Link nehmen.

Leider werde ich aus deiner Problembeschreibung nicht ganz schlau. Du schreibst ein mal und dann gleich danach "Ganz links oben" ist doch nicht die Mitte vom Body???? Wo ist denn der Link? Und Wo soll er sein?

Übrigens scheinst du zwischen "Layout mittels Tabellen" und "Layout mittels CSS" zu unterscheiden. Ich nehme an, du meinst "Layout mittels DIVs". Denn CSS kann man genau so gut auch bei Tabellen werden.

"Mach mal zwischen Bild und Link ein <br> dann ist der Link zentriert."
Klappt leider nicht:-(

Gruß, Pida

Ja, ähm habe ich vielleicht vergessen zu sagen. Du darfst natürlich dann nicht den Link mit position:absolute positionieren, sonst bringt das <br> nichts

MfG

Der Browser reiht die Objekte nicht von rechts nach links nebeneinander, sondern von links nach rechts. Eben deshalb ist mir völlig schleierhaft, wieso der Link oben links sein sollte.

Entferne mal "position:absolute" aus dem Link und trenne den Link und das Bild mit "<br>". Dann ist der Link mittig unter dem Bild.

@Friedel: Die zitierte Textpassage hab ich zwar überlesen, aber ein einschließen des Links in einen weiteren <div> trotzdem probiert. Geklappt hat's nicht, den Grund liefert wohl Antwort 4.

Meine Fehlerbeschreibung war in der Tat widerspürchlich. Nochmal anders:
Der <div>, in dem sich auch die Grafik befindet, ist ja horizontal zentriert ausgerichtet. Das Bild wird auch dementsprechend angezeigt. Ich hatte erwartet, dass der Link (ohne Angaben zu position usw.) unter dem Bild und ebenfalls zentriert angezeigt wird. Das ist aber nicht eingetreten, zwar befindet er sich vertikal in der richtigen Position, wird aber ganz links im Fenster angezeigt.

Daher mein 2. Ansatz: Den link mit position:absolute ausrichten; ich hatte erwartet, dass dabei der <div> als Bezugspunkt gilt. Das klappt leider auch nicht; die Angaben werden statt dessen aufs ganze Fenster bezogen (siehe Antwort 4).

Übrigens meinte ich schon "Layout mittels CSS", denn nichts anderes ist ja eine Angabe wie z.B. position:absolute. Das alte Layout funktionierte halt ausschließlich mit Tabellen (<td width="30%"> usw).

Danke, Pida

Ups, dass meinte ich auch von links nach rechts. Weis jetzt gar nicht wie ich auf rechts nach links gekommen bin *G

position:absolute hatte ich schon entfernt. Hab jetzt nur das da stehen:

<div style="text-align:center">
<IMG SRC="dateien/titel.jpg" border=0 width="465" height="566" alt="Titel">
<br>
<a href="mailto:mailadresse">mailtext</a>
</div>

Das Resultat bleibt: Im IE ein zentriertes Bild und darunter dein zentrierter Link, in Mozilla ist nur das Bild zentriert; der Link ist ganz links.

Könntest du u. U. den gesamten Code der Seite posten? Wenn ich ausschließlich das in eine HTML-Datei in den body schreibe, was du in Antwort 11 gepostet hast, dann wird auch im Mozilla beides (Bild und Link) zentriert dargestellt, genau wie in firefox und IE.

@MoRe99: Hast Recht! Hiermit müsste das Problem aber wieder auftreten:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>                                           

<HEAD>

<style type="text/css">
a { display:block; 
    background-image:url(dateien/linkbutton.jpg); 
    background-repeat:no-repeat;
    width:93px; height:98px; 
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    line-height:167px; }
a:hover { background-image:url(dateien/aktivbutton.jpg); }

a.mail:link { color:#FFFFFF;
              background-image:none; 
              font-weight:normal; }
a.mail:visited {color:#FFFFFF; }
a.mail:hover {color:#C0C0C0; }      
</style>

</HEAD>
<BODY>

<div style="position:absolute; top:20px; left:10px">	
	<a href="index.html">Home</a>		
	<a style="position:absolute; top:127px" href="dateien/artist.html">Artist</a>        	
      	<a class="breit" style="position:absolute; top:255px" href="gästebuchadresse">gästebuchtext</a>     							
</div>

					
<div style="text-align:center">
	<IMG SRC="dateien/titel.jpg" border=0 width="465" height="566" alt="Titel"><br>	
	<a href="mailto:mailadresse">mailtext</a>       
</div>


<div style="position:absolute; top: 20px; right:50px">	        	
	<a class="breit" href="dateien/downloads.html">Downloads</a> 	
	<a style="position:absolute; top:127px" href="dateien/gallery.html">Gallery</a> 	
        <a style="position:absolute; top:255px" href="dateien/live">Live</a> 	
</div>

</BODY>
</html>

Entferne mal das display:block aus der CSS definition für a, dann sollte es zentriert sein ;)

MfG
Dr. Ma-Busen

Yep, passt! Frage meinerseits, da ich selber in CSS-Dingen und anderen Anfänger bin: warum ist dem so?

Passt, zerschiesst nur alle anderen links;-)

Gruß, Pida

Warum das so ist kann ich auch nicht sagen, muss wohl was mit der geschichte von HTML zu tun haben und den blockelementen.

@Pida
Dann definiere den CSS der links nach Folgenden muster:

<style type...>
...

a:link.className { 
...
}
</style>

....
<a class="className" href...>Text</a>

Das hast du ja anscheinend schon versucht bzw. gemacht mit a.mail...
Achte aber auf die reihenfolge:
a.link
a.visited
a.hover
a.active
a.focus


MfG
Dr. Ma-Busen

• Befehlstabelle für css
• "@import"-ähnliche Variante für <body>-Bereich
• CSS