Html Homepage Problem.

eMsentryy. · 04/01/2012, 03:56

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.

NotEnoughForYou · 04/01/2012, 09:18

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.

cin0s · 04/01/2012, 10:13

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:

eMsentryy. · 04/01/2012, 12:30

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:

Das habe ich gemacht...Jetz steht die Homepage mittig.