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

HTML-Code:

<!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

Code:

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!"

Code:

  .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:

HTML-Code:

 <!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 ^__^ "

Thema: Einfach Design ; Verzerrt sich total o_O

Themen-Optionen

Anzeige

Einfach Design ; Verzerrt sich total o_O

Berechtigungen