Tweet
Hallo zusammen,
ich habe meinen Entwurf für meine Homepage nach über einem Jahr mal wieder aufgegriffen und weiterentwickelt. Das Design steht mittlerweile weitesgehend. Ich habe das CSS-Boxmodell verwendet.
Nun habe ich das Problem, das die Page erstens im IE ganz anders aussieht;
zweitens und viel wichtiger ist, wenn ich die Page in einem Widescreen Monitor oder die page mit einer niedrigeren Auflösung öffne, ist ebenfalls alles verzogen.
Beispielsweise meine Navigation, die habe ich fixde positioniert. Wenn ich meinen Browser auf ein Fenster verkleinere habe ich wenig Chancen die Navi zu nutzen.
Was kann ich tun?
Hier ist der css code für die gestaltung:
ich habe meinen Entwurf für meine Homepage nach über einem Jahr mal wieder aufgegriffen und weiterentwickelt. Das Design steht mittlerweile weitesgehend. Ich habe das CSS-Boxmodell verwendet.
Nun habe ich das Problem, das die Page erstens im IE ganz anders aussieht;
zweitens und viel wichtiger ist, wenn ich die Page in einem Widescreen Monitor oder die page mit einer niedrigeren Auflösung öffne, ist ebenfalls alles verzogen.
Beispielsweise meine Navigation, die habe ich fixde positioniert. Wenn ich meinen Browser auf ein Fenster verkleinere habe ich wenig Chancen die Navi zu nutzen.
Was kann ich tun?
Hier ist der css code für die gestaltung:
Code:
body
{
background-color:#a9a9a9;
font-family:Verdana;
font-size:12px;
margin:10px;
scrollbar-face-color: #868EFB;
scrollbar-highlight-color: #FFFF00;
scrollbar-3dlight-color: #FF8000;
scrollbar-darkshadow-color: #000080;
scrollbar-shadow-color: #00FFFF;
scrollbar-arrow-color: #FFFF00;
scrollbar-track-color: #EEEEEE;
}
h1 { color:#000050; font-size:150%; text-align:left; }
h3 { color:#000080; font-size:250%; text-align:center; }
.box_banner
{
border-width: 10px;
border-color:#bdb76b;
border-style:ridge;
padding:3px;
background-color:#bdb76b;
}
.box_menu
{
margin-top:50px;
left:10px;
top:190px;
width: 250px;
height: 500px;
border-width:10px;
border-color:#bdb76b;
border-style:outset;
padding:5px;
background-color:#bdb76b;
position:fixed;
}
.box_navi
{
margin:10px;
}
.box_main
{
border-width:medium;
border-color:#bdb76b;
border-style:double;
padding:5px;
margin: 0 0px 0px 250px;
margin-top:7px;
background-color:#fafad2;
height:550px;
}
.box_round
{
margin:60px;
padding:10px;
border:1px solid #aaaaaa;
-moz-border-radius:10px;
}
Kommentar