Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > positionierung von einem image
Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > positionierung von einem image

Pages: [1]

geschrieben von Sky@Walker am 21.01.2004 - 13:58
Hallo!

ich habe auf einer Seite ein Bild (rot dargestellt), was ich gerne ganz oben am Rand der HP positionieren möchte.

Ich habe schon vieles probiert.
Erst habe ich per css-style style="position:absolute; top=0cm;" eingestellt. Dann macht er es zwar, aber er positioniert es wieder linksbündig und nicht zentriert.
Dann habe ich es in eine Tabelle gesetzt, die "align="center"" gesetzt. dann macht er es aber nicht wirklich zentiert sonder zentiert-rechtsbündig (also mehr rechts als zentriert).
So wie es jetzt ist, ist es zwar zentriert, aber nicht top=0cm!

Hat jemand vielleicht ne Lösung dafür?
Hier der code:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>KJF-Gruppen</title>
<link rel="stylesheet" href="../scripts/kjf.css" type="text/css">
<script language="JavaScript" src="../scripts/contextmenu.js" type="text/javascript"></script>
</head>
<body class="blank">
	<div align="center"> 
	<img src="../images/bistumskarte_kjfgruppen.jpg" usemap="#KJFGruppen" border="0"> 
	</div> 
<div style="color:#336699; font-weight:bold; position:absolute; top:15px; left:20px;">
	KJF-Gruppen im Bistum Fulda
</div>
<map name="KJFGruppen" style="z-index:3">
  <area name="Baunatal" shape="rect" coords="85,98,161,118" 
  		href="#" onclick="alert('[KJF-Baunatal] \nDiese Seite existiert noch nicht !!')" alt="KJF-Baunatal">
  <area name="Gensungen" shape="rect" coords="141,129,228,147" 
		href="#" onclick="alert('[KJF-Gensungen] \nDiese Seite existiert noch nicht !!')" alt="KJF-Gensungen">
  <area name="Petersberg" shape="rect" coords="206,278,287,297" 
		href="#" onclick="alert('[KJF-Petersberg] \nDiese Seite existiert noch nicht !!')" alt="KJF-Petersberg">
  <area name="Burgwald" shape="rect" coords="27,199,100,219" 
		href="#" onclick="alert('[KJF-Burgwald] \nDiese Seite existiert noch nicht !!')" alt="KJF-Burgwald">
  <area name="Fulda" shape="rect" coords="203,305,259,326" 
		href="#" onclick="alert('[KJF-Fulda] \nDiese Seite existiert noch nicht !!')" alt="KJF-Fulda">
  <area name="Kleinlüder" shape="rect" coords="126,280,201,299" 
  		href="http://www.kjfkleinlueder.de.vu/" target="_blank" alt="KJF-Kleinlüder">
  <area name="Somborn" shape="rect" coords="99,367,167,385" 
  		href="#" onclick="alert('[KJF-Somborn] \nDiese Seite existiert noch nicht !!')" alt="KJF-Somborn">
  <area name="Blankenau" shape="rect" coords="114,305,192,323" 
  		href="#" onclick="alert('[KJF-Blankenau] \nDiese Seite existiert noch nicht !!')" alt="KJF-Blankenau">
  <area name="Großkrotzenburg" shape="rect" coords="77,392,198,412" 
  		href="#" onclick="alert('[KJF-Großlrotzenburg] \nDiese Seite existiert noch nicht !!')" alt="KJF-Großkrotzenburg">
</map>
</body>
</html>

geschrieben von Pablo am 21.01.2004 - 14:57
schon so probiert?!?

HTML-Quelltext
1: 
2: 
3: 
<div align="center"> 
	<img src="../images/bistumskarte_kjfgruppen.jpg" usemap="#KJFGruppen" border="0" style="position:absolute;top:0px;">
	</div>


Pablo

geschrieben von Armin am 21.01.2004 - 15:03
Hallo,

ändere mal den div-tag
HTML-Quelltext
1: 
<div style="position: absolute;	left: 0px;top: 0px;text-align: center;	width: 100%;" >


Armin

geschrieben von Sky@Walker am 21.01.2004 - 15:41
Vielen Dank für die schnellen Postings

@Armin: Hey super, so funktioniert es!
Daran hatte ich nicht gedacht; ein großes div zu machen und darin dann nur den "Text" zu zentrieren.
Ist in einem div immer alles automatisch "top=0"? Oder wie kommt es, dass das Bild dann innerhalb des divs ganz oben ist?

geschrieben von Armin am 21.01.2004 - 16:03
Hi,

innerhalb eines Layers ist die Postionierung links oben. Durch diverse style-Angaben (CSS) kann man dies beeinflussen.

Armin


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.