Верстаю первый сайт

Diego · November 23, 2010

Здравствуйте!

2 вопроса..

1: Как убрать отступ между правым и левым контентом(на картинке проблема указана под номером 1) Пробовал и маржины обнулять и паддинги и бордеры.. Не фурычет...(((

2: Как сделать так, чтобы правый контент изменял свою height одновременно с левым... Может как-то наследованием?! ставил height:inherit - не помогло... (на картинке под номером 2)

Картинка и код прилагаются:

body { 
	 margin: 0 auto; 
	 padding: 0 1.6em;
	 background: url('12.jpg');
	 overflow: auto;
 }

 /* все для меню */
 #menu{
	 width:766px;
	 margin:15px;
	 position: absolute;
 }

 ul{
	 list-style:none;
 }

 #menu li{
	 list-style:none;
	 display:block;
	 float:left;
	 margin:65px 0 0 0;
 }

 #menu li a{
	 display:block;
	 float:left;
	 height:34px;
	 width:122px;
	 color:#fff;
	 text-transform:uppercase;
	 font-size:11px;
	 font-weight:bold;
	 background:url(buttongrey.jpg) no-repeat;
	 line-height:34px;
	 padding:0 0 0 9px;
	 text-decoration:none;
 }

 #menu li a span{
	 display:block;
	 height:34px;
	 color:#d2eeff;
	 line-height:34px;
	 padding-right:15px;
	 text-align:center;
 }

 #menu li a:hover{
	 display:block;
	 float:left;
	 background:url(buttonblue.jpg) no-repeat;
	 height:34px;
 }


 /*————-*/



 .wrapper{
	 width: 766px;
	 margin: 0 auto;
 }

 .header-area img{
	 margin: 0 .1em;
	 padding: 0;
	 display: block;
 } 

 .bar
 {
	 position: absolute;
	 margin:150px 35px 0;
 }
 /*контент*/



 .content{ 
	 background: white;
	 margin: 0 .1em;
	 width: 616px;
	 padding: 6em .6em .6em .6em;
	 float:left;
	 border:0;
 } 

 div#rightcontent {
	 width:127px;
	 margin-top:0;
	 margin-left: 0;
	 float:right;
	 background: white;
	 }


 div#rightcontent ul {
	 text-align: left;
	 padding: 6em 10px;}
 /*энд контент*/
 p { 
	 text-align: justify;
	 font-family: verdana, tahoma, monospace;
	 font-size: 9pt;	
 } 
 .footer{
	 width:766px;
	 height:94px;
	 float:left;
 }
 .footer img {
	 padding: 0;
	 display: block;
 }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 <html>

 <head>
 <title>Test page</title>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <link href="styles.css" type="text/css" rel="stylesheet">
 </head>

 <body>

 <div class="wrapper">

 <!-- место для меню -->
 <div id="menu"> 

 <ul> 
  <li><a href="rtet.htm"><span>home</span></a></li>
  <li><a href="rtet.htm"><span>portfolio</span></a></li>
  <li><a href="rtet.htm"><span>services</span></a></li>
  <li><a href="rtet.htm"><span>solutions</span></a></li>
  <li><a href="rtet.htm"><span>about us</span></a></li>
 </ul>

 </div>

 <!--бар и хедер-->
 <div class="bar"><img src="bar.png"></div>
 <div class="header-area"><img src="header.jpg"></div>


 <!-- контент -->


 <div class="content">
 <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p>
 <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p>
 <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p>
 <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p>
 <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p>
 <p>Lorem ipsum dolor set amir tolos and tacos for plenty to see. jack is the orange sub marine, by any means I found my plans. </p>

 </div>


 <div id="rightcontent"> 

 <ul> 
 <li><a href="#">это интересно</a></li>
 <li><a href="#">это интересно1</a></li>
 <li><a href="#">это интересно2</a></li>
 <li><a href="#">это интересно3</a></li>
 </ul>

 </div>





 <!-- футер -->
 <div class="footer"><img src="footer.jpg"></div>
 </div>

 </body>

 </html>

ЗАРАНЕЕ ВСЕМ БОЛЬШОЕ СПАСИБО!!!

papay · November 23, 2010

Возможно я не прав, но я бы попробовал так:

.content{
	 background: white;
		 margin: 0px;
	 width: 616px;
	 padding: 6em .6em .6em .6em;
	 float:left;
	 border:0;
}

Edited November 23, 2010 by papay

Great Rash · November 24, 2010

1) «css двухколоночный макет» в Google.

2) «css колонки одинаковой высоты» в Google.

Sign In

Верстаю первый сайт

Question

Diego

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

papay

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information