Jump to content
  • 0

резиновость блочная верстка

klierik

Asked by klierik,

 Share

Question

klierik Middle Developer

klierik

Posted
Posted

доброго времени суток.

1. есть следующий код:

<div style="width:17%; height:46px; float:left; background-color:#eee;">asd</div>
<div style="width:17%; height:46px; float:left; background-color:#eee;">asd</div>
<div style="width:16%; height:46px; float:left; background-color:#eee;">asd</div>
<div style="width:16%; height:46px; float:right; background-color:#eee;">asd</div>
<div style="width:17%; height:46px; float:right; background-color:#eee;">asd</div>
<div style="width:17%; height:46px; float:right; background-color:#eee;">asd</div>

в суме ширина всех дивов == 100%

Во всех броузерах (ИЕ6/7, ФФ2) все отлично показывает.

А вот в Опера (v9.1) между центральными тегами (те что по 16%)

появляеться отступ. Варьировать можно как угодно но отступ непропадает.

Поля все нулевые:

* {
	margin: 0px;
	padding: 0px;
	border: 0px solid white;
}

возможно ли это как-то починить?

2. в CSS есть свойство: min-width

В FF2, Opera 9.1, IE7 оно работает идеально как надо.

А вот IE6 видимо его не поддерживает.Можно ли чем-то альтернативным задать минимальную возможную ширину?

Спасибо

Link to comment
Share on other sites

19 answers to this question

Recommended Posts

  • 0
Fu-tai Explorer

Fu-tai

Posted
Posted

Для начала я бы вам советовал вынести все в отдельный файл CSS и не захламлять код стилями!

Во вторых нафига float: right; ?

В третьих вот как например можно все это сделать!

<style>
* {
	margin: 0;
	padding: 0;
	border: 0;
	}
.asd, .ast {
	width:17%;
	height:46px;
	float:left;
	background-color:#eee;
}
.ast {
	width:16%;
}
</style>
</head>

<body>
<div class="asd">asd</div>
<div class="asd">asd</div>
<div class="ast">asd</div>
<div class="ast">asd</div>
<div class="asd">asd</div>
<div class="asd">asd</div>
</body>

В Опере 9.2, Файрфоксе 2.0, ИЕ 6.0 все работает замечательно и никаких отступов не наблюдается!

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted

тоже самое. вот

<style>
* {
	margin: 0;
	padding: 0;
	border: 0;
	}
.bgblock {
	width:auto;
	height:46px;
	background-color:red;
}
.asd, .ast {
	width:17%;
	height:46px;
	float:left;
	background-color:#eee;
}
.ast {
	width:16%;
}
</style>
</head>

<body>
<div class="bgblock">
   <div class="asd">asd</div>
   <div class="asd">asd</div>
   <div class="ast">asd</div>
   <div class="ast">asd</div>
   <div class="asd">asd</div>
   <div class="asd">asd</div>
</div>
</body>

для примера на фон кинул красную полоску.

если присмотреться, то в конце справа естьотствуп ~ 1-2пк :)

update: у меня 1024*768 екран. так же если окно сужать, в таком случае отступ увеличиваеться. предпологаю что при 1280*1024 его вполне не видно.

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted

У Оперы плохо с процентами. :)http://xhtml.ru/experiment/browser_day/ По ссылке немного не то, однако это хорошая иллюстрация работы Оперы с процентами.

Как вариант предыдущий код плюс дописать в css:

.asa {
	width:100%;
	float:none;
}
*div.asa {
	width:17%;
	float:left;
}

А в html добавить к последнему диву класс asa.

<div class="asd asa">asd</div>

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted

супер. просто класс. я вам оочень всем благодарен!!!

какая красота. я правда еще не понял как ето работает.. но ето дело времени.

и вот только что друг сказал... мол если окно в ИЕ7уменьшить по ширине (а у меня екран 1024, то есть еще меньше получаеться)

то крайний правый блок просто слитает вниз.

есть предположения почему так?

update: вот только проверил пустить два дива по 50%

уменьшаем окно - тоже самое. правый див слетает.

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted
супер. просто класс. я вам оочень всем благодарен!!!

какая красота. я правда еще не понял как ето работает.. но ето дело времени.

То, что за * это специально для ие. То есть в ие мы оставили как было, а для всех остальных отменили обтекание последнего слоя.

и вот только что друг сказал... мол если окно в ИЕ7уменьшить по ширине (а у меня екран 1024, то есть еще меньше получаеться)

то крайний правый блок просто слитает вниз.

есть предположения почему так?

Получается такое из-за округления процентов.

Можно сделать так:

*div.asa {
	width:auto;
	float:left;
}
   <div class="asd asa"><div style="width:100%">asd</div></div>

То есть установить для ие ширину слоя asa в авто и вставить в этот слой блок с шириной в сто процентов. В итоге у нас получается что последний слой занимает не 17%, а вс? оставшееся справ место(~17%).

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted

все понял. спасибо за разъеснение.

скажите, пожалуйста, дивами можно зделать следующее:

есть 2 дива по 50% на 1 строке.

но между ними надо что б было растояние Х

таблицами ето зделать легко, но все же хочется дивами.

update:

В итоге у нас получается что последний слой занимает не 17%, а вс? оставшееся справ место(~17%).

везде все отлично. но, ИЕ7 не растянул на 100%, а только на ширину того что внутри

так как див на порядок выше имеет ширину auto, то не может быть растянут свойством.

только наполнением контентом. ((

Link to comment
Share on other sites
  • 0
Tokolist Explorer

Tokolist

Posted
Posted
У Оперы плохо с процентами.

Да вообще ппц! Пробовал шрифтам 105% задавать?

скажите, пожалуйста, дивами можно зделать следующее:

есть 2 дива по 50% на 1 строке.

но между ними надо что б было растояние Х

Вот создал примерчег. В данном случае у нас Х=100. Осел как всегда выделился... с плохой стороны конечно :)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>  
<style type="text/css">
* {
  padding: 0;
  margin: 0;
}

div {
  height: 200px;
}

/*
#left, #right {
  border: 1px dotted #000;
}
*/

#left {
  float: left;
  width: 50%;
}

#right {
  margin-left: 50%;
}

#right div {
  margin-left: 50px;
  background: red;
}

#left div {
  margin-right: 50px;
  background: blue;
}
</style>

<!--[if IE]>
<style type="text/css">
#right div {
  margin-left: 47px; /* fucking IE */
}
</style>
<![endif]--> 

</head> 
<body>
<div id="left"><div>left</div></div>
<div id="right"><div>right</div></div>
</body> 
</html>

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted
Да вообще ппц! Пробовал шрифтам 105% задавать?

Ну я хочу сказать что у ИЕ6 тоже не все идеально. там если по чуток расширять/сужать ширину екрана, бывает попадает такой момент када пол верстки слетает к чертям :)

скажите, пожалуйста, дивами можно зделать следующее:

есть 2 дива по 50% на 1 строке.

но между ними надо что б было растояние Х

я добился этого использую следующее:

css

#infoBlock {
	width: 100%;
	margin: 7px 0px;
	height: 208px;
}
.ibLeft {
	height: 208px;
	width:50%;
	float: left;
}
.ibRight {
	height: 208px;
	width: 50%;
	float: left;
}

xHTML

	<div id="infoBlock">
		<!--LEFT SIDE-->
		<div class="ibLeft">
			<div style="height:197px; width:100%;">
				<div style="float:left; width:100%; height:100%;"><!--center block-->
					<div style="background:url(images/info_block_c.png) repeat-x; margin:0px 15px 0px 10px; height:100%;">
					</div>
				</div>

				<div style="float:left; width:5px; margin-left:-5px; height:100%;"> </div>
				<div style="float:left; width:10px; margin-left:-100%; height:100%;"></div><!--left block-->
				<div style="float:left; width:10px; margin-left:-15px; height:100%;"></div><!--right block-->

				<div class="tr"></div>
			</div>
		</div>

		<!--RIGHT SIDE-->
		<div class="ibRight">
			<div style="height:197px; width:100%;">
				<div style="float:left; width:100%; height:100%;"><!--center block-->
					<div style="background:url(images/info_block_c.png) repeat-x; margin:0px 10px 0px 15px; height:100%;">
					</div>
				</div>

				<div style="float:left; width:10px; margin-left:-10px; height:100%;"><img src="images/info_block_r.png" width="10" height="197" alt=""  /></div>
				<div style="float:left; width:15px; margin-left:-100%; text-align:right; height:100%;"></div><!--left block-->
				<div style="float:left; width:5px; margin-left:-100%; height:100%;"> </div><!--left margin-->


				<div class="tr"></div>
			</div>
		</div>


		<div class="tr"></div>
	</div>

в общем смысл какой.

есть 2 блока по 50%. а вот уже в них создаю центр, левую часть и правые части(мне надо было) и правый/левый отступ.

код может показаться перегруженным, зато он работает во всех броузерах одинаково!

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted
У Оперы плохо с процентами.

Да вообще ппц! Пробовал шрифтам 105% задавать?

Ага, пробовал. :)

to klierik

А при изменении размеров окна блоки с Вашем коде не прыгают по экрану? :) Код Tokolist'a проще и эффективней. Единственная поправка для ие(

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted
А при изменении размеров окна блоки с Вашем коде не прыгают по экрану?

Блоки.. да прыгают в ИЕ6. Это можно как-то зафиксить?

update: Только что посмотрел и сравнил, у Tokolist`a код намного проще моего. Вы были правы.

Скажите, плиз, а можно как-то следующее записать вообще в CSS

Link to comment
Share on other sites
  • 0
yopopt Explorer

yopopt

Posted
Posted
А при изменении размеров окна блоки с Вашем коде не прыгают по экрану?

Блоки.. да прыгают в ИЕ6. Это можно как-то зафиксить?

Можно конечно, но лучше просто отбросить этот вариант кода. :)

update: Только что посмотрел и сравнил, у Tokolist`a код намного проще моего. Вы были правы.

Скажите, плиз, а можно как-то следующее записать вообще в CSS

Можно записать в css вот так:

*div#right div {
  margin-left: 47px; /* fucking IE */
}

Но лучше создать отдельную таблицу стилей для ие и заключить е? в условные комментарии:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="forieonly.css" />
<![endif]-->

Подробней об условных комментариях(на англ.): http://msdn2.microsoft.com/en-us/library/ms537512.aspx

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted

большое спасибо за информацию.

скажите, а в html можно как-то перемещать слои.

т.е. возможно как-то низлежащий слой переменстить вверх свойствами ЦСС?

update: уже нашел - z-index

Link to comment
Share on other sites
  • 0
Tokolist Explorer

Tokolist

Posted
Posted
Ну я хочу сказать что у ИЕ6 тоже не все идеально. там если по чуток расширять/сужать ширину екрана, бывает попадает такой момент када пол верстки слетает к чертям :)

Причем тут вообще Осел? Если описывать все его баги и дыры, то не хватит не то что топика, а и целого форума :)

Скажите, плиз, а можно как-то следующее записать вообще в CSS

Задать стили отдельно для Осла можно вообще, как минимум, пятью способами...

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted

2Tokolist,

Да уже почитал в нете про это. :)

такой вапрос, возможно ли в блочной верстке раятянуть слой на 100% по высоте.

к примеру:

есть 3 колонки.

в центральной идет динамическое наполнение.

можно ли растянуть боковые по высоте центральной?

height:100%; тут не помог

Скажите, пожалуйста, можно ли как-то избавиться от отступа который делает ИЕ6 по высоте слоя.

т.е я позиционирую несколько слоев один за другим вопределенном блоке.

везде все показывает красиво и идеально, но ИЕ6 в любом случае делает отступ, и опускает низлежащие объекты на высоту слоев.

Получаеться имеем пустое пространство :)

Link to comment
Share on other sites
  • 0
WEB_bobby Explorer

WEB_bobby

Posted
Posted
Если это трехпиксельный баг IE 6 и ниже(в 7 бага уже этого нет), то я вот на днях применял margin -3, путем подставы в CSS спец кода
 *html

, после которого всю строку описания для одного id'а или class'a понимает только IE 6. Кстати если интересует спец коды на другие браузеры, то могу поделиться.

И еще minwidth так как осел непонимает то в этом коде можете обнаружить еще один способ спецкодирования для браузеров он начинаеть в коде так

<!--[if IE ]>

можно даже написать 

<!--[if IE 6 ]>

т.к. IE 7 уже понимает эти параметры.

Но ниче нибудет если написать просто 

<!--[if IE ]>

- какая разница, задает то все правильно просто для IE ;)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled</title>
<style type ="text/CSS">
* {
 margin: 0;
 padding: 0;
 border:0
}

body
{
 height:600px;
 min-width:1024px
}

#first
{
 margin: 0 150px 0 150px;
 height:200px
}

#top_left
{
 height:200px;
 width:200px;
 background-color:#6ac247;
 float:left
}

#top_middle{
 background-color:#edc230;
 height:200px
}



#top_right{
 height:200px;
 width:200px;
 background-color:#6ac247;
 float:right
}

* html #top_left{margin-right:-3px}
* html #top_right{margin-left:-3px}

#second{
 margin: 0 100px 0 100px;
 height:400px
}
#bottom_left{
 height:400px;
 width:50px;
 background-color:#4b7151;
 float:left
}
#bottom_right{
 height:300px;
 width:350px;
 padding:50px;
 background-color:#6a67cc;
 float:right
}
#bottom_middle{
 background-color:#ff989e;
 height:400px
}

* html #bottom_left{margin-right:-3px}
* html #bottom_right{margin-left:-3px}


</style>

<!--[if IE ]>
 <style type="text/css">
 #superCover{width:expression(((document.documentElement.clientWidth||document.body.clientWidth)<=1024)?1024:"100%");}
 </style>
<![endif]-->

</head>

<body>
<div id ="superCover">
 <div id="first">
 <div id="top_right">3</div>
 <div id="top_left">1</div>
 <div id="top_middle">2</div>
 </div>
 <div id="second">
 <div id="bottom_right">3</div>
 <div id="bottom_left">1</div>
 <div id="bottom_middle">2</div>
 </div>
</div>
</body>
</html>

Link to comment
Share on other sites
  • 0
rash Explorer

rash

Posted
Posted
Кстати если интересует спец коды на другие браузеры, то могу поделиться.

В смысле "хаки" для разных браузеров?

Давай -)

Их-то можно найти, если захотеть, но было бы полезно собрать "в одном месте", хотя бы в целях повышения образованности -)

Link to comment
Share on other sites
  • 0
klierik Middle Developer

klierik

Posted
  • Author
Posted

вопрос по IE6

в слоях, каждый раз делаеться отступ по высоте слоя.

можно как-то это исправить?

update: в общем посинить данный феномен ;) неполучиться (скорее всего)

зато божно его обойти, используя для IE6 свой CSS.

на слой вешаем position:relative; а двигаем слой отступами.

к примеру если поднять выше, в таком случае пишем:

margin-top: -100px;

канешно ето не идеальный выход, зато спасает :)

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