Не могу разобраться с CSS шаблона

DenisV · November 16, 2011

Добрый день.

Хотел бы спросить знающих как сделать чтобы получить такую структуру дивов.

Нужно чтобы info-head был в самом верху. Элементы внутри этого дива позиционированы относительно.

На info-head нужно наложить со смещением вверх main body.

Фон main-body должен растягиваться по высоте относительно дочерних элементов.

А сразу после Main-body должен идти footer

Должно выглядеть вот так:

Вот код index.php с дивами:

Reveal hidden contents

<?php
  /**
* @copyrightCopyright (C) 2011 
* @licenseGPL
*/
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$logo = $this->params->get('logo');
?>
<!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/<?php echo $this->template ?>/css/template.css" type="text/css" />

<?php
  if($this->countModules('content') == 0) $contentwidth = "100";
  ?>
</head>
<body>
  <div class="all">
    <div class="info-head">
      <div class="sport"><jdoc:include type="modules"  name="sport" /></div>
      <div class="history"><jdoc:include type="modules"  name="history" /></div>
      <div class="fly"><jdoc:include type="modules"  name="fly" /></div>
      <div class="art"><jdoc:include type="modules"  name="art" /></div>
      <div class="darts"><jdoc:include type="modules"  name="darts" /></div>
    </div>
    <div class="main-body">
      <div class="menu">
			<div class="menu11"><jdoc:include type="modules"  name="menu11" /></div>
			<div class="menu12"><jdoc:include type="modules"  name="menu12" /></div>
			<div class="logo"></div>
      </div>
      
      <div class="main-back">
           <div class="left"><jdoc:include type="modules"  name="left" /></div>
           <div class="right">
				   <div class="spor"><jdoc:include type="modules"  name="spor" /></div>
				   <div class="cont">
				   <div class="content<?php echo $contentwidth; ?>">
					  <jdoc:include type="modules"  name="content" />
					  <jdoc:include type="component" />
					</div>
					<div class="banner"><jdoc:include type="modules"  name="banner" /></div>
                    </div>
  
           </div>
					  <?php if($this->countModules('caps')) : ?>
					  <div class="caps"><jdoc:include type="modules"  name="caps" /></div><?php endif; ?>
      </div>
     
    </div> 
			  <div class="footer">
					<div class="menu21"><jdoc:include type="modules"  name="menu21" /></div>
					<div class="menu22"><jdoc:include type="modules"  name="menu22" /></div>
					<div class="info"><jdoc:include type="modules"  name="info" /></div>
			  </div>    
  
    </div>

</body>

и css:

Reveal hidden contents

* {
  margin: 0;
  paddng: 0;


}
.all{
width:1010px;
margin: 0 auto;
background-color:#000;

}
.info-head{
width:1010px;
height:450px;
background: url(images/info-head.jpg)
}
.sport{
position:relative;
width:134px;
height:170px;
top:127px;
float:left;
background: url(images/box.jpg);
}
.history{
position:relative;
width:115px;
height:125px;
top:43px;
left: -4px;
float:left;
background:url(images/history.jpg);

}
.fly{
position:relative;
float:left;
top:43px;
width:195px;
height:125px;
background:url(images/fly.jpg);
}
.art{
z-index:1;
float:left;
position: relative;
top:42px;
left:151px;
width:255px;
height:125px;
background:url(images/art.jpg);
}
.darts{
float:right;
position:relative;
top:122px;
left:-7px;
width:220px;
height:222px;
background:url(images/darts.jpg);
}
.main-body{
z-index:3;
position:absolute;
width:735px;
height:100%;
top:;
margin:-277px 120px;


}
.menu{
width:735px;
height:40px;
background:url(images/menu.jpg) no-repeat;}
.menu11{
  font: 12px Helvetica, sans-serif;
  height:40px;
  line-height:40px;
  width:100%;
  overflow:hidden;
  margin:0px;
  padding:0px;
  }
  .menu11 li {
  list-style-type:none;
  float:left;
  padding-left:5px;
  }
  .menu11 a {
  height:40px;
  display:block;
  padding-right: 15px;
  text-decoration: none;
  color:black;
  }
.menu11 a:hover{color: white;
  }

.menu12{
}
.logo{
position:absolute;
width:237px;
height:130px;

left:234px;
background:url(images/logo.png);

}
.main-back{
position:relative;
overflow:hidden; height:1000px;
margin-top: 5px;
width:735px;
background:url(images/mainback.jpg)  no-repeat;

}
.left{
font-size:12px;line-height:18px;
color:white;
font:10px;
position:relative;
left:20px;
right:10px;
top:100px;
padding:5px;
float:left;
width:200px;

background:rgba(0,0,0,0.6);
-moz-border-radius: 5px; /* Для Firefox 3 */
    -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    border-radius: 5px; /* Для современных браузеров */
}
.right{
float:left;
width:520px;
}
.spor{
font-size:12px;line-height:18px;
color:white;
font:10px;
position:relative;
top:30px; 
right:20px;
float:right;
width:300px;
background:rgba(0,0,0,0.6);
-moz-border-radius: 5px; /* Для Firefox 3 */
    -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    border-radius: 5px; /* Для современных браузеров */
}
.custom a:link {color:white; text-decoration:none;}
.spor a:hover {color:red; text-decoration:none;}
.spot a:visited{color:white;}
.cont{
float:left;

}
.content{
font-size:12px;line-height:18px;
color:white;
font:10px;
position:relative;
top: 40px;
left:30px;
float:left;
width:355px;
padding: 10px;
background:rgba(0,0,0,0.6);
-moz-border-radius: 5px; /* Для Firefox 3 */
    -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    border-radius: 5px; /* Для современных браузеров */
}
.content100{
font-size:12px;line-height:18px;
color:white;
font:10px;
position:relative;
top: 40px;
left:30px;
float:left;
width:460px;
padding: 10px;
background:rgba(0,0,0,0.6);
-moz-border-radius: 5px; /* Для Firefox 3 */
    -webkit-border-radius: 5px; /* Для Safari 4 и Chrome */
    border-radius: 5px; /* Для современных браузеров */
}
.banner{
width:370px;
}
.caps{
position:relative;
padding-top: 70px;
padding-left:50px;
top:30px;
left:20px;
float:left;
width:700px;
background:url(images/beermenu.png) 0 0 no-repeat;}
.caps a:hover{
opacity: 0.8;}

}
.footer{

width:1010px;
height:167px;
background:url(images/footer.png);
}
.menu21{
width:140px;
}
.menu22{
width:140px;
}
.info{
position:relative;
left:320px;
width:450px;
padding: 10px;
font-size:12px;line-height:15px;
color:white;
font:10px;

sammasati · November 16, 2011

Вот такой вариант: http://jsfiddle.net/bmvCw/2/

Для main-body и footer создается div с абсолютной позицией, который смещается немного вверх.

Про фон не совсем понятно. Залейте куда-нибудь страницу с картинками.

Sign In

Не могу разобраться с CSS шаблона

Question

DenisV

Link to comment

Share on other sites

1 answer to this question

Recommended Posts

sammasati

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information