Positionierung von Elementen - javarea.de Forum powered by javarea.de

Archivlink: javarea.de Forum > (X)HTML & CSS (allgemein) > Positionierung von Elementen

Vollständigen Link anzeigen: javarea.de Forum > (X)HTML & CSS (allgemein) > Positionierung von Elementen

Pages: [1]

geschrieben von JDEmp am 13.07.2007 - 20:44

Hallo alle zusammen.
Ich bin gerade dabei meine alte Webpage von HTML auf XHTML umzustellen.
Dazu habe ich zunächst einen Bereich beschrieben mit einer festen breiten und einer 100%igen höhe. Die ich durch "margin 0 auto" zentrieren lasse. Nun würde ich gerne mehrere Grafiken über diesen Bereich positionieren. Da der Bereich aber dynamisch ist, kann ich keine Positionierung via "absolute" verwenden sondern muss mich an "relative" halten. Also eine Positionierung relativ zur zentrierung. Nun wird aber der Bereich wo die Grafiken eigentlich wären, wie es eigendlich auch sein muss, frei gehalten. Gibt es eine möglichkeit dies zu verhindern bzw. kann man das Problem vieleicht ganz anders angehen?

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 XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <style type="text/css">
  <!--
   @import url(gfx/style.css);
  -->
  </style>
 </head>
 <body>
  <div style="background-image: url(gfx/background_gfx_b.gif); width: 480px; height: 100%; margin: 0 auto;">
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <br />
   <a href="index.php?section=news" target="_self" onmouseover="getElementById('0').src='gfx/news_button_on.gif'" onmouseout="getElementById('0').src='gfx/news_button.gif'"><img src="gfx/news_button.gif" width="480" height="28" id="0" /></a><br />
   <a href="index.php?section=ueber_mich" target="_self" onmouseover="getElementById('1').src='gfx/ueber_mich_button_on.gif'" onmouseout="getElementById('1').src='gfx/ueber_mich_button.gif'"><img src="gfx/ueber_mich_button.gif" width="480" height="28" id="1" /></a><br />
   <a href="index.php?section=mappe" target="_self" onmouseover="getElementById('2').src='gfx/mappe_button_on.gif'" onmouseout="getElementById('2').src='gfx/mappe_button.gif'"><img src="gfx/mappe_button.gif" width="480" height="28" id="2" /></a><br />
   <a href="index.php?section=bilderbuch" target="_self" onmouseover="getElementById('3').src='gfx/bilderbuch_button_on.gif'" onmouseout="getElementById('3').src='gfx/bilderbuch_button.gif'"><img src="gfx/bilderbuch_button.gif" width="480" height="28" id="3" /></a><br />
   <a href="index.php?section=gaestebuch" target="_self" onmouseover="getElementById('4').src='gfx/gaestebuch_button_on.gif'" onmouseout="getElementById('4').src='gfx/gaestebuch_button.gif'"><img src="gfx/gaestebuch_button.gif" width="480" height="28" id="4" /></a><br />
   <a href="index.php?section=links" target="_self" onmouseover="getElementById('5').src='gfx/links_button_on.gif'" onmouseout="getElementById('5').src='gfx/links_button.gif'"><img src="gfx/links_button.gif" width="480" height="28" id="5" /></a>
   <div style="position:relative; left:377px; top:-300px;">
    <img src="gfx/aa.gif" width="165" height="165" /><img src="gfx/ab.gif" width="165" height="165" /><br />
    <img src="gfx/ba.gif" width="165" height="165" /><img src="gfx/bb.jpg" width="165" height="165" /><br />
    <img src="gfx/ca.jpg" width="165" height="165" /><img src="gfx/cb.jpg" width="165" height="165" /><br />
    <img src="gfx/da.jpg" width="165" height="165" /><img src="gfx/db.gif" width="165" height="165" /><br />
    <img src="gfx/ea.gif" width="165" height="165" /><img src="gfx/eb.gif" width="165" height="165" /><br />
   </div>sdfgh
  </div>
 </body>
</html>

style.css

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: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 
56: 
57: 
58: 
59: 
60: 
61: 
62: 
63: 
64: 
65: 
66: 
67: 
68: 
69: 
70: 
71: 
72: 
73:

body
{
	font-family:Verdana;
	font-size:11px;
	color:#131723;
	margin: 0;
	padding: 0 0;
	background-image:url(background_gfx.gif);
}

img
{
	border: 0px;
}

a:link
{
	font-family:Verdana;
	color:#131723;
	text-decoration:underline;
}

a:vlink
{
	font-family:Verdana;
	color:#131723;
	text-decoration:underline;
}

a:visited
{
	font-family:Verdana;
	color:#131723;
	text-decoration:underline;
}

a:hover
{
	font-family:Verdana;
	color:#FFB800;
	text-decoration:underline;
}

a:active
{
	font-family:Verdana;
	color:#131723;
	text-decoration:underline;
}

textarea
{
	font-family:Verdana;
	font-size:11px;
	background-color:#F2F5FF;
	border:0px solid #000000;
}

input
{
	font-family:Verdana;
	font-size:11px;
	background-color:#F2F5FF;
	border:0px solid #000000;
}

select
{
	font-family:Verdana;
	font-size:11px;
	background-color:#F2F5FF;
	border:0px solid #000000;
}

Hab zwar schon eine unbefriedigende Lösung, indem ich die Höhe vom "div" was die Grafik einschließt auf "0px" setze. Allerdings funktioniert das nur unter Fire Fox nicht aber im IE.

Ich danke schonmal in vorraus für jede Hilfe.

geschrieben von JDEmp am 14.07.2007 - 01:40

Ok, ich hab jetzt selbst noch eine gute Lösung gefunden. Hab dazu einen komplett neuen Denkansatz verwendet.

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:

<div style="width: 810px; height: 100%; margin: 0 auto;">
   <div style="width: 480px; background-color:#ffffff; float: left;">
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <br />
    <a href="index.php?section=news" target="_self" onmouseover="getElementById('0').src='gfx/news_button_on.gif'" onmouseout="getElementById('0').src='gfx/news_button.gif'"><img src="gfx/news_button.gif" width="480" height="28" id="0" /></a><br />
    <a href="index.php?section=ueber_mich" target="_self" onmouseover="getElementById('1').src='gfx/ueber_mich_button_on.gif'" onmouseout="getElementById('1').src='gfx/ueber_mich_button.gif'"><img src="gfx/ueber_mich_button.gif" width="480" height="28" id="1" /></a><br />
    <a href="index.php?section=mappe" target="_self" onmouseover="getElementById('2').src='gfx/mappe_button_on.gif'" onmouseout="getElementById('2').src='gfx/mappe_button.gif'"><img src="gfx/mappe_button.gif" width="480" height="28" id="2" /></a><br />
    <a href="index.php?section=bilderbuch" target="_self" onmouseover="getElementById('3').src='gfx/bilderbuch_button_on.gif'" onmouseout="getElementById('3').src='gfx/bilderbuch_button.gif'"><img src="gfx/bilderbuch_button.gif" width="480" height="28" id="3" /></a><br />
    <a href="index.php?section=gaestebuch" target="_self" onmouseover="getElementById('4').src='gfx/gaestebuch_button_on.gif'" onmouseout="getElementById('4').src='gfx/gaestebuch_button.gif'"><img src="gfx/gaestebuch_button.gif" width="480" height="28" id="4" /></a><br />
    <a href="index.php?section=links" target="_self" onmouseover="getElementById('5').src='gfx/links_button_on.gif'" onmouseout="getElementById('5').src='gfx/links_button.gif'"><img src="gfx/links_button.gif" width="480" height="28" id="5" /></a>
    <br />
   </div>
   <div style="width: 330px; height: 825px; float: left; position: relative; left: -103px;">
    <img src="gfx/aa.gif" width="165" height="165" /><img src="gfx/ab.gif" width="165" height="165" /><br />
    <img src="gfx/ba.gif" width="165" height="165" /><img src="gfx/bb.jpg" width="165" height="165" /><br />
    <img src="gfx/ca.jpg" width="165" height="165" /><img src="gfx/cb.jpg" width="165" height="165" /><br />
    <img src="gfx/da.jpg" width="165" height="165" /><img src="gfx/db.gif" width="165" height="165" /><br />
    <img src="gfx/ea.gif" width="165" height="165" /><img src="gfx/eb.gif" width="165" height="165" /><br />
   </div>
  </div>