Hab es soweit wohl hinbekommen.. Vorerst. Ist ja noch im Aufbau. Allerdings hab ich nun das Problem, dass die Headergrafik bei einer anderen Bildschirmauflösung nicht mehr direkt über dem Content ist.
So ist es bei meiner:
Und so bei einer niedrigeren:
Ist das normal? Oder kriegt man das irgendwie hin, dass es bei einer niedrigeren Auflösung genauso aussieht, wie es bei meiner hohen aussieht?
Zumal das Markup auch nicht super schön ist.
$this->bbcode_second_pass_code('', '<table id="final_content">
<colgroup>
<col width="195px" />
<col width="*" />
<col width="195px" />
</colgroup>
<tr>
<td id="little_table_left">
<div id="little_table_top"></div>
<div id="little_table_content"><div id="little_table_text">{nav} </div></div>
<div id="little_table_bottom"></div>
</td>
<td id="content" height="100%">
<div id="content_content"><div id="content_table_top"><img src="templates/images/content_top_left_right.png"></div><div id="content_text"><!--!footer--></div></div><div id="content_table_bot"> </div>
</td>
<td id="little_table_right">
<div id="little_table_top"></div>
<div id="little_table_content"><div id="little_table_text">{stats} </div></div>
<div id="little_table_bottom"></div>
</td>
</tr>
</table>')
$this->bbcode_second_pass_code('', 'body {
background-image: url(images/bg.jpg);
background-position: top center;
background-repeat: no-repeat;
background-color: #000;
font-size: 13px;
}
* {
padding:0px;
margin:0px;
}
#final_content {
width: 100%;
height:auto;
}
#content {
vertical-align:top;
width: 670px;
height:100%;
padding-top: 300px;
}
#content_table_top {
background-image: url(images/content_top.png);
background-repeat: no-repeat;
width: 670px;
height: 170px;
}
#content_table_bot {
background-image: url(images/content_bot.png);
background-repeat: no-repeat;
width: 697px;
height: 173px;
}
#content_table_top_left_right {
background-image: url(images/content_top_left_right.png);
background-repeat: no-repeat;
padding-right: 50px;
margin-right: 50px;
width: 709px;
height: 342px;
}
#content_content {
min-height: 400px;
max-width: 709px;
background-image: url(images/content_bg.png);
background-repeat:repeat-y;
}
#little_table_left {
width:195px;
padding-top:300px;
padding-left:110px;
vertical-align: top;
}
#little_table_right {
width:195px;
padding-top:300px;
padding-right:120px;
vertical-align: top;
}
#little_table_top {
background-image: url(images/little_table_top.jpg);
background-repeat: no-repeat;
height: 36px;
width: 195px;
}
#little_table_content {
background-image: url(images/little_table_content.jpg);
background-repeat: repeat-y;
width: 195px;
}
#little_table_bottom {
background-image: url(images/little_table_bottom.jpg);
background-repeat: no-repeat;
height: 36px;
width: 195px;
}
#little_table_text {
padding-left: 20px;
padding-right: 20px;
}
#content_text {
margin-top: -70px;
margin-bottom: -70px;
padding-left: 70px;
padding-right: 110px;
}
a{
color: #0099FF;
text-decoration: none;
}
a:hover {
color: #00FFFF;
text-decoration: none;
}
.trhead { background-color:#990000; color:#FFFFFF; }
.trlight { background-color:#330000; }
.trdark { background-color:#000000; }')