Jump to content
  • 0

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

DenisV

Asked by DenisV,

 Share

Question

DenisV Explorer

DenisV

Posted
Posted

Добрый день.

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

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

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

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

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

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

22eecfaa8165789af1cccc1d8de51ed5.jpg

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

<?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:

* {
  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;

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
sammasati Explorer

sammasati

Posted
Posted

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept