Обтекание

Fenix · October 23, 2009

У меня есть вот такая проблема: есть логотип #logo и заголовок сайта #title. По логике логотип должен находится слева, а заголовок справа обтекает логотип, но заголовок остается сницу. в чем проблема? Вот код:

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

#logo {float:left;}
#title {font-size:50px; color:#150098;}

psywalker · October 23, 2009

У меня есть вот такая проблема: есть логотип #logo и заголовок сайта #title. По логике логотип должен находится слева, а заголовок справа обтекает логотип, но заголовок остается сницу. в чем проблема? Вот код:
<div id="header">
	<p id="logo"><img src="style/logo.png" width="193" height="200" /></p>
	<h1 id="title">Природа Мурманской области</h1>
</div>
#logo {float:left;}
#title {font-size:50px; color:#150098;}

Задай лого ширину и правый отступ

Fenix · October 23, 2009

Задай лого ширину и правый отступ

Попробую. Но я не уверен что получится, то что я хочу. А ширину задать в css-тавлице?

rus · October 23, 2009

по спецификации сами знаете какого сайта, все элементы которые флоатятся должны иметь ширину.

Justnewone · October 23, 2009

Попробую. Но я не уверен что получится, то что я хочу. А ширину задать в css-тавлице?

В IE наверное такое?

или может откуда-то clear приходит?

Fenix · October 24, 2009

по спецификации сами знаете какого сайта, все элементы которые флоатятся должны иметь ширину.

Спасибо. Не знал этого

В IE наверное такое?
или может откуда-то clear приходит?

Нет я смотрел в опере.

clear есть, но раньше, с ним все было впорядке. Час чето дописал такое и заголовок вниз съехал.

UPD: Добавление ширины ни к чему ни привело.

Edited October 24, 2009 by Fenix

Justnewone · October 24, 2009

Спасибо. Не знал этого
Нет я смотрел в опере.
clear есть, но раньше, с ним все было впорядке. Час чето дописал такое и заголовок вниз съехал.
UPD: Добавление ширины ни к чему ни привело.

А фаербаг что говорит по этим элементам?

psywalker · October 24, 2009

clear есть, но раньше, с ним все было впорядке. Час чето дописал такое и заголовок вниз съехал.

Я не понял, есть clear или нет? И давай ссылку

Fenix · October 24, 2009

Я не понял, есть clear или нет? И давай ссылку

Код целиком:

<!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;}


/*Blocks*/
#header {vertical-align: middle;}
#picture {clear:both;}
#banner {height:90px; background-image:url(banner.png); background-repeat:repeat-x; margin:0;}
#footer

/*Elements*/
#logo {float:left; width:193px;}
#title {font-size:50px; color:#150098;}
#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 {}
.cat_title {}
.cat_text {}
.read_more {}

/*Menu*/
#nav * {text-align:left;}
#nav ul.sub { margin-top: -6px;}
.preload1 {background: url(blank_over.gif);}
.preload2 {background: url(blank_overa.gif);}
#nav {padding:0;margin:0;list-style:none;height:28px;background:#3399CC;position:relative;z-index:500;font-family:arial, verdana, sans-serif;}
#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(blank.gif);}
#nav li a.top_link span {float:left;display:block;padding:0 24px 0 12px;height:28px;background:url(blank.gif) right top;}
#nav li a.top_link span.down {float:left;display:block;padding:0 24px 0 12px;height:28px;background:url(blanka.gif) no-repeat right top;}
#nav li a.top_link:hover {color:#fff;background: url(blank_over.gif) no-repeat;}
#nav li a.top_link:hover span {background:url(blank_over.gif) no-repeat right top;}
#nav li a.top_link:hover span.down {background:url(blank_overa.gif) no-repeat right top;}
#nav li:hover > a.top_link {color:#fff;background: url(blank_over.gif) no-repeat;}
#nav li:hover > a.top_link span {background:url(blank_over.gif) no-repeat right top;}
#nav li:hover > a.top_link span.down {background:url(blank_overa.gif) 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 #3a93d2;white-space:nowrap;width:230px;z-index:400;height:auto;}

psywalker · October 24, 2009

Ошибка расценивается, как Невнимательность, и вообще ерундовая, догадаешься сам?

Fenix · October 24, 2009

Ошибка расценивается, как Невнимательность, и вообще ерундовая, догадаешься сам?

Нет. Иначе бы этой темы не существовало.

psywalker · October 24, 2009

Нет. Иначе бы этой темы не существовало.

Ошибка в этой части кода:

/*Blocks*/
#header {vertical-align: middle;}
#picture {clear:both;}
#banner {height:90px; background-image:url(banner.png); background-repeat:repeat-x; margin:0;}
#footer

Fenix · October 24, 2009

Ошибка в этой части кода:

/*Blocks*/
#header {vertical-align: middle;}
#picture {clear:both;}
#banner {height:90px; background-image:url(banner.png); background-repeat:repeat-x; margin:0;}
#footer

И какая ошибка тут? То что есть clear:both ?

UPD:

Все. Я понял.

#footer

нет {}

Спасибо, psywalker.

Edited October 24, 2009 by Fenix

psywalker · October 24, 2009

И какая ошибка тут? То что есть clear:both ?
UPD:
Все. Я понял.
#footer
нет {}
Спасибо, psywalker.

Молодец, в следующий раз будь повнимательнее

Fenix · October 24, 2009

В этой же теме задам ещё один вопрос. Как выровнять заголовок относительно серидины логотипа. Час оно вот так: http://floomby.ru/content/nw71YxB3J0/

psywalker · October 24, 2009

задать ему верхний марджин или паддинг

Fenix · October 24, 2009

задать ему верхний марджин или паддинг

До этого я бы и сам додумался, если бы не одна вещь. Если уменьшить ширину окна, будет вот что: http://floomby.ru/content/EdlOE6SF0O/

psywalker · October 24, 2009

Ну а тут уже тебе выбирать, а что ты хотел бы?

Fenix · October 24, 2009

Ну а тут уже тебе выбирать, а что ты хотел бы?

Чтобы заголовок всегда распологался относительно середины логотипа. Это невозможно?

psywalker · October 24, 2009

#title { display: table-cell;vertical-align: middle; height: 200px; }

#title span { margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");

font-size: 50px; display: block;

}

<h1 id="title"><span>Природа Мурманской области</span></h1>

А экспрешн вынесешь в ИЕ файл стилей для ИЕ6-7

Fenix · October 25, 2009

#title { display: table-cell;vertical-align: middle; height: 200px; }
#title span { margin-top: expression((parentNode.offsetHeight - this.offsetHeight)<0 ? "0" : (parentNode.offsetHeight - this.offsetHeight)/2 + "px");
font-size: 50px; display: block;
}
<h1 id="title"><span>Природа Мурманской области</span></h1>
А экспрешн вынесешь в ИЕ файл стилей для ИЕ6-7

И как можно сделать чтоб для ие 6-7 определялась отдельная таблица стилей. Я слышал, что можно как=то без php сделать.

psywalker · October 25, 2009

И как можно сделать чтоб для ие 6-7 определялась отдельная таблица стилей. Я слышал, что можно как=то без php сделать.

Какая таблица и пхп, ты о чём? Просто выносишь все стили для ИЕ в ихний файл стилей и всё))

Fenix · October 25, 2009

Какая таблица и пхп, ты о чём? Просто выносишь все стили для ИЕ в ихний файл стилей и всё))

1. Файл стиля и таблица стиля это одно и то же.

2. Как вынести? Как сделать чтоб это только ие понимал?

psywalker · October 25, 2009

1. Файл стиля и таблица стиля это одно и то же.
2. Как вынести? Как сделать чтоб это только ие понимал?

поищи в Гугле, Условные комментарии для IE

Sign In

Обтекание

Question

Link to comment

Share on other sites

23 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information