design verschiebt sich

Status
Nicht offen für weitere Antworten.
B

BlackPerfect

Grünschnabel
Hi Leute,

ich bin gerade dabei ne Seite zu für ein Verein zu machen, aber irgendwie verschiebt sich mein Design, wenn das Fenster relativ klein ist.
Weiß das ist oft gestelltes Problem, aber ich weiß trotzdem nicht woran das liegt..:confused:

Hier mal der Code dazu:

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>yoseikan</title>

<style type="text/css">
body 
{

 height:100%;
 width:100%;
 font-family:Verdana;
 font-size:12px;
 background-color:#4B4231;
 font-family: 'ArialMT', 'Arial', 'sans-serif';
}

#header {
text-align:center;
font-size:13px;
text-decoration:none;
margin-left:10%;
height:45px;
width:881px;
background-color:#4B4231;

}
#logo
{
background-image: url(tmpl/pic/logo.jpg);
margin-left:10%;
width:222px;
min-height:549px;
height:auto !important;  /* für moderne Browser */
height:549px;  /*für den IE */
float:left;
}

#content
{
float:left;
width:610px;
min-height:549px;
height:auto !important;  /* für moderne Browser */
height:549px;  /*für den IE */
background-color:#B79F79;
}

#corner
{
background-image: url(tmpl/pic/corner.jpg);
float:left;
width:49px;
min-height:549px;
height:auto !important;  /* für moderne Browser */
height:549px;  /*für den IE */
background-color:#B79F79;
}

#footer
{
clear:left;
margin-left:10%;
width:881px;
min-height:40px;
height:auto !important;  /* für moderne Browser */
height:40px;  /*für den IE */
background-color:#4B4231;
}

a {
    color: #ffffff;
    text-decoration: none;
}
a:visited {
    color: #969696;
    text-decoration: underline;
}
a:hover {
    color: #b0b0b0;
    text-decoration: underline;
}

</style>
</head>

<body>
<div id="header">
&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" class="menu">Neue Termine</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" class="menu">Kontaktliste</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<a href="#" class="menu">Fotoarchiv</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>

<div id="logo"></div>

<div id="content"></div>

<div id="corner"></div>

<div id="footer"></div>

</body>
</html>

Hier der Link zur Seite...

http://snake87.alfahosting.org/yoseikan/login.php

Danke schon im vorraus
 
Hi,

binde die Elemente in einem übergeordneten Element ein, und statte dieses mit der entsprechenden fixen Breite aus.
 
Was ist daran so schwer zu verstehen?

Code: 
<body>
<div id="wrapper">
     <div id="header"></div>
     <div id="logo"></div>
     <div id="content"></div>
     <div id="corner"></div>
     <div id="footer"></div>
</div>
</body>
Code: 
#wrapper {
width:881px;
margin-left:10%;
}

#header {
text-align:center;
font-size:13px;
text-decoration:none;
/*margin-left:10%;*/ /* auskommentiert = deaktiviert */
height:45px;
width:881px;
background-color:#4B4231;
}

#logo
{
background-image: url(tmpl/pic/logo.jpg);
/*margin-left:10%;*/ /* auskommentiert = deaktiviert */
width:222px;
min-height:549px;
height:auto !important;  /* für moderne Browser */
height:549px;  /*für den IE */
float:left;
}

#footer
{
clear:left;
/*margin-left:10%;*/ /* auskommentiert = deaktiviert */
width:881px;
min-height:40px;
height:auto !important;  /* für moderne Browser */
height:40px;  /*für den IE */
background-color:#4B4231;
}
Auf diese Weise werden die Elemente bei einem zu kleinen Fenster nicht mehr umgebrochen.
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück