ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проблемы с блочной вёрсткой
11 сообщений из 11, страница 1 из 1
проблемы с блочной вёрсткой
    #35130862
GreenShadow
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
GreenShadow
Гость
Сверстал сайт, дивами без использования таблиц.
Контент слева, панель навигации справа.
Верстал практически так же как описанно здесь:
www.webmascon.com

Получилось нечто аналогичное этому

Только у меня блок контента содержит внутри дополнительные блоки.
Тоесть внутри контента блок с заголовком раздела, под ним блок с текстом, контролами и.т.п., опять блок с заголовком итд. Для блока контента поставлено overflow:hidden;

Собстевенно проблема: когда уменьшаем окошко браузера в ИЕ, каждый блок внутри левого поля уменьшается до самого широкого внутреннего элемента и на этом застревает. Тоесть элементы контента не выровняны по правому краю.

Читал:
positioniseverything.net
www.communitymx.com
Разобрался почему так происходит, но исправить не смог :(

Может быть всё-таки есть какие нибудь пути решения этой проблемы?
Можно конечно сделать базовую разбивку по колонкам таблицей, но хочется попробовать
оставить чисто блочную вёрстку, если это возможно.
...
Рейтинг: 0 / 0
13.02.2008, 17:49
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131070
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
а зачем чисто блочную? любишь гиморрой? table-layout: fixed у таблицы как правило решает все проблемы.
а вообще проблему не понять без исходника страницы
...
Рейтинг: 0 / 0
13.02.2008, 19:08
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131118
GreenShadow
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
GreenShadow
Гость
автора зачем чисто блочную? любишь гиморрой?
Ради интереса, до этого момента всё было решаемо и нормально отображалось.
Я не против по колонкам таблицей разбить, наверное так и придётся делать, интересует альтернативное решение.

Вот пример абсолютно аналогичного кода. Хочу добится того, чтобы при уменьшении окна зелёные блоки content и long_content оставались одного размера.
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>Example  4 : Negative Margins</TITLE>
<META http-equiv=Content-Type content="text/html; charset=ISO-8859-1">

<STYLE type=text/css media=screen>
	#wrapper{background-color:gray;}
	#header {background-color:#d7dabd}
	#container {background-color:blue;FLOAT: left; WIDTH:  100 %; MARGIN-RIGHT: -200px}
	.content {BACKGROUND: green; MARGIN-RIGHT: 200px;overflow:hidden;}
	#sidebar {FLOAT: right; WIDTH: 200px;background-color:red;}
	#footer {BACKGROUND: #d7dabd}
	.clearing {CLEAR: both; HEIGHT: 0px}
</STYLE>

<META content="MSHTML 6.00.2900.3059" name=GENERATOR>
</HEAD>

<BODY>
<DIV id=header>header</DIV>
<DIV id=wrapper>
	<DIV id=container>

		<DIV class=content>
			<H1>long_content</H1>
		</DIV>
		<DIV class=content>
			<H1>content</H1>
		</DIV>
	</DIV>
	<DIV id=sidebar>
		<H1>sidebar</H1>
		<UL>
		  <LI>link one 
		  <LI>link two </LI>
		</UL>
	</DIV>
</DIV>
<DIV class=clearing></DIV></DIV>
<DIV id=footer>footer</DIV>
</BODY>
</HTML>
...
Рейтинг: 0 / 0
13.02.2008, 19:40
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131154
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
ой даже смотреть не хочу на этот ужос, буквы большие, тэги незакрытые, ай-ай
приведи к нормальному виду вначале, сделай полноценный XHTML документ
...
Рейтинг: 0 / 0
13.02.2008, 20:08
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131177
mrJust
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mrJust
Гость
Товарисче! Я бы посаветовал использовать min-width.
Тогда при уменьшении в окне образуется горизонтальный скрол, и внутренности на Вашей странице перестанут зависеть от ширины броузера. Для IE6 этото свойство применяется по особому)))

Вот пример (не помню откуда выдрал, поэтому привожу код).
В Вашем случае, можно обернуть #wrаpper, #header и #footer каждый по отдельности или все вместе в соответствии с примером ниже.
Обратите внимание на то, что доктайп XHTML.

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> min-width in Internet Explorer - fixed </title>

<style type="text/css">
body {background:#fff; font-family:"trebuchet ms", "times new roman", times, serif; font-size: 76 %;}
.css {color:# 983 ; font-family:"times new roman", serif;}
.play {font-family:"trebuchet ms", tahoma, arial, verdana, sans-serif; margin: 0 ; color:# 000 ; font-weight:normal;}


/* for all browsers that understand min-width */
.container {position:relative; width: 90 %; min-width:400px;}
.holder {display:block; color:# 000 ;}

/* method 1 a bodge for IE5.5 and IE6 browsers */
* html .container {border-right:400px solid #fff;}
* html .holder {display:inline-block; position:relative; margin-right:-400px;}

/* for all browsers that understand min-width */
.container2 {position:relative; width: 90 %; min-width:400px;}
.holder2 {display:block; color:# 000 ;}

/* method 2 a bodge for IE browsers IE5.01, IE5.5 and IE6 */
* html .container2 {border-right:400px solid #fff;}
* html .holder2 {float:left; position:relative; margin-right:-400px;}

/* General styling */
h1 {
  font-size:  5 .3em;
  letter-spacing: -3px;
  color:#06a;
  font-weight:normal;
  margin: 0 ;
  font-family:"times new roman", times, serif;
  }

h2 {
  font-size: 2em;
  color:#f60;
  font-weight:normal;
  margin-top: 0 ; 
  padding:top:1em;
  }

.b1 {height:1px; font-size:1px; overflow:hidden; display:block; background:#aaa; margin: 0  5px;}
.b2 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:2px solid #aaa; border-left:2px solid #aaa; margin: 0  3px;}
.b3 {height:1px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin: 0  2px;}
.b4 {height:2px; font-size:1px; overflow:hidden; display:block; background:#fff; border-right:1px solid #aaa; border-left:1px solid #aaa; margin: 0  1px;}
.content {border-right:1px solid #aaa; border-left:1px solid #aaa;}

h1, h2, h3, h4, p {margin-left:5px; margin-right:5px;}
p {margin-bottom: 0 ; padding-bottom:1em;}
.rule {width:400px; background:#c00; color:#fff; margin:1em  0 ;}
</style>
</head>

<body>
<h1 style="position:relative; z-index:100;"><b class="css">CSS</b><span class="play">play</span></h1>
<h2>experiments with Cascading Style Sheets</h2>

<h3 class="norm">by Stu Nicholls</h3>
<h1>method  1 </h1>
<div class="container">
<div class="holder">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h2>{width: 90 %; min-width:400px;} includes IE5. 5  and IE6</h2>
<h3>this is the first of two ways that I have found to emulate true min-width in IE and uses an inline-block, a border-width and a negative margin (NO javascript).</h3>
<h4>this div has a min-width of 400px and a width of  90 %. You can set the width as any percentage and the min-width as a px or em value.</h4>
<p>discovered 11th May  2005  by Stu Nicholls</p>

</div>

<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<div class="rule"><p>this div is 400px wide and can be used as a guide for min-width.</p></div>
<h1>method  2 </h1>
<div class="container2">
<div class="holder2">
<b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b>
<div class="content">
<h2>{width: 90 %; min-width:400px;} includes IE5. 01 , IE5. 5  and IE6</h2>
<h3>this is the second way that I have found to emulate true min-width in IE and uses float left, a border-width and a negative margin (NO javascript).</h3>

<h4>this div also has a min-width of 400px and a width of  90 %. You can set the width as any percentage and the min-width as a px or em value.</h4>

<p>discovered 11th May  2005  by Stu Nicholls</p>
</div>
<b class="b4"></b><b class="b3"></b><b class="b2"></b><b class="b1"></b>
</div>
</div>

<p>compliant <a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.1!">xhtml  1 . 1 </a></p>
<p><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=IE min width" title="please leave your comments here ">leave your comments here</a></p>
<p><a href="../index.html" title="home">home</a></p>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();

</script>
</body>
</html>
...
Рейтинг: 0 / 0
13.02.2008, 20:22
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131197
mrJust
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
mrJust
Гость
Вот. Получилось следующее:

Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
<?xml version="1.0" encoding="UTF-8"?><!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" xml:lang="en" >
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> min-width in Internet Explorer - fixed </title>

<style type="text/css">



/* for all browsers that understand min-width */
.container {position:relative; width: 90 %; min-width:500px;}
.holder {display:block; color:# 000 ;}

/* method 1 a bodge for IE5.5 and IE6 browsers */
* html .container {border-right:400px solid #fff;}
* html .holder {display:inline-block; position:relative; margin-right:-400px;}



.page-data {background-color:gray;}



#wrapper{background-color:gray;}
	#header {background-color:#d7dabd}
	#container {background-color:blue;FLOAT: left; WIDTH:  100 %; MARGIN-RIGHT: -200px}
	.content {BACKGROUND: green; MARGIN-RIGHT: 200px;overflow:hidden;}
	#sidebar {FLOAT: right; WIDTH: 200px;background-color:red;}
	#footer {BACKGROUND: #d7dabd}
	.clearing {CLEAR: both; HEIGHT: 0px}
</style>
</head>

<body>
<div class="container">
	<div class="holder">
		<div class="page-data">
			<DIV id=header>header</DIV>
		</div>
	</div>
</div>
<div class="container">
	<div class="holder">
		<div class="page-data">
			<DIV id=wrapper>
				<DIV id=container>

					<DIV class=content>
						<H1>long_content</H1>
					</DIV>
					<DIV class=content>
						<H1>content</H1>
					</DIV>
				</DIV>
				<DIV id=sidebar>
					<H1>sidebar</H1>
					<UL>
					  <LI>link one 
					  <LI>link two </LI>
					</UL>
				</DIV>
			</DIV>
			<DIV class=clearing></DIV></DIV>
			<DIV id=footer>footer</DIV>
		</div>
	</div>
</div>
</body>
</html>
...
Рейтинг: 0 / 0
13.02.2008, 20:39
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131208
зы
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
зы
Участник
только вот min-width что-то мало где работает... так что я бы не советовал
...
Рейтинг: 0 / 0
13.02.2008, 20:44
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131219
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Вы использовали не очень качественный первоисточник для изучения резинового дизайна.
Здесь будет получшею

Влад Мержевич

Почитайте не только статью, но и обсуждение. там будет ответ и на Ваш вопрос.
...
Рейтинг: 0 / 0
13.02.2008, 20:50
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35131220
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
Не объяснил почему некачественный.
Отрицательные величины в styles допустимы спецификацией, но их поведение
является браузеро-зависимым. Все делается гораздо, гораздо проще.
В левой колонке устанавливается обтекание и ширина, а в правой левый маргин.
И все.
...
Рейтинг: 0 / 0
13.02.2008, 20:52
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35133848
GreenShadow
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
GreenShadow
Гость
авторой даже смотреть не хочу на этот ужос, буквы большие, тэги незакрытые, ай-ай
Сори, поторопился, просто приводить полностью свой код было нереально из-за его сложности, взял код аналогичного примера, и чуть переделал.

2 mrJust Спасибо за пример, попробую. Правда у меня оригинальный код посложнее, придётся повозится.

2 apapacy Да, с отрицательными отступами сложноватое решение, на этом сайте фактически учился верстать, так что выбор был не оптимальным :) Спасибо за ссылку, знакомая статья, сейчас перечитываю коменты, пытаюсь применить к моему случаю.
...
Рейтинг: 0 / 0
14.02.2008, 18:13
| Ответить | Цитировать | Написать  
проблемы с блочной вёрсткой
    #35133863
GreenShadow
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
GreenShadow
Гость
Всё больше и больше тянет использовать таблицу для разбивки по колонкам, в моём случае, это может быть даже немного упростит код.
...
Рейтинг: 0 / 0
14.02.2008, 18:16
| Ответить | Цитировать | Написать  
11 сообщений из 11, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проблемы с блочной вёрсткой
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35131220&tid=1456915]:
 0ms
get settings:
 7ms
get forum list:
 13ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 151ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 47ms
get tp. blocked users:
 2ms
others: 209ms
total:  446ms
созд. / загр.: 446ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]