Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / проблемы с блочной вёрсткой / 11 сообщений из 11, страница 1 из 1
13.02.2008, 17:49
    #35130862
GreenShadow
GreenShadow
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблемы с блочной вёрсткой
Сверстал сайт, дивами без использования таблиц.
Контент слева, панель навигации справа.
Верстал практически так же как описанно здесь:
www.webmascon.com

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

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

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

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

Может быть всё-таки есть какие нибудь пути решения этой проблемы?
Можно конечно сделать базовую разбивку по колонкам таблицей, но хочется попробовать
оставить чисто блочную вёрстку, если это возможно.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.02.2008, 19:08
    #35131070
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблемы с блочной вёрсткой
а зачем чисто блочную? любишь гиморрой? table-layout: fixed у таблицы как правило решает все проблемы.
а вообще проблему не понять без исходника страницы
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.02.2008, 19:40
    #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, 20:08
    #35131154
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблемы с блочной вёрсткой
ой даже смотреть не хочу на этот ужос, буквы большие, тэги незакрытые, ай-ай
приведи к нормальному виду вначале, сделай полноценный XHTML документ
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.02.2008, 20:22
    #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:39
    #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:44
    #35131208
зы
зы
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблемы с блочной вёрсткой
только вот min-width что-то мало где работает... так что я бы не советовал
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
13.02.2008, 20:50
    #35131219
apapacy
apapacy
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
проблемы с блочной вёрсткой
Вы использовали не очень качественный первоисточник для изучения резинового дизайна.
Здесь будет получшею

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

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

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

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


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