Html Homepage Problem.

04/01/2012 03:56 eMsentryy.#1

Hallo epvp, ich habe ein problem mit meiner Homepage...
Ich will sie so anpassen das sie f�r jeden die optimale gr��e hat aber wen z.b mein kollege auf die seite geht sieht er alles viel zu gro� weil ich eine h�here aufl�sung habe...
Hier ist einmal das script;

Spoiler

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT language="JavaScript">
<!--
//
self.resizeTo(800,600);
//-->
</script>
<title>NappyBoy.de</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="generator" content="Web Page Maker">
<style type="text/css">
div#container
{
	position:relative;
	width: 1897;
	margin-top: 0px;
	margin-left: auto;
	margin-right: auto;
	text-align:left; 
}
body {text-align:center;margin:0}
</style>

</head>
<body background="http://www.elitepvpers.com/forum/images/bg00.jpg">
<div id="container">
<div id="image1" style="position:absolute; overflow:hidden; left:-4px; top:0px; width:1901px; height:1198px; z-index:0"><img src="http://www.elitepvpers.com/forum/images/bg.png" alt="" title="" border=0 width=1901 height=1198></div>

<div id="image5" style="position:absolute; overflow:hidden; left:1202px; top:400px; width:64px; height:64px; z-index:1"><a href="http://www.youtube.com/user/n3t4rtist?feature=" title="n3t4rtist Youtube Channel"><img src="http://www.elitepvpers.com/forum/images/youtube.png" alt="" title="" border=0 width=64 height=64></a></div>

<div id="image2" style="position:absolute; overflow:hidden; left:296px; top:0px; width:250px; height:95px; z-index:2"><a href="http://nappyboy.de/" title="NappyBoy.de"><img src="http://www.elitepvpers.com/forum/images/Home.png" alt="" title="" border=0 width=250 height=95></a></div>

<div id="image3" style="position:absolute; overflow:hidden; left:731px; top:0px; width:250px; height:95px; z-index:3"><a href="http://nappyboy.de/CrossFire NA Skins von cReez'.exe" title="Skins"><img src="http://www.elitepvpers.com/forum/images/skins.png" alt="" title="" border=0 width=250 height=95></a></div>

<div id="image4" style="position:absolute; overflow:hidden; left:1119px; top:0px; width:580px; height:95px; z-index:4"><a href="ts3server://195.82.158.240?port=14100" title="Teamspeak3 Server"><img src="http://www.elitepvpers.com/forum/images/teamspeak3.png" alt="" title="" border=0 width=580 height=95></a></div>

<div id="video" style="position:absolute; overflow:hidden; left:338; top:402px; width:853; height:480px; z-index:4"><iframe width="853" height="480" src="http://www.youtube.com/embed/drFYK8a_X7I" frameborder="1" allowfullscreen></iframe>

</div>

</body>
</html>

Woran liegt das?
Die homepage findet ihr im script als Titel.

04/01/2012 09:18 NotEnoughForYou#2

Hey,

als erstes, das geh�rt eigentlich in die WebDevelopment Sektion ;)

Also ,

verzichte auf absolute Positionierungen. Positionier die Sachen mittels margin. Wenn du ein absolut flexibles Layout willst ( dass sich die Bilder etc beim verkleinern des Fensters anpassen), dann musst du mit % arbeiten. Aber f�rs erste reicht es, wenn du deine Elemente nicht mehr absolut positionierst.

04/01/2012 10:13 cin0s#3

Und gew�hne dir am besten an das ganze CSS Zeug in eine extra .css zu schreiben. Das wird sonst sehr un�bersichtlich und am Ende blickt man da nichts mehr. Einfach in den head Berreich folgendes einf�gen:
<LINK rel=stylesheet type="text/css" href="namedeinercssdatei.css">

In der Datei hast du denn etwa so Zugriff auf die div tags:
#image1
{
//Wie es halt aussehen soll. Bei dir:
position:absolute;
overflow:hidden;
left:-4px;
top:0px;
width:1901px;
height:1198px;
z-index:0
}

Nat�rlich musst du alles noch relativ Positionieren. Wie das geht erf�hrst du hier:
[Only registered and activated users can see links. Click Here To Register...]

04/01/2012 12:30 eMsentryy.#4

Quote:

Originally Posted by cin0s

Und gew�hne dir am besten an das ganze CSS Zeug in eine extra .css zu schreiben. Das wird sonst sehr un�bersichtlich und am Ende blickt man da nichts mehr. Einfach in den head Berreich folgendes einf�gen:
<LINK rel=stylesheet type="text/css" href="namedeinercssdatei.css">

In der Datei hast du denn etwa so Zugriff auf die div tags:
#image1
{
//Wie es halt aussehen soll. Bei dir:
position:absolute;
overflow:hidden;
left:-4px;
top:0px;
width:1901px;
height:1198px;
z-index:0
}

Nat�rlich musst du alles noch relativ Positionieren. Wie das geht erf�hrst du hier:
[Only registered and activated users can see links. Click Here To Register...]

Das habe ich gemacht...Jetz steht die Homepage mittig.
[Only registered and activated users can see links. Click Here To Register...]