Hallo,
habe ein dreispaltiges Layout und möchte die mittlere Spalte mit einer fixen Breite festlegen und die linke und rechte Spalte soll sich in der Breite dem Browserfenster anpassen. Die Hintergrundbilder der linken und rechten Spalte sollen dann bei Platzmangel entsprechend abgeschnitten werden.
Anbei mein Code:
HTML
Die CSS:
Bitte um Hilfe - Danke!
habe ein dreispaltiges Layout und möchte die mittlere Spalte mit einer fixen Breite festlegen und die linke und rechte Spalte soll sich in der Breite dem Browserfenster anpassen. Die Hintergrundbilder der linken und rechten Spalte sollen dann bei Platzmangel entsprechend abgeschnitten werden.
Anbei mein Code:
HTML
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/transhimalaya/css/template.css" type="text/css" />
</head>
<body id="page_bg">
<div id="left_col">
<div id="top_left">
</div>
<div id="top2_left">
</div>
</div>
<div id="center_col">
<div id="top_middle">
</div>
<div id="top2_middle">
</div>
<div id="content">
<div id="hg_navi_l">
Navi links
</div>
<div id="inhalt">
Inhalt
</div>
<div id="hg_facts">
Facts
</div>
</div>
</div>
<div id="right_col">
<div id="top_right">
rechts1
</div>
<div id="top2_right">
rechts2
</div>
</div>
</body>
</html>
Die CSS:
Code:
html {
height: 100%;
margin-bottom: 1px;
}
form {
margin: 0;
padding: 0;
}
body {
font-family: Helvetica,Arial,sans-serif;
line-height: 1.3em;
margin: 0px 0px 0px 0px;
font-size: 13px;
color: #000000;
}
a:link, a:visited {
text-decoration: none;
font-weight: normal;
}
a:hover {
text-decoration: underline;
font-weight: normal;
}
input.button { cursor: pointer; }
p { margin-top: 0; margin-bottom: 5px; }
img { border: 0 none; }
#page_bg {
padding: 0px 0;
margin-bottom: 1px;
width: 100%;
height: 100%;
background-color: #f6f2ec;
}
div#left_col {
float: left;
width: 100%;
height: 100%;
}
div#center_col {
text-align: center;
margin: 0px auto;
height: 100%;
width: 1025px;
}
div#right_col {
float: right;
width: 100%;
height: 100%;
}
div#top_left {
background: url(../images/hg_oben_l.jpg) 0 0 no-repeat;
height: 123px;
}
div#top_middle {
background: url(../images/hg_oben.jpg) 0 0 no-repeat;
height: 123px;
}
div#top_right {
background: url(../images/hg_oben_r.jpg) 0 0 no-repeat;
height: 123px;
}
div#top2_left {
background: url(../images/hg_oben2_l.jpg) 0 0 no-repeat;
height: 211px;
}
div#top2_middle {
background: url(../images/hg_oben2.jpg) 0 0 no-repeat;
height: 211px;
}
div#top2_right {
background: url(../images/hg_oben2_r.jpg) 0 0 no-repeat left;
height: 211px;
}
div#content {
text-align: center;
width: 100%;
}
div#hg_navi_l {
background: url(../images/hg_navi_l.jpg) 0 0 repeat-y;
width: 199px;
height: 100%;
float: left;
}
div#inhalt {
background-color: #ffffff;
width: 548px;
height: 100%;
float: left;
}
div#hg_facts {
background: url(../images/hg_facts.jpg) 0 0 repeat-y;
width: 278px;
height: 100%;
float: right;
}
Bitte um Hilfe - Danke!