Jump to content
  • 0

Обтекание

Fenix

Asked by Fenix,

 Share

Question

Fenix Explorer

Fenix

Posted
Posted

У меня есть вот такая проблема: есть логотип #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;}

Link to comment
Share on other sites

23 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted
У меня есть вот такая проблема: есть логотип #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;}

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

Link to comment
Share on other sites
  • 0
Fenix Explorer

Fenix

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

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

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

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

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

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

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

Edited by Fenix
Link to comment
Share on other sites
  • 0
Justnewone Explorer

Justnewone

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

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

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

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

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

Link to comment
Share on other sites
  • 0
Fenix Explorer

Fenix

Posted
  • Author
Posted
Я не понял, есть 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;}

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

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

Link to comment
Share on other sites
  • 0
Fenix Explorer

Fenix

Posted
  • Author
Posted (edited)
Ошибка в этой части кода:

/*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 by Fenix
Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

Posted
Posted

#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

Link to comment
Share on other sites
  • 0
Fenix Explorer

Fenix

Posted
  • Author
Posted
#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 сделать.

Link to comment
Share on other sites
  • 0
psywalker Explorer

psywalker

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

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

Link to comment
Share on other sites
  • 0
Fenix Explorer

Fenix

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

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

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

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

  • Обсуждения

    • Nikker
      Дизайн сайтов, landing page, логотипов, баннеров, шапок | Высокое качество, по хорошей цене

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com Портфолио https://www.behance.net/d4d4186e Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ    
    • Nikker
      Брендовый дизайн в социальных сетях

      By Nikker · Posted

      Актуальные контакты: Telegram: @Nikker_web E-Mail:   tarasevich.email@gmail.com   Разрабатываю дизайн групп в соц сетях, сайтов, приложений, другой дизайн под заказ   Портфолио https://www.behance.net/d4d4186e
    • Mondeus
      Вёрстка футера на движке Xenforo

      By Mondeus · Posted

      Доброго всем времени суток. Прошу помощи. Научите принципу изменения футера. Движок Xenforo. Версия 2.2.10. Стиль дефолтный. Что именно нужно в итоге на фото примере. Мой шаблон app.footer less имеет следующее значение.  .p-footer { .xf-publicFooter(); a { .xf-publicFooterLink(); } } .p-footer-inner { .m-pageWidth(); .m-pageInset(); padding-top: @xf-paddingMedium; padding-bottom: @xf-paddingLarge; } .p-footer-row { .m-clearFix(); margin-bottom: -@xf-paddingLarge; } .p-footer-row-main { float: left; margin-bottom: @xf-paddingLarge; } .p-footer-row-opposite { float: right; margin-bottom: @xf-paddingLarge; } .p-footer-linkList { .m-listPlain(); .m-clearFix(); > li { float: left; margin-right: .5em; &:last-child { margin-right: 0; } a { padding: 2px 4px; border-radius: @xf-borderRadiusSmall; &:hover { text-decoration: none; background-color: fade(@xf-publicFooterLink--color, 10%); } } } } .p-footer-rssLink { > span { position: relative; top: -1px; display: inline-block; width: 1.44em; height: 1.44em; line-height: 1.44em; text-align: center; font-size: .8em; background-color: #4682B4; border-radius: 2px; } .fa-rss { color: white; } } .p-footer-copyright { margin-top: @xf-elementSpacer; text-align: center; font-size: @xf-fontSizeSmallest; } .p-footer-debug { margin-top: @xf-paddingLarge; text-align: right; font-size: @xf-fontSizeSmallest; .pairs > dt { color: inherit; } } @media (max-width: @xf-responsiveMedium) { .p-footer-row-main, .p-footer-row-opposite { float: none; } .p-footer-copyright { text-align: left; padding: 0 4px; // aligns with other links } }  
    • torsar
      Примеры верстки

      By torsar · Posted

      Нужны сайты с примерами верстки, типа https://css-tricks.com/. Типовые приемы и нестандартные на все случаи жизни. Накидайте ссылок.
    • Katerina23
      Какой тег использовать, чтобы увеличивать число кнопками вверх-вниз?

      By Katerina23 · Posted

      Да, подходит. Спасибо.
×
×
  • 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