Claudio Somaini: CSS Layout macht Probleme

Beitrag lesen

SELF-Forum

CSS Layout macht Probleme

Claudio Somaini
– Informationen zu den Bewertungsregeln

Hallo Community,

ich habe ein Problem mit meinem ersten CSS Layout. Da das Problem nicht ganz so einfach niederzuschreiben ist, bitte ich auch mal meinen Code im Browser anzuschauen. Das Problem ist, dass der Rot gefärbte Bereicht viel zu gross wird.

Kann mir bitte jemand helfen?

<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
html {
        height: 100%;
        margin: 0;
        padding: 0;
}

body {
        background-image: url(../gfx/bg.gif);
        height: 100%;
        margin: 0;
        padding: 0;
}

#page_center_help {
        text-align: center;
        position: absolute;
        left: 0px;
        width: 100%;
        height: 100%;
        overflow: visible;
}

#page_main {
        width: 780px;
        height: 100%;
        background-color: #FDFDF2;
        text-align: left;
        position: absolute;
        margin-left: -390px;
        left: 50%;
}

#page_leftborder {
        width: 13px;
        height: 100%;
        background-image: url(../gfx/left_border.gif);
        background-repeat: no-repeat;
        position: relative;
        float: left;
}

#page_innerbox {
        width: 754px;
        height: 100%;
        position: relative;
        float: left;
}

#page_rightborder {
        width: 13px;
        height: 100%;
        background-image: url(../gfx/right_border.gif);
        background-repeat: no-repeat;
        position: relative;
        float: left;
}

#page_header {
        width: 754px;
        height: 32px;
        background-image: url(../gfx/header_bg.gif);
        background-repeat: repeat-x;
        text-align: left;
}

#page_graphic {
        width: 754px;
        height: 111px;
        background-color: #CECECE;
        text-align: left;
}

#page_menu {
        width: 754px;
        height: 26px;
        background-image: url(../gfx/bg_menu.gif);
        text-align: left;
        border: 1px #FFFFFF;
        border-style: solid none none none;
}

#page_content {
        width: 754px;
        height: 100%;
        background-color: #EAEAEA;
        text-align: left;
        border: 1px #FFFFFF;
        border-style: solid none none none;
    position: relative;
}

#page_content_left {
        width: 580px;
        height: 100%;
        background-color: red;
        text-align: left;
        position: relative;
        float: left;
}

#page_content_right {
        width: 173px;
        height: 100%;
        background-color: #EAEAEA;
        text-align: left;
        position: relative;
        float: left;
        border: 1px #D0D0D0;
        border-style: none none none solid;
}

#page_footer {
        width: 754px;
        height: 26px;
        background-image: url(../gfx/bg_footer.gif);
        background-repeat: repeat-x;
        position: relative;
} -->
</style>
</head>
<body>
<div id="page_center_help">
 <div id="page_main">
  <div id="page_leftborder"></div>
   <div id="page_innerbox">
     <div id="page_header"></div>
     <div id="page_graphic"></div>
     <div id="page_menu"></div>
     <div id="page_content">
       <div id="page_content_left"></div>
       <div id="page_content_right"></div>
     </div>
     <div id="page_footer"></div>
      </div>
   <div id="page_rightborder"></div>
 </div>
</div>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln