PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Einfach Design ; Verzerrt sich total o_O


dadie
30.03.2005, 13:41
Hi ,

Ich bin mal wieder dabei ein Webdesign herrzustellen den wie sagt man nur aus asche kann ein Phonix entstehn ^^ Tja. nur stosse ich auf ein Problem was ich nicht lösen kann :

index.html



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="./default.css" type="text/css">
</head>
<body>
<div class="head" >&nbsp;</div>
<div class="menu" >Menu</div>

<div class="content" >&nbsp;</div>
</body>
</html>


default.css



A {text-decoration: none; color: #000000;}

A:visited{text-decoration: none; color: #000000;}

A:active{text-decoration: none; color: #000000;}

A:hover{text-decoration: underline; color: #000000;}


body {
text-align:center ;
background-color: #FFFFFF;
margin: 10px auto;
}


A .menu{text-decoration: none; color: #000000;}

A:visited.menu{text-decoration: none; color: #000000;}

A:active.menu{text-decoration: none; color: #000000; margin-left:2px;}

A:hover.menu{ text-decoration:none; color: #000000; margin-left:2px; }

.head {

width:100% ;
border: 1px solid #000000 ;
background-color:#018fe1 ;
position:absolute; left:25px;right:25px;top:10px;
height:87px;
}


.menu {

width:163px ;
border: 1px solid #000000 ;
background-color:#3ec0fc ;
position:absolute; left:25px;top:108px;



}

.content {

width:100% ;
border: 1px solid #000000 ;
background-color:#3ec0fc ;
position:absolute; right:25px;left:198px;top:108px;



}


Irgentwie sah das in meinem Kopf ganz anderrs aus bzw. der Head ist zu klein und der content viel zu Gross o_O nur warum ? Ich ahne schon das width 100% des verfügbaren browser fensters errechnet und nett den verfügbaren platz zwischen 198px und 25px -.-

Naja weiss jemand ne Lösung für das Problem ?

Mfg Dadie
Maisaffe
30.03.2005, 14:26
Hm... doof.
Vielleicht frägst du den Browser und die Aulösung ab und läßt PHP den Wert errechnen, was besseres fällt mir auch nicht ein.

Dennis
kris
01.04.2005, 11:44
Ganz einfach: "der Fehler liegt bei den Stylesheets!"



.head {

border: 1px solid #000000 ;
background-color:#018fe1 ;
position:absolute; left:25px;right:25px;top:10px;
height:87px;
}


.menu {

width:163px ;
border: 1px solid #000000 ;
background-color:#3ec0fc ;
position:absolute; left:25px;top:108px;



}

.content {

border: 1px solid #000000 ;
background-color:#3ec0fc ;
position:absolute; right:25px;left:198px;top:108p x;



}


Du musst nur beim Content, genauso wie beim Head das "100%" weglassen!
Beim Mozilla-Firefox wird das dann Fehlerfrei dargestellt und beim Internet-Explorer auch, sobald du anstatt eines Leerzeichens bei der Index.html
eine Tabelle mit Breite 100% einfügst:





<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" href="./default.css" type="text/css">
</head>
<body>
<div class="head" >

<table width="100%">
<tr>
<td>&nbsp;</td>
</tr>
</table>

</div>

<div class="menu" >Menu</div>

<div class="content" >

<table width="100%">
<tr>
<td>&nbsp;</td>
</tr>
</table>

</div>
</body>
</html>


mfg Xecrypt aka kr!s
</font>
dadie
01.04.2005, 11:55
thx my Hero^^
kris
01.04.2005, 16:32
No Problemo, mein friend!
Das nächste mal: "Gleich per PN bei mir melden ^__^ "