[HTML] DIV - Design mittig machen

Darling
Hallo !

ich habe folgendes Problem:

auf meiner Fotohomepage http://digital-photography.at.vu habe ich letztens ein Design erstellt, allerdings ist es so schmal, dass es auf einem großen bildschirm ziemlich weit links in der ecke verschwindet.. würde es gerne mittig machen, allerdings funktionierts doch nicht so wie ich möchte. Kann mir evtl jemand dabei helfen?

Hier der Code:





code:
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:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
97:
98:
99:
100:
101:
102:
103:
104:
105:
106:
107:
108:
109:
110:
111:
112:
113:
114:
115:
116:
117:
118:
119:
120:
121:
122:
123:
124:
125:
126:
127:
128:
129:
130:
131:
132:
133:
134:
135:
136:
137:
138:
139:
140:
141:
142:
143:
144:
145:
146:
147:
148:
149:
150:
151:
152:
153:
154:
155:
156:
157:
158:
159:
160:
161:
162:
163:
164:
165:
166:
167:
168:
169:
170:
171:
172:
173:
174:
175:
176:
177:
178:
179:
180:
181:
182:
183:
184:
185:
186:
187:
188:
189:
190:


<html>
<head>
<title>Photography</title>
</head>
<body style="background-image:url(pics/1.png)">


<div style="position: absolute; left: 0px; top: 0px;">
<img src="pics/desi.png"/>
</div>





<div style="position: absolute; left: 396px; top: 276px; width: 390px;">


<CENTER><FONT face=Verdana >


<font size=1><font color=gray>

<a href="hauptseite.html"><FONT color=gray size=1>Start</FONT></a>

-

<a href="about.html"><FONT color=gray size=1>About</FONT></a>

-

<a href="photography.html"><FONT color=gray size=1>Photography</FONT></a>


-

<a href="menue2.html"><FONT color=gray size=1>Photos</FONT></a>

-

<a href="http://24822.my-gaestebuch.de" onclick="javascript:window.open('http://24822.my-gaestebuch.de', 'Popup', 'width=650, height=600, resizable=yes, scrollbars=yes '); return false"><FONT color=gray size=1>You</a>




</center>

<div align=right><a href="partner.html"><font color=gray size=1>» partner</font></a></div>



<STYLE type=text/css>
<!--
BODY {
scrollbar-face-color: #000000;
scrollbar-highlight-color: #ffffff;
scrollbar-3dlight-color: #000000;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #ffffff;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #ffffff;
}
-></STYLE>

<STYLE type=text/css>
<!--
A:link {text-decoration: none; }
A:visited {text-decoration: none; }
A:hover {text-decoration: underline; height: 0; filter:none; }
A:active {text-decoration: none; }
//-->
</STYLE>
</div>





<div style="position: absolute; left: 396px; top: 297px; width: 390px;">



<p>



<br>

<img alt="" src="pics/willkommen.png" />


<br><br>

<FONT face=Arial><font size=2><font color=gray>

<i>
&nbsp;&nbsp;&nbsp;&nbsp;
Fotografie drückt die Gefühle aus,

<br><br>


&nbsp;&nbsp;&nbsp;&nbsp;
die der Mensch nicht im Stande ist, 

<br><br>

&nbsp;&nbsp;&nbsp;&nbsp;
in Worte zu fassen.


</i>



<br><br><br>
<script type="text/javascript">
<!--
	var b = new Array();
	b[0] = new Image(); b[0].src = "pics/bil1.jpg"; 
	b[1] = new Image(); b[1].src = "pics/bil2.jpg"; 
	b[2] = new Image(); b[2].src = "pics/bil3.jpg"; 
	b[3] = new Image(); b[3].src = "pics/bil4.jpg"; 
        b[4] = new Image(); b[3].src = "pics/bil5.jpg"; 
	var i = 0;
	var speed = 2700; // Delay in milliseconds
	function diaShow()
		{
		if(i > 3) i = 0;
		document.images.show.src = b[i].src;
		i = i + 1;
		window.setTimeout("diaShow()",speed);
		}
//-->
</script>

</head><body onload="diaShow()">

<img id="show" src="pics/bil1.jpg" alt="" vspace="12" width="350" border="0" height="227" hspace="10">




<br><br><br>



<a href="impressum.html"><FONT color=gray size=1>Impressum</a> © Carmen Schwarz 2011 </FONT>


</div>




</font></font></font>
<br />
<br />
<br />




<STYLE type=text/css>
<!--
A:link {text-decoration: none; }
A:visited {text-decoration: none; }
A:hover {text-decoration: underline; height: 0; filter:none; }
A:active {text-decoration: none; }
//-->
</STYLE>




</p>


</DIV>



</body>
</html>


maerrochirim
versuche mal das hier: <img src="pics/desi.png"/> in <center></center> oder wenn das nicht klappt änder doch mal bei
<div style="position: absolute; left: 0px; top: 0px;">
bei left das 0 px. hier musst du dann immer überprüfen wenn du die zahl geändert hast ob es dir gefällt oder nicht ob noch mehr oder eher weniger
Darling
das bei left ist eh klar, allerdings will ichs halt so, dass es egal welche Größe der Bildschirm hat, immer mittig ist. wenn dann jemand ne Auflösung von 1024 x 768 hat, ists bei ihm dann warscheinlich viel zu weit drüben als bei einer höheren Auflösung :/
maerrochirim
dann versuch mal das mit center
Darling
das funktioniert nicht, müsste ja die ganzen positionen auch umändern, das ist ja alles in position "left". allerdnigs funktionierts nicht wenn ichs einfach in "center" ändere :/
maerrochirim
Probiers oben mal mit diesem Code

<body marginwidth="0" leftmargin="0" marginheight="0" topmargin="0" scroll="auto" style="background-image:url(pics/1.png)">
<img name="Design" src="pics/1.png" width="995" height="577" BORDER="0" align="left"> bevor du mit den Div's anfängst. Außerdem würde ich dir noch raten deinen Hintergrund zu ändern. Momentan ist er ja blau mit diesem Streifen in der Mitte. Da aber dein Design genauso aussieht nur das der Streifen in der Mitte noch gefüllt ist hättest du später wenn sie nicht genau übereinander liegen 4 streifen. weißt du wie ich meine? Ich würde als Hintergrund nur dieses Bild von dem Blau nehmen also etwa 50 auf 50 pixel und nur mit diesem blau füllen. Wenns dann immer noch nicht klappt schreib mir mal ne PN ich würde dir Hp auch programmieren nur brauch ich dazu dann deine erlaubnis. da ich mir dann ein paar sachen abspeichern muss zum testen obs klappt.
Gleykur
Ich würde die Anzeige als ein DIV machen und dass dann mit "position:absolute; left:50%; margin-left:-abc px;" ausrichten. Wobei abc die halbe Breite des DIVs ist Augenzwinkern