ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная верстка, есть вопросы...
25 сообщений из 26, страница 1 из 2
  1  все
Блочная верстка, есть вопросы...
    #35334267
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот сделал такую страничку...
Код: 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.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->

<style type='text/css'>
body {
	font-family : Tahoma;
	font-size : 11px;
	margin: 0px;
	background-color: # 000000 ;
}
#head {
	height: 125px;
	width:  100 %;
	background: url(img/scr.png) repeat-x;
}
#logo {
	float: left;
	width: 255px;
	height: 125px;
	background: url(img/logo.png);
}
#scr {
	float: left;
	height: 125px;
}
img.scr {
	margin-top : 10px;
	margin-left : 10px;
	margin-right : 10px;
}
#news,#footer {
	border-bottom : 4px solid #D91C1C;
}
#content {
	clear: both;
	width:  100 %;
	height: auto;
	background: url(img/menu.png) repeat-x;
	background-color: gray;
}
#news {
	float: left;
	width: 209px;
	height: 480px;
	background: url(img/news.png) no-repeat;
	background-position: top right;
	background-color: white;
}
p.news_tit {
	padding-bottom : 5px;
	padding-top : 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family : Arial Narrow;
	font-size : 23px;
	font : bold;
	color: #1F2B74;
	text-align : center;
	text-transform : uppercase;
}
span.news_tit {
	color: #F5151C
}
p.news_beg {
	margin-top: 0px;
	margin-left: 20px;
	margin-bottom: 0px;
	text-transform : uppercase;
	font : bold;
	color: #D91C1C;
}
span.news_beg {
	margin-top: 0px;
	margin-bottom: 0px;
	width: 110px;
	border-bottom : 1px solid #D91C1C;
}
p.news_txt {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 20px;
	margin-right: 20px;
}
#interval {
	float: left;
	background-color: # 000000 ;
	width: 9px;
	height: 480px;
	border-bottom : 4px solid # 000000 ;
}
#conteiner {
	float: left;
	height: auto;
}
#menu {
	margin: 0px;
	width: autopx;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
p.menu {
	font-family : Arial;
	font-size : 10px;
	margin-top: 12px;
	text-align : center;
	text-transform : uppercase;
	font : bold;
	color: white;
}
.item,.item_act {
	float: left;
	width: 114px;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
.item_act {
	background: url(img/menu_act.png) repeat-x;
}
.item_dlm {
	float: left;
	background-color: white;
	width: 1px;
	height: 40px;
}
#text {
	margin: 0px;
	background: url(img/text.png) no-repeat;
	background-color: white;
}
p.text {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 15px;
}
a.text {
	color: #D91C1C;
}
#footer {
	clear: both;
	width:  100 %;
	height: auto;
	background-color: # 000000 ;
}
#author {
	float: left;
	width: 209px;
	height: auto;
	color: white;
}
#author_txt {
	float: left;
	width: 209px;
	height: 35px;
	color: white;
}
p.author_txt {
	margin-top: 11px;
	margin-left: 13px;
}
#author_logo {
	float: left;
	width: 209px;
	height: 35px;
	color: white;
}
img.author_logo {
	margin-top: 3px;
	margin-left: 11px;
}
#home {
	float: left;
	font-size : 12px;
	width: auto;
	height: 76px;
	color: white;
}
p.home {
	margin-top: 26px;
	margin-left: 34px;
}
</style>
</head>
<body>
<div id='head'>
	<div id='logo'>
	</div>
	<div id='scr'>
		<img class='scr' src='img/scr1.png' />
		<img class='scr' src='img/scr2.png' />
		<img class='scr' src='img/scr3.png' />
	</div>
</div>
<div id='content'>
	<div id='news'>
		<p class='news_tit'>Большая <span class='news_tit'>стройка</span>
		</p>
		<p class='news_beg'>Новости <span class='news_beg'></span>
		</p>
		<p class='news_txt'>Текст новостей Текст новостей Текст новостей Текст новостей
		</p>
		<p class='news_txt'>Текст новостей Текст новостей Текст новостей Текст новостей
		</p>
		<p class='news_txt'> 1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   0 
		</p>
	</div>
	<div id='interval'>
	</div>
	<div id='conteiner'>
		<div id='menu'>
			<div class='item'><p class='menu'>Главная</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item' onmouseover='this.className="item_act"' onmouseout='this.className="item"'><p class='menu'>Новости</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Фотоальбом</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Контакт</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Письмо нам</p>
			</div>
			<div class='item_dlm'>
			</div>
		</div>
		<div id='text'>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				<a href='#' class='text'>www.test.ru</a>
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
			</p>
		</div>
	</div>
</div>
<div id='footer'>
	<div id='author'>
		<div id='author_txt'>
			<p class='author_txt'>Дизайн сайта:<br />IT - компания
			</p>
		</div>
		<div id='author_logo'>
			<img class='author_logo' src='img/author_logo.png' />
		</div>
	</div>
	<div id='home'>
		<p class='home'><b>Наши координаты:</b> Адрес владельца страницы...<br />
			<b>Телефон:  8  ( 555 )  55 - 55 - 55 </b>
		</p>
	</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 08:14
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334271
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
1. Но почему-то
Код: plaintext
<div id='text'>
не прилипает вплотную к
Код: plaintext
<div id='menu'>

2. Хотелось бы сделать страничку "резиновой" не только в ширину... Но и в высоту.

Вот это для начала... Есть еще вопросы по другим браузерам, например
Код: plaintext
<div id='text'>
переносится по словам только в ИЕ...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 08:18
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334881
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsa1. Но почему-то
Код: plaintext
<div id='text'>
не прилипает вплотную к
Код: plaintext
<div id='menu'>

сам же так задал, своими руками :)
p.text {
margin-top: 10px;
...
}

krvsa
2. Хотелось бы сделать страничку "резиновой" не только в ширину... Но и в высоту.

как правило эта задача является некорректной по отношению к дивам. Если мне такое надо, то я не задумываясь верстаю таблицей. Хотя конечно попытаться никто не запретит.
...
Рейтинг: 0 / 0
26.05.2008, 12:49
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334901
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionсам же так задал, своими руками :)
p.text {
margin-top: 10px;
...
}

Так это отступ у абзаца... Если дать ширину
Код: plaintext
1.
2.
3.
4.
#text {
...
	height: 440px;
...
}
В ИЕ все устанавливается как нужно
illionкак правило эта задача является некорректной по отношению к дивам.
Вот и я примеров не встречал...

А как сделать чтобы дивы "не расползались" при уменьшении окна по ширине? Что-то никак не найду примеров этого...
...
Рейтинг: 0 / 0
26.05.2008, 12:57
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334930
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
При вот таком раскладе в ИЕ все просто идеально!

Код: 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.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->

<style type='text/css'>
body {
	font-family : Tahoma;
	font-size : 11px;
	margin: 0px;
	background-color: # 000000 ;
	heigth:  100 %;
}
#head {
	height: 125px;
	width:  100 %;
	background: url(img/scr.png) repeat-x;
}
#logo {
	float: left;
	width: 255px;
	height: 125px;
	background: url(img/logo.png);
}
#scr {
	float: left;
	height: 125px;
}
img.scr {
	margin-top : 10px;
	margin-left : 10px;
	margin-right : 10px;
}
#content {
	clear: both;
	width:  100 %;
	height: auto;
	background: url(img/menu.png) repeat-x;
	background-color: gray;
}
#news {
	float: left;
	width: 209px;
	height: 480px;
	background: url(img/news.png) no-repeat;
	background-position: top right;
	background-color: white;
}
#news,#text,#footer {
	border-bottom : 4px solid #D91C1C;
}
p.news_tit {
	padding-bottom : 5px;
	padding-top : 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family : Arial Narrow;
	font-size : 23px;
	font : bold;
	color: #1F2B74;
	text-align : center;
	text-transform : uppercase;
}
span.news_tit {
	color: #F5151C
}
p.news_beg {
	margin-top: 0px;
	margin-left: 20px;
	margin-bottom: 0px;
	text-transform : uppercase;
	font : bold;
	color: #D91C1C;
}
span.news_beg {
	margin-top: 0px;
	margin-bottom: 0px;
	width: 110px;
	border-bottom : 1px solid #D91C1C;
}
p.news_txt {
	margin-top: 3px;
	margin-bottom: 3px;
	margin-left: 20px;
	margin-right: 20px;
}
#interval {
	float: left;
	background-color: # 000000 ;
	width: 9px;
	height: 480px;
	border-bottom : 4px solid # 000000 ;
}
#conteiner {
	float: left;
	height: auto;
}
#menu {
	display: block;
	margin: 0px;
	padding: 0px;
	width: auto;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
p.menu {
	font-family : Arial;
	font-size : 10px;
	margin-top: 12px;
	text-align : center;
	text-transform : uppercase;
	font : bold;
	color: white;
}
.item,.item_act {
	float: left;
	width: 114px;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
.item_act {
	background: url(img/menu_act.png) repeat-x;
}
.item_dlm {
	float: left;
	background-color: white;
	width: 1px;
	height: 40px;
}
#text {
	margin: 0px;
	padding: 0px;
	height: 440px;
	background: url(img/text.png) no-repeat;
	background-color: white;
}
p.text {
	margin-bottom: 10px;
	margin-left: 15px;
	margin-right: 15px;
}
a.text {
	color: #D91C1C;
}
#footer {
	clear: both;
	width:  100 %;
	height: auto;
	background-color: # 000000 ;
}
#author {
	float: left;
	width: 209px;
	height: auto;
	color: white;
}
#author_txt {
	float: left;
	width: 209px;
	height: 35px;
	color: white;
}
p.author_txt {
	margin-top: 11px;
	margin-left: 13px;
}
#author_logo {
	float: left;
	width: 209px;
	height: 35px;
	color: white;
}
img.author_logo {
	margin-top: 3px;
	margin-left: 11px;
}
#home {
	float: left;
	font-size : 12px;
	width: auto;
	height: 76px;
	color: white;
}
p.home {
	margin-top: 26px;
	margin-left: 34px;
}
</style>
</head>
<body>
<div id='head'>
	<div id='logo'>
	</div>
	<div id='scr'>
		<img class='scr' src='img/scr1.png' />
		<img class='scr' src='img/scr2.png' />
		<img class='scr' src='img/scr3.png' />
	</div>
</div>
<div id='content'>
	<div id='news'>
		<p class='news_tit'>Большая <span class='news_tit'>стройка</span>
		</p>
		<p class='news_beg'>Новости <span class='news_beg'></span>
		</p>
		<p class='news_txt'>Текст новостей Текст новостей Текст новостей Текст новостей
		</p>
		<p class='news_txt'>Текст новостей Текст новостей Текст новостей Текст новостей
		</p>
		<p class='news_txt'> 1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   0 
		</p>
	</div>
	<div id='interval'>
	</div>
	<div id='conteiner'>
		<div id='menu'>
			<div class='item'><p class='menu'>Главная</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item' onmouseover='this.className="item_act"' onmouseout='this.className="item"'><p class='menu'>Новости</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Фотоальбом</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Контакт</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Письмо нам</p>
			</div>
			<div class='item_dlm'>
			</div>
		</div>
		<div id='text'>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				<a href='#' class='text'>www.test.ru</a>
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
			</p>
		</div>
	</div>
</div>
<div id='footer'>
	<div id='author'>
		<div id='author_txt'>
			<p class='author_txt'>Дизайн сайта:<br />IT - компания
			</p>
		</div>
		<div id='author_logo'>
			<img class='author_logo' src='img/author_logo.png' />
		</div>
	</div>
	<div id='home'>
		<p class='home'><b>Наши координаты:</b> адрес организации<br />
			<b>Телефон:  8  ( 5555 )  55 - 55 - 55 </b>
		</p>
	</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 13:03
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334944
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот картинка для иллюстрации...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 13:06
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334950
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsa
Так это отступ у абзаца...

маргин - это не отступ, а поле. Разница в том, что отступ считается внутрь элемента, а поле - наружу. Отступ в css - это padding.
Код: plaintext
1.
2.
3.
4.
5.
p.text {
	margin-top: 0px;
	padding-top: 10px;
        ...
}
...
Рейтинг: 0 / 0
26.05.2008, 13:09
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334952
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
В Опере:
Код: plaintext
<div id='text'>
- все еще имеет отступ...
- текст в нем не хочет переноситься по словам

В ФФ вообще не получается резиновость даже в ширину...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 13:09
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35334977
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionмаргин - это не отступ, а поле.
Понял.

В Опереостался только один косячек... Бордер нижний никак не хочет удлинняться шире текста.
...
Рейтинг: 0 / 0
26.05.2008, 13:16
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335034
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Вот такой вариант теперь...
Код: 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.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
<html>
<head>
<!--<link rel="stylesheet" type="text/css" href="css/main.css">-->

<style type='text/css'>
body {
	font-family : Tahoma;
	font-size : 11px;
	margin: 0px;
	background-color: # 000000 ;
	heigth:  100 %;
}
#head {
	height: 125px;
	width:  100 %;
	background: url(img/scr.png) repeat-x;
}
#logo {
	float: left;
	width: 255px;
	height: 125px;
	background: url(img/logo.png);
}
#scr {
	float: left;
	height: 125px;
}
img.scr {
	margin-top : 10px;
	margin-left : 10px;
	margin-right : 10px;
}
#content {
	clear: both;
	width:  100 %;
	height: auto;
	background: url(img/menu.png) repeat-x;
	background-color: white;
}
#news {
	float: left;
	width: 209px;
	height: 480px;
	background: url(img/news.png) no-repeat;
	background-position: top right;
	background-color: white;
}
#news,#text,#footer {
	border-bottom : 4px solid #D91C1C;
}
p.news_tit {
	padding-bottom : 5px;
	padding-top : 0px;
	margin-top: 0px;
	margin-bottom: 0px;
	font-family : Arial Narrow;
	font-size : 23px;
	font : bold;
	color: #1F2B74;
	text-align : center;
	text-transform : uppercase;
}
span.news_tit {
	color: #F5151C
}
p.news_beg {
	margin: 0px;
	padding-left: 20px;
	padding-bottom: 0px;
	text-transform : uppercase;
	font : bold;
	color: #D91C1C;
}
span.news_beg {
	margin: 0px;
	padding-top: 0px;
	padding-bottom: 0px;
	width: 110px;
	border-bottom : 1px solid #D91C1C;
}
p.news_txt {
	margin: 0px;
	padding-top: 3px;
	padding-bottom: 1px;
	padding-left: 20px;
	padding-right: 20px;
}
#interval {
	float: left;
	background-color: # 000000 ;
	width: 9px;
	height: 480px;
	border-bottom : 4px solid # 000000 ;
}
#conteiner {
	float: left;
	height: auto;
}
#menu {
	display: block;
	margin: 0px;
	padding: 0px;
	width: auto;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
p.menu {
	font-family : Arial;
	font-size : 10px;
	margin: 0px;
	padding-top: 13px;
	text-align : center;
	text-transform : uppercase;
	font : bold;
	color: white;
}
.item,.item_act {
	float: left;
	width: 114px;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
.item_act {
	background: url(img/menu_act.png) repeat-x;
}
.item_dlm {
	float: left;
	background-color: white;
	width: 1px;
	height: 40px;
}
#text {
	margin: 0px;
	padding: 0px;
	height: 440px;
	background: url(img/text.png) no-repeat;
	background-color: white;
}
p.text {
	margin: 0px;
	padding-bottom: 2px;
	padding-left: 15px;
	padding-right: 15px;
}
a.text {
	color: #D91C1C;
}
#footer {
	clear: both;
	width:  100 %;
	height: auto;
	background-color: # 000000 ;
}
#author {
	float: left;
	width: 209px;
	height: auto;
	color: white;
}
#author_txt {
	float: left;
	width: 209px;
	height: 35px;
	color: white;
}
p.author_txt {
	margin: 0px;
	padding-top: 11px;
	padding-left: 13px;
}
#author_logo {
	float: left;
	width: 209px;
	height: 35px;
	color: white;
}
img.author_logo {
	margin-top: 3px;
	margin-left: 11px;
}
#home {
	float: left;
	font-size : 12px;
	width: auto;
	height: 76px;
	color: white;
}
p.home {
	margin: 0px;
	padding-top: 26px;
	padding-left: 34px;
}
</style>
</head>
<body>
<div id='head'>
	<div id='logo'>
	</div>
	<div id='scr'>
		<img class='scr' src='img/scr1.png' />
		<img class='scr' src='img/scr2.png' />
		<img class='scr' src='img/scr3.png' />
	</div>
</div>
<div id='content'>
	<div id='news'>
		<p class='news_tit'>Большая <span class='news_tit'>стройка</span>
		</p>
		<p class='news_beg'>Новости <span class='news_beg'></span>
		</p>
		<p class='news_txt'>Текст новостей Текст новостей Текст новостей Текст новостей
		</p>
		<p class='news_txt'>Текст новостей Текст новостей Текст новостей Текст новостей
		</p>
		<p class='news_txt'> 1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   0   1   2   3   4   5   6   7   8   9   0 
		</p>
	</div>
	<div id='interval'>
	</div>
	<div id='conteiner'>
		<div id='menu'>
			<div class='item'><p class='menu'>Главная</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item' onmouseover='this.className="item_act"' onmouseout='this.className="item"'><p class='menu'>Новости</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Фотоальбом</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Контакт</p>
			</div>
			<div class='item_dlm'>
			</div>
			<div class='item'><p class='menu'>Письмо нам</p>
			</div>
			<div class='item_dlm'>
			</div>
		</div>
		<div id='text'>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				<a href='#' class='text'>www.test.ru</a>
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
				 текст текст текст текст текст текст текст текст текст текст текст
			</p>
			<p class='text'>Текст текст текст текст текст текст текст текст текст текст текст текст
			</p>
		</div>
	</div>
</div>
<div id='footer'>
	<div id='author'>
		<div id='author_txt'>
			<p class='author_txt'>Дизайн сайта:<br />IT - компания
			</p>
		</div>
		<div id='author_logo'>
			<img class='author_logo' src='img/author_logo.png' />
		</div>
	</div>
	<div id='home'>
		<p class='home'><b>Наши координаты:</b> адрес<br />
			<b>Телефон:  8  ( 555 )  55 - 55 - 55 </b>
		</p>
	</div>
</div>
</body>
</html>
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 13:44
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335037
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
В Опере:
у <div id='text'>
- Бордер нижний никак не хочет удлинняться шире текста
- Текст не переносится по словам
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 13:46
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335055
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaВ Опере:
у <div id='text'>
- Бордер нижний никак не хочет удлинняться шире текста

ты уже второй раз это пишешь, и я уже второй раз не понимаю что это значит.


krvsaВ Опере:
у <div id='text'>
...
- Текст не переносится по словам

все происходит правильно. Див, если его ширина не ограничена, будет растягиваться на 100% родителя, а в данном случае это ширина экрана. В результате див 'conteiner' прыгает на следующую строку. Можно установить у него поле, тогда он перестанет это делать:
Код: plaintext
1.
2.
3.
4.
conteiner {
	margin-left:220px;
	height: auto;
}
...
Рейтинг: 0 / 0
26.05.2008, 13:52
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335208
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illion krvsaВ Опере:
у <div id='text'>
- Бордер нижний никак не хочет удлинняться шире текста

ты уже второй раз это пишешь, и я уже второй раз не понимаю что это значит.
На картинке этого не увидиш... Линия тоненькая... Могу картинку побольше послать на е-мейл.
...
Рейтинг: 0 / 0
26.05.2008, 14:40
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335226
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionМожно установить у него поле, тогда он перестанет это делать:
Код: plaintext
1.
2.
3.
4.
conteiner {
	margin-left:220px;
	height: auto;
}

Так вообще вся средняя часть упрыгивает на 220 пикселов вправо.
...
Рейтинг: 0 / 0
26.05.2008, 14:47
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335261
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaТак вообще вся средняя часть упрыгивает на 220 пикселов вправо.
да ну... Что я делаю: беру последний запостенный исходник (который 5714928 ), и прописываю в conteiner поле. Потом открываю полученное в опере и файрфоксе и смотрю как красиво все получилось.
...
Рейтинг: 0 / 0
26.05.2008, 15:01
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335268
Фотография Black
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Black
Участник
Модератор: 2krvsa, впредь "большой" код не выкладывайте так, на форуме существует возможность прикреплять файлы!
...
Рейтинг: 0 / 0
26.05.2008, 15:03
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335269
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsaВ Опере:
у <div id='text'>
- Бордер нижний никак не хочет удлинняться шире текста

На картинке этого не увидиш... Линия тоненькая... Могу картинку побольше послать на е-мейл.
лучше нужный кусок картинки в студию. Может у кого-нибудь другого ответ найдется.
...
Рейтинг: 0 / 0
26.05.2008, 15:04
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335331
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Black , про код учту...

illion , извини... Не в тот ДИв вставлял код Теперь все нормально в Опере (ФФ у меня на работе нет).

Даже бордюр в Опереотображается отлично! Но при таком раскладе (с margin-left:220px;) в ИЕ бордюр начинается с неким отступом.
Как сделать так, чтобы эта дописка не работала в ИЕ?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 15:23
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35335494
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
А как сделать так, чтобы дивы "не расползались" при уменьшении ширины окна? Пусть скрол появляется горизонтальный... А дивы стоят на месте...
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
26.05.2008, 16:23
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35336223
apapacy
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
apapacy
Участник
krvsa illionМожно установить у него поле, тогда он перестанет это делать:
Код: plaintext
1.
2.
3.
4.
conteiner {
	margin-left:220px;
	height: auto;
}

Так вообще вся средняя часть упрыгивает на 220 пикселов вправо.

Я брал первый вариант и даал такой маргин (даже 210px) - ничего не должно расползаться
Возможно где-то осталься float: left - он здесь не нужен и дает в Опере скачки.

Второй вариант Вашего файла слишком отличается от желаемого результата (половина контента почему-то не видна и я его не рассматривал.)

Я бы рекомендовал сразу добавить локтайп.
...
Рейтинг: 0 / 0
27.05.2008, 00:53
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35336304
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
krvsa
Даже бордюр в Опереотображается отлично! Но при таком раскладе (с margin-left:220px;) в ИЕ бордюр начинается с неким отступом.
Как сделать так, чтобы эта дописка не работала в ИЕ?

можно воспользоваться тем, что ИЕ, включая последние версии, не понимает псевдоклассы. Например:
Код: plaintext
1.
:lang(ru) #conteiner { margin-left:220px; }
но безусловно лучше будет разобраться почему именно появляется в ИЕ отступ и устранить причину.

krvsaА как сделать так, чтобы дивы "не расползались" при уменьшении ширины окна? Пусть скрол появляется горизонтальный... А дивы стоят на месте...
я так понимаю, это о дивах в меню речь идет? Можно использовать min-width (которая будет >= ширины меню) для conteiner'а. ИЕ версии ниже 7 не поддерживает min-width, но в тырнете много есть примеров как это обойти.
...
Рейтинг: 0 / 0
27.05.2008, 04:48
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35336305
Фотография illion
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
illion
Участник
apapacy
Я брал первый вариант и даал такой маргин (даже 210px) - ничего не должно расползаться
Возможно где-то осталься float: left - он здесь не нужен и дает в Опере скачки.

krvsa же уже отписался, почему так получилось. А наличие float:left на последней колонке никак не сказывается.

apapacyЯ бы рекомендовал сразу добавить локтайп.
да, вот это здравая идея. Доктайп может верстке приделать ноги.
...
Рейтинг: 0 / 0
27.05.2008, 04:54
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35336404
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illion apapacyЯ бы рекомендовал сразу добавить локтайп.
да, вот это здравая идея. Доктайп может верстке приделать ноги.
А вот тут поподробнее.

Вот последний вариант странички... В ФФ и Опере все как нужно. Осталось устранить "уголок" у menu...
...
Рейтинг: 0 / 0
27.05.2008, 09:02
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35336467
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
illionя так понимаю, это о дивах в меню речь идет?
Да. Но и картинки в head тоже норовят упрыгать вниз.

illionМожно использовать min-width (которая будет >= ширины меню) для conteiner'а.
Указал...
Код: plaintext
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
#conteiner {
	margin-left:218px;
	min-width: 578px; // вот
	height: auto;
	background: url(img/menu.png) repeat-x;
}
#menu {
	display: block;
	margin: 0px;
	padding: 0px;
	width: 577px;
	height: 40px;
	background: url(img/menu.png) repeat-x;
}
но это не помогло...
illionИЕ версии ниже 7 не поддерживает min-width, но в тырнете много есть примеров как это обойти.
У меня 6-ой...
...
Рейтинг: 0 / 0
27.05.2008, 09:31
| Ответить | Цитировать | Написать  
Блочная верстка, есть вопросы...
    #35336942
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Сделал еще один вариант... В ИЕ и Опере смотрится нормально.
Может чего еще подсоветуете?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
27.05.2008, 11:41
| Ответить | Цитировать | Написать  
25 сообщений из 26, страница 1 из 2
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная верстка, есть вопросы...
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=35335331&tid=1456402]:
 0ms
get settings:
 8ms
get forum list:
 15ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 155ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 61ms
get tp. blocked users:
 1ms
others: 210ms
total:  467ms
созд. / загр.: 467ms
x
x
Закрыть


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