Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная верстка, есть вопросы... / 25 сообщений из 26, страница 1 из 2
  1  все
26.05.2008, 08:14
    #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:18
    #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, 12:49
    #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:57
    #35334901
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блочная верстка, есть вопросы...
illionсам же так задал, своими руками :)
p.text {
margin-top: 10px;
...
}

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

А как сделать чтобы дивы "не расползались" при уменьшении окна по ширине? Что-то никак не найду примеров этого...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.05.2008, 13:03
    #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:06
    #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:09
    #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:16
    #35334977
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блочная верстка, есть вопросы...
illionмаргин - это не отступ, а поле.
Понял.

В Опереостался только один косячек... Бордер нижний никак не хочет удлинняться шире текста.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.05.2008, 13:44
    #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:46
    #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:52
    #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, 14:40
    #35335208
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блочная верстка, есть вопросы...
illion krvsaВ Опере:
у <div id='text'>
- Бордер нижний никак не хочет удлинняться шире текста

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

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

На картинке этого не увидиш... Линия тоненькая... Могу картинку побольше послать на е-мейл.
лучше нужный кусок картинки в студию. Может у кого-нибудь другого ответ найдется.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
26.05.2008, 15:23
    #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, 16:23
    #35335494
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, 00:53
    #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, 04:48
    #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:54
    #35336305
illion
illion
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блочная верстка, есть вопросы...
apapacy
Я брал первый вариант и даал такой маргин (даже 210px) - ничего не должно расползаться
Возможно где-то осталься float: left - он здесь не нужен и дает в Опере скачки.

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

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

Вот последний вариант странички... В ФФ и Опере все как нужно. Осталось устранить "уголок" у menu...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
27.05.2008, 09:31
    #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, 11:41
    #35336942
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Блочная верстка, есть вопросы...
Сделал еще один вариант... В ИЕ и Опере смотрится нормально.
Может чего еще подсоветуете?
----------
Cache for Windows (x86-32) 2007.1.3 (Build 607) Wed Oct 17 2007 02:12:09 EDT
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
  1  все
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Блочная верстка, есть вопросы... / 25 сообщений из 26, страница 1 из 2
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 342ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1456402]:
 0ms
get settings:
 9ms
get forum list:
 15ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 28ms
get topic data:
 8ms
get forum data:
 2ms
get page messages:
 59ms
get tp. blocked users:
 1ms
others: 216ms
total:  342ms
x
x
Закрыть


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