Верстка на DIV - HTML и CSS

darewangog · 12.07.2009, 22:49

Привет ВСЁ ! Пришёл к вам за помощью !
Вот короче верстаю диз на DIV ! И вот получилась 1 проблема незнаю как решить

Вот CSS

Код:

html, body {height:100%;}
body {background: url(bg.jpg) repeat-x #ffd9de;}
#wrapper {width: 930px;margin: 100px auto;}


#container {background-image: url('bg.png');background-position: right bottom;background-repeat: repeat-y ;}
#left {float:left;width:200px;}
#center {margin-left:200px;}

#header {height:10px;}
#header2 {background: transparent url(5.png) scroll left top;}
#hleft {float:left;width:10px;height:10px;background: transparent url(1.png) no-repeat scroll left top;}
#hright {float:right;width:10px;height:10px;background: transparent url(2.png) no-repeat scroll left top;}
#hcenter {margin:0 10px 0 10px;height:10px;background: transparent url(5.png) scroll left top;}

#footer {height:100px;margin-top:-100px;}
#fleft {float:left;width:10px;height:10px;background: transparent url(3.png) no-repeat scroll left top;}
#fright {float:right;width:10px;height:10px;background: transparent url(4.png) no-repeat scroll left top;}
#fcenter {margin:0 10px 0 10px;height:10px;background: transparent url(5.png) scroll left top;}

.clear {clear:both;}
#spacer {height:100px;}

.eBlock {width:200px}
.eTit {width: 200px; height: 93px;background: transparent url(bh.png) no-repeat scroll left top;}
.eTitle {padding: 0 5px;width: 200px;background: transparent url(bbg.png) repeat-y scroll left top;}
.eMes {padding: 0 5px;width: 200px;background: transparent url(bbg.png) repeat-y scroll left top;}
.eFot {width: 200px;height: 116px;background: transparent url(bf.png) no-repeat scroll left top;}

Вот HTML

Код HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <title></title>
   <link href="my.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
<div id='wrapper'>
  <div id='header'>
    	<div id='hleft'></div>	
    	<div id='hright'></div>	
    	<div id='hcenter'></div>
  </div>
  
  <div id='header2'><img alt="213" src="logo.png" align="" border="0"></div>
    
  <div id='container'>
  		<div id='left'> 
   		 <div class='eBlock'>
        <div class='eTit'></div>
         <div class='eTitle'>Здесь название Блока</div> 
         <div class='eMes'>А вот здесь уже много много текста</div>
         <div class='eFot'></div>     
      </div>  
      
      <div class='eBlock'>
        <div class='eTit'></div>
         <div class='eTitle'>Здесь название Блока</div> 
         <div class='eMes'>А вот здесь уже много много текста</div>
         <div class='eFot'></div>     
      </div> 
      
      <div class='eBlock'>
        <div class='eTit'></div>
         <div class='eTitle'>Здесь название Блока</div> 
         <div class='eMes'>А вот здесь уже много много текста</div>
         <div class='eFot'></div>     
      </div> 
      
        
      </div>
  		<div id='center'>Центр</div>
  </div>
  
	<div class='clear'></div>
	<div id='spacer'></div>
	  
  	<div id='footer'>
    	<div id='fleft'></div>	
    	<div id='fright'></div>	
    	<div id='fcenter'></div>	
    </div>
</div>
  </body>
</html>

Проблема в том что в блоках left и center стоит заданный фон картинка , и вот она повторяеться по горизантали а мне нада чтоб она занимала все свободное пранстранство ! Надеюсь Вы меня понили !

jeka5555 · 17.07.2009, 11:27

к сожалению фон пока не умеет растягиваться. Можно сделать так:
в див положить картинку (которая умеет растягиватся в отличии от фона), и этот див с помощью position:relative; z-index:1; сделать как бы фоном, а сверху другой див с z-index:2;

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
div-верстка: контент выше хедера	wall66	HTML и CSS	9	15.02.2009 08:57
верстка	NecRoMat	HTML и CSS	5	02.10.2008 01:03
Растягивающийся DIV и толкающий в низ следующий DIV	Суриков	HTML и CSS	6	29.08.2008 12:01

17.07.2009, 11:27	#2
jeka5555 Пользователь Регистрация: 20.03.2009 Сообщений: 43	к сожалению фон пока не умеет растягиваться. Можно сделать так: в див положить картинку (которая умеет растягиватся в отличии от фона), и этот див с помощью position:relative; z-index:1; сделать как бы фоном, а сверху другой див с z-index:2;