18-11-2009, 11:39
Witam!
Mam pewien problem natury technicznej podczas tworzenia templatki do joomli. Od kilku godzin nad tym siedzę i nie wytrzymuje już. Tutaj CSS:
A tutaj stronka:
Mam problem z takim ustawieniem divów 'left2' i 'content żeby po zwiększeniu wysokości 'content' wydłużała się także kolumna 'left2'. W tej chwili nad 'left2' jest jeszcze 'transparent' , który dopełnia diva 'contentbox' w którym siedzi cały ten problem. Chciałbym, żeby jeszcze na dole doczepiony był div 'downbar' i zmieniał położenie razem z resztą tej "ekipy". Nie mam już pomysłów jak to wykonać. Byłbym wdzięczny za pomoc oraz ew. sugestie co jest nie tak w kodzie, bo pierwszy raz biorę się za xhtml i css.
Mam pewien problem natury technicznej podczas tworzenia templatki do joomli. Od kilku godzin nad tym siedzę i nie wytrzymuje już. Tutaj CSS:
Kod:
body {
margin: 0 auto;
background-image: url(../images/bg-down.gif)
}
#body1 {
width: 100%;
height: 140px;
background-image: url(../images/bg-toper.gif);
position: absolute;
z-index: 1;
}
#body2 {
margin-top: 140px;
width: 100%;
height: 287px;
background-image: url(../images/bg-top-center.gif);
position: absolute;
z-index: 1;
}
#body3 {
margin-top: 427px;
width: 100%;
height: 298px;
background-image: url(../images/bg-top.gif);
position: absolute;
z-index: 1;
}
#wraper {
margin-top: 23px;
margin-left: -439px;
width: 877px;
left: 50%;
position: absolute;
float: left;
z-index: 2;
}
#logo {
background-image: url(../images/index_01.jpg);
top: 0;
left: 0;
width: 265px;
height: 117px;
position: absolute;
float: left;
overflow: hidden;
text-align: center;
}
#topbar {
background-image: url(../images/index_02.jpg);
top: 0;
left: 265px;
width: 612px;
height: 62px;
float: left;
position: absolute;
overflow: hidden;
}
#topmenu {
background-image: url(../images/index_03.jpg);
top: 62px;
left: 265px;
width: 612px;
height: 55px;
float: left;
position: absolute;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
#mainmenu {
background-color: #e9e0d0;
top: 117px;
left: 0px;
width: 265px;
height: 287px;
float: left;
position: absolute;
overflow: hidden;
vertical-align: middle;
}
#rotator {
background-color: #e9e0d0;
top: 117px;
left: 265px;
width: 612px;
height: 287px;
float: left;
position: absolute;
overflow: hidden;
vertical-align: middle;
text-align: center;
}
#left1 {
background-color: #462e1f;
top: 404px;
left: 0;
width: 265px;
height: 200px;
position: absolute;
overflow: hidden;
float: left;
}
#medbar {
top: 404px;
left: 265px;
width: 612px;
height: 44px;
float: left;
position: absolute;
overflow: hidden;
}
#online {
background-color: #1a100b;
top: 0;
left: 0;
width: 321px;
height: 44px;
float: left;
position: absolute;
overflow: hidden;
vertical-align: middle;
}
#find {
background-color: #1a100b;
top: 0;
left: 321px;
width: 291px;
height: 44px;
float: left;
position: absolute;
overflow: hidden;
vertical-align: middle;
text-align: right;
}
#contentbox {
width: 877px;
top: 448px;
left: 0;
position: absolute;
overflow: hidden;
float: left;
}
#transparent {
width: 265px;
height: 156px;
top: 0;
left: 0;
position: absolute;
float: left;
overflow: hidden;
}
#left2 {
background-color: #301e15;
top: 156px;
left: 0;
width: 265px;
height: 100%;
position: absolute;
overflow: hidden;
float: left;
}
#content {
background-color: #25160f;
top: 0;
left: 265px;
width: 612px;
height: 400px;
float: left;
position: absolute;
overflow: hidden;
}
#downbar {
background-image: url(../images/foot.gif);
top: auto;
left: 0;
width: 877px;
height: 13px;
float: left;
overflow: hidden;
position: absolute;
}
.inside1 {
padding: 25px;
}
.inside2 {
padding-left: 30px;
}
.inside3 {
padding-right: 30px;
}
.inside4 {
padding: 17px;
}
.logocenter {
margin-top: 8px;
}
.topmenucenter {
margin-top: 27px;
}A tutaj stronka:
Kod PHP:
<?php
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!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="css/template2.css" type="text/css" />
</head>
<body>
<div id="body1"></div>
<div id="body2"></div>
<div id="body3"></div>
<div id="wraper">
<div id="logo">
<img src="images/logo1.png" alt="Mazowieckie Wnętrza" class="logocenter" />
</div>
<div id="topbar">
</div>
<div id="topmenu">
<div class="topmenucenter">
</div>
</div>
<div id="mainmenu">
</div>
<div id="rotator">
</div>
<div id="left1">
<div class="inside1">
</div>
</div>
<div id="medbar">
<div id="online">
<div class="inside2">
</div>
</div>
<div id="find">
<div class="inside3">
</div>
</div>
</div>
<div id="contentbox">
<div id="transparent">
</div>
<div id="left2">
</div>
<div id="content">
<div class="inside4">
</div>
</div>
<div id="downbar">
</div>
</div>
</div>
</body>
</html>
Mam problem z takim ustawieniem divów 'left2' i 'content żeby po zwiększeniu wysokości 'content' wydłużała się także kolumna 'left2'. W tej chwili nad 'left2' jest jeszcze 'transparent' , który dopełnia diva 'contentbox' w którym siedzi cały ten problem. Chciałbym, żeby jeszcze na dole doczepiony był div 'downbar' i zmieniał położenie razem z resztą tej "ekipy". Nie mam już pomysłów jak to wykonać. Byłbym wdzięczny za pomoc oraz ew. sugestie co jest nie tak w kodzie, bo pierwszy raz biorę się za xhtml i css.
![[Obrazek: templateor.jpg]](http://img34.imageshack.us/img34/8255/templateor.jpg)
lay na tabelkach robię w godzinę, a tu tak się męczyć trzeba... Jeszcze na dodatek Internet Explorer wyświetla wszystko nieco inaczej niż Firefox, Chrome, Safari i Opera, więc trzeba się bawić w oszukiwanie go 