ReSQL.ru
     
powered by simpleCommunicator - 2.0.61     © 2026 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Украли 1% )
19 сообщений из 19, страница 1 из 1
Украли 1% )
    #38111504
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
Сделал небольшой HTML макет и табличку стилей http://jsfiddle.net/4BaAQ/
Не понятны 2 момента:
1) Почему при width: 60% у #center блок Right улетает на вторую строку.
2) (следует из первого) Как убрать эти красные дырки?
...
Рейтинг: 0 / 0
15.01.2013, 22:23
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111521
Фотография Паганель
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Паганель
Участник
я бы написал <table> и не мучился
...
Рейтинг: 0 / 0
15.01.2013, 22:54
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111554
няка
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
няка
Гость
потому что такова суть инлайна
все символы между блоками тоже учитываются при рендере страницы
если сверстать вот так, то гадость уйдет, но это как то не красиво совсем

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
    <div id="container">
        <div id="left" class="column">
            Left
        </div><div id="center" class="column">
            Center
        </div><div id="right" class="column">
            Right
        </div>
    </div>
...
Рейтинг: 0 / 0
16.01.2013, 00:23
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111562
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
Спасибо.
Вот тут разжевано почему это происходит и как с этим бороться. Но в моем случае похоже достаточно будет использовать float: left; и не трогать display.
...
Рейтинг: 0 / 0
16.01.2013, 00:51
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111569
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
Залил "окончательный" вариант http://jsfiddle.net/gec4y/
Вроде выглядит как надо, но хотелось бы узнать что я сделал не так как нужно было. Так сказать аргументированной критики опытных верстальщиков хочется. )
...
Рейтинг: 0 / 0
16.01.2013, 01:14
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111630
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
LexxxxxЗалил "окончательный" вариант http://jsfiddle.net/gec4y/
У тебя такая каша там. Для такого простого макета столько всего лишнего...
...
Рейтинг: 0 / 0
16.01.2013, 08:26
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111631
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Как вариант...

 
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#head {
	height: 150px;
	background-color: yellow;
}
#left {
	float: left;
	width: 20%;
	background-color: lightcyan;
}
#content {
	margin-left: 20%;
	background-color: lightcoral
}
#footer {
	height: 50px;
	background-color: green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='head'>head</div>
<div id='left'>left</div>
<div id='content'>content</div>
<div id='footer'>footer</div>
</body>
</html>

...
Рейтинг: 0 / 0
16.01.2013, 08:35
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111635
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
krvsa,

А почему вариант занимает все ширину экрана и куда делась правая колонка?
...
Рейтинг: 0 / 0
16.01.2013, 08:49
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111638
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Lexxxxxкуда делась правая колонка?
По твоей последней ссылке я её и не видел...

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

 
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#head {
	height: 150px;
	background-color: yellow;
}
#left {
	float: left;
	width: 20%;
	background-color: lightcyan;
}
#right {
	float: right;
	width: 20%;
	background-color: lightcyan;
}
#content {
	margin-left: 20%;
	margin-right: 20%;
	background-color: lightcoral
}
#footer {
	clear: both;
	height: 50px;
	background-color: green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='head'>head</div>
<div id='right'>right</div>
<div id='left'>left</div>
<div id='content'>content</div>
<div id='footer'>footer</div>
</body>
</html>

...
Рейтинг: 0 / 0
16.01.2013, 08:56
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111640
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Lexxxxxхотелось бы узнать что я сделал не так как нужно было. Так сказать аргументированной критики опытных верстальщиков хочется. )
Вот тебе т.с. букварь...
http://csstemplater.com/
...
Рейтинг: 0 / 0
16.01.2013, 08:58
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111642
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
krvsaВот тебе вариант с правой колонкой...
Ну а ширина как же?! :)

Букварей у меня в достатке.Осталось только понять правильно все в них написанное. Так каковы принципиальные косяки в "окончательном" варианте? Например отступы полями надо было делать или что-то в этом роде.
...
Рейтинг: 0 / 0
16.01.2013, 09:01
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111668
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
LexxxxxНу а ширина как же?! :)
У тебя разве была ширина?

Вот тебе чтиво про ширину...
http://www.xiper.net/collect/html-and-css-tricks/karkas-verstki/kolonki-ravnoy-visoty.html

Ну и в букваре можно посмотреть как он это будет делать...
...
Рейтинг: 0 / 0
16.01.2013, 09:32
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111670
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Что-то подумал было про высоту...
Так что с шириной не так?
...
Рейтинг: 0 / 0
16.01.2013, 09:33
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111677
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
krvsa,

http://jsfiddle.net/4BaAQ/
Присмотритесь внимательней. Там и ширина была (относительно окна 70%) и минимальная ширина (850px).
...
Рейтинг: 0 / 0
16.01.2013, 09:36
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111679
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
LexxxxxНу а ширина как же?! :)
Что тут не так с шириной?
...
Рейтинг: 0 / 0
16.01.2013, 09:36
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111694
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
krvsaЧто тут не так с шириной?

Lexxxxx Там и ширина была (относительно окна 70%) и минимальная ширина (850px).
...
Рейтинг: 0 / 0
16.01.2013, 09:58
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111744
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Lexxxxx Там и ширина была (относительно окна 70%) и минимальная ширина (850px).
Засуть все моё в контейнер и дай тому контейнеру все эти параметры.

 
Код: html
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.
<!DOCTYPE html>
<html>
<head>
<!--
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="stylesheet" type="text/css" href="tmp.css" />
-->
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}
#container {
	width: 70%;
	min-width: 850px;
	margin-left: auto;
	margin-right: auto;
}
#head {
	height: 150px;
	background-color: yellow;
}
#left {
	float: left;
	width: 20%;
	background-color: lightcyan;
}
#right {
	float: right;
	width: 20%;
	background-color: lightcyan;
}
#content {
	margin-left: 20%;
	margin-right: 20%;
	background-color: lightcoral
}
#footer {
	clear: both;
	height: 50px;
	background-color: green;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id='container'>
	<div id='head'>head</div>
	<div id='right'>right</div>
	<div id='left'>left</div>
	<div id='content'>content</div>
	<div id='footer'>footer</div>
</div>
</body>
</html>


Какие-то самостоятельные действия никто не отменял...
...
Рейтинг: 0 / 0
16.01.2013, 10:33
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111761
Lexxxxx
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Lexxxxx
Участник
krvsaКакие-то самостоятельные действия никто не отменял...
Вы когда советы свои пишете, сами смотрите что получилось?!
...
Рейтинг: 0 / 0
16.01.2013, 10:44
| Ответить | Цитировать | Написать  
Украли 1% )
    #38111797
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
LexxxxxВы когда советы свои пишете, сами смотрите что получилось?!
Нет конечно, на то они и советы...
Т.к. совет ни к чему не обязывает.
...
Рейтинг: 0 / 0
16.01.2013, 11:03
| Ответить | Цитировать | Написать  
19 сообщений из 19, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Украли 1% )
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение   Полит. конфиден.  
NoSQL.ru       Кролег: Проекты, Новости, Чат       РЕД ФОРУМ       Фотоальбом: Участники, Встречи
Закрыть
start [/forum/topic.php?fid=22&msg=38111670&tid=1448850]:
 0ms
get settings:
 9ms
get forum list:
 11ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 24ms
get topic data:
 9ms
get forum data:
 2ms
get page messages:
 48ms
get tp. blocked users:
 1ms
others: 259ms
total:  369ms
созд. / загр.: 369ms
x
x
Закрыть


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