Jump to content
  • 0

Фон

Fenix

Asked by Fenix,

 Share

Question

Fenix Explorer

Fenix

Posted
Posted

Есть такая проблема с фоном:

http://floomby.ru/content/7nWcL1Hi40/

http://floomby.ru/content/Grv4nje8qE/

Во втором случае специально фон изменил на черный чтобы было наглядно.

Сообствено вам проблема должна быть ясно: фон не "растягивается до конца элемента. В чем проблема? Вот код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Природа Мурманской Области</title>
<link href="style/common.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="cont">

<div id="header">
	<img src="style/logo.png" width="193" height="200" id="logo" />
	<h1 id="title">Природа Мурманской области</h1>
</div>

<div id="picture">
	<p id="banner"> </p>
</div>

<ul id="nav">
	<li class="top"><a href="index.html" class="top_link"><span>Главная</span></a></li>
	<li class="top"><a href="rasteniya/index.html" class="top_link"><span class="down">Растения</span></a>
	<ul class="sub">
		<li><a href="rasteniya/harakterictic.html">Общая характеристика</a></li>
		<li><a href="rasteniya/gribi.html">Грибы</a></li>
		<li><a href="rasteniya/lishainiki.html">Лишайники</a></li>
		<li><a href="rasteniya/mohovidnie.html">Моховидные</a></li>
		<li><a href="rasteniya/plaunovidnie.html">Плауновидные</a></li>
		<li><a href="rasteniya/paporotnikovidnie.html">Папоротниковидные</a></li>
		<li><a href="rasteniya/golosemenie.html">Голосеменные</a></li>
		<li><a href="rasteniya/pokritosemennie.html">Покрытосеменные</a></li>
	</ul></li>
	<li class="top"><a href="animals/index.html" class="top_link"><span class="down">Животные</span></a>
	<ul class="sub">
		<li><a href="animals/bezpozvon/index.html" class="fly">Морские  беспозвоночные</a>
		<ul>
			<li><a href="animals/bezpozvon/harakterictic.html">Характеристика условий обитания</a></li>
			<li><a href="animals/bezpozvon/kishechnopolosnie.html">Кишечнополостные</a></li>
			<li><a href="animals/bezpozvon/chervi.html">Черви</a></li>
			<li><a href="animals/bezpozvon/moluski.html">Моллюски</a></li>
			<li><a href="animals/bezpozvon/chlenistonogie.html">Членистоногие</a></li>
			<li><a href="animals/bezpozvon/iglokozhie.html">Иглокожие</a></li>
		</ul>
		<li><a href="animals/pozvon/index.html" class="fly">Позвоночные</a>
		<ul>
			<li><a href="animals/pozvon/ribi.html">Рыбы</a></li>
			<li><a href="animals/pozvon/zemnovod_presmik.html">Земноводные и пресмыкающиеся</a></li>
			<li><a href="animals/pozvon/ptishi.html">Птицы</a></li>
			<li><a href="animals/pozvon/mlekopitauscie.html">Млекопитающие</a></li>
			<li><a href="animals/pozvon/see_mlekopitauscie.html">Морские млекопитающие</a></li>
		</ul>
	</ul></li>
	<li class="top"><a href="intresting/index.html" class="top_link"><span class="down">Интересные статьи</span></a>
	<ul class="sub">
		<li><a href="intresting/labirint.html">Лабиринт</a></li>
		<li><a href="intresting/piramidi.html">Пирамиды</a></li>
		<li><a href="intresting/seidozero.html">Сейдозеро</a></li>
		<li><a href="intresting/tropic_cherepaha.html">Троопическая черепаха</a></li>
		<li><a href="intresting/gde_zhivet_edinorog.html">Где живёт единорог</a></li>
		<li><a href="intresting/skvazhina.html">Во глубине горячих руд...</a></li>
		<li><a href="intresting/oblaka.html">Красивые облака</a></li>
	</ul></li>
	<li class="top"><a href="galery/index.html" class="top_link"><span>Галерея</span></a></li>
</ul>

<div id="page">

<div id="information"><p>Этот сайт посвящен неповторимой уникальной природе Крайнего Севера. Материал этого сайта будет интересен людям всех возрастов. Но, особенно, рекомендую его школьникам для докладов и рефератов. Здесь вы можете узнать о растительном и животном мире Крайнего Севера. Для любителей таинственного и непознанного есть страничка о тайнах и загадках Заполярья. Можно посмотреть фотогалерею с красивейшими пейзажами северной природы. Каждый, кто заглянет сюда, найдет здесь что-то интересное и полезное для себя.</p></div>

<div class="cat">
<h2 class="cat_title">Интересные статьи</h2>
<p class="cat_text">В мире существует много древних, загадочных мест, волнующих людей своими тайнами. Но люди не задумываются, что такие места могут быть рядом с ними. Мы привыкли восхищаться пирамидами в Египте, но оказывается на Кольском полуострове есть еще более древние пирамиды. Ведь Кольский полуостров, возможно, является прародиной всего человечества - легендарной Гипербореей, которую ищут многие поколения искателей. Много тайн и загадок лежит буквально у нас под ногами. Загляни на эту страничку и узнай о том какие тайны скрывает наш северный Кольский край. Многие вещи станут для тебя настоящим открытием...</p>
<p class="read_more"></p>
</div>

<div class="cat">
<h2 class="cat_title">Растения</h2>
<p class="cat_text">Несмотря на суровый климат, растительный мир Мурманской области очень богат. Флора насчитывает 1162 вида сосудистых растений, около 600 - мохообразных, 1000 - лишайников, свыше 500 - грибов. Многие растения уникальны и встречаются только здесь. Суровый климат и короткое северное лето вынуждают растения приспосабливаться. Они быстро, в рекордные сроки, развиваются, ведь они должны дать семена за короткое северное лето...</p>
<p class="read_more"></p>
</div>

<div class="cat">
<h2 class="cat_title">Животные</h2>
<p class="cat_text">Наш крайний северо-запад России отличается целым рядом черт. Основным фактором, повлиявшим на формирование животного мира, было оледенение в четвертичном периоде. Фауна Кольского Севера сформировалась в конце ледникового периода и главным образом в послеледниковое время. Некоторые наиболее холодостойкие виды животных проникли на освобожденную от ледников территорию из прилегающих к ней с юга и востока таежных областей. Настоящих арктических видов здесь крайне мало. В целом фауна относительно небогата. Несмотря на значительное количество гор и характерную для них вертикальную смену растительных поясов, настоящих горных видов нет...</p>
<p class="read_more"></p>
</div>

</div>

<div id="footer">
<p>2008-2010 © Валиуллин Александр</p>
</div>

</div>

</body>
</html>

/*Page settings*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin: 0; padding: 0;}
html , body {background-image:url(bg.png);}
* {font-family:Arial, Verdana, Helvetica, sans-serif; font-size:15px;}
#cont {margin:15px auto; width:75%; background-color:#F0F0F0;/* border:1px solid #027B05;*/}


/*Blocks*/
#header {background-color:#F3F3CC;}
#picture {clear:both;}
#banner {height:90px; background-image:url(banner.png); background-repeat:repeat-x; margin:0;}
#footer {background-color:#89C122; padding:10px;}
#page {background-color: #F3F3CC}
/*background-color:#BEDB8A*/

/*Elements*/
#logo {float:left; width:193px;}
#title {font-size:50px; color:#150098; padding-top:50px;}
#information {border: 1px solid;margin: 10px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center;color: #00529B; background-color:#BDE5F8; background-image: url('info.png');}

/*Categories*/
.cat {border: 1px solid;margin: 10px; padding:15px 10px 15px 50px; background-repeat: no-repeat; background-position: 10px center;color: #027B05; background-color: #BEDB8A; background-image: url('cat.png');}
.cat_title {}
.cat_text {}
.read_more {}

/*Menu*/
#nav * {text-align:left;}
#nav ul.sub { margin-top: -6px;}
.preload1 {background: url(menu-simple.png);}
.preload2 {background: url(menu-sub.png);}
#nav {padding:0;margin:0;list-style:none;height:28px;background:#3399CC;position:relative;z-index:500;font-family:arial, verdana, sans-serif; background-image:url(menu-bg.png)}
#nav li.top {display:block;float:left;}
#nav li a.top_link {display:block;float:left;height:28px;line-height:27px;color:#ccc;text-decoration:none;font-size:11px;font-weight:bold;padding:0 0 0 12px;cursor:pointer;background: url(menu-simple.png);}
#nav li a.top_link span {float:left;display:block;padding:0 24px 0 12px;height:28px;background:url(menu-simple.png) right top;}
#nav li a.top_link span.down {float:left;display:block;padding:0 24px 0 12px;height:28px;background:url(menu-sub.png) no-repeat right top;}
#nav li a.top_link:hover {color:#fff;background: url(menu-simple.png) no-repeat;}
#nav li a.top_link:hover span {background:url(menu-simple.png) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(menu-sub.png) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff;background: url(menu-simple.png) no-repeat;}
#nav li:hover > a.top_link span {background:url(menu-simple.png) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(menu-sub.png) no-repeat right top;}
#nav li:hover {position:relative;z-index:200;}
#nav ul,  #nav li:hover ul ul, #nav li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul ul { position:absolute;left:-9999px;top:-9999px;width:0;height:0;margin:0;padding:0;list-style:none;}
#nav li:hover ul.sub {left:0;top:31px;background: #fff;padding:3px;border:1px solid #3a93d2;white-space:nowrap;width:230px;height:auto;z-index:300;}
#nav li:hover ul.sub li {display:block;height:20px;position:relative;float:left;width:230px;font-weight:normal;}
#nav li:hover ul.sub li a {display:block;font-size:11px;height:20px;width:230px;line-height:20px;text-indent:5px;color:#000;text-decoration:none;}
#nav li ul.sub li a.fly { background:#fff url(arrow.gif) 190px 7px no-repeat;}
#nav li:hover ul.sub li a:hover { background:#3a93d2;color:#fff;}
#nav li:hover ul.sub li a.fly:hover { background:#3a93d2 url(arrow_over.gif) 190px 7px no-repeat;color:#fff;}
#nav li:hover ul li:hover > a.fly {background:#3a93d2 url(arrow_over.gif) 80px 7px no-repeat;color:#fff;} 
#nav li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul, #nav li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul { left:90px;top:-4px;background: #fff;padding:3px;border:1px solid #027B05;white-space:nowrap;width:230px;z-index:400;height:auto;}

Link to comment
Share on other sites

7 answers to this question

Recommended Posts

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