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

Код: 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:51
    #38111562
Lexxxxx
Lexxxxx
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
Спасибо.
Вот тут разжевано почему это происходит и как с этим бороться. Но в моем случае похоже достаточно будет использовать float: left; и не трогать display.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2013, 01:14
    #38111569
Lexxxxx
Lexxxxx
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
Залил "окончательный" вариант http://jsfiddle.net/gec4y/
Вроде выглядит как надо, но хотелось бы узнать что я сделал не так как нужно было. Так сказать аргументированной критики опытных верстальщиков хочется. )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2013, 08:26
    #38111630
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
LexxxxxЗалил "окончательный" вариант http://jsfiddle.net/gec4y/
У тебя такая каша там. Для такого простого макета столько всего лишнего...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2013, 08:35
    #38111631
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
Как вариант...

 
Код: 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:49
    #38111635
Lexxxxx
Lexxxxx
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
krvsa,

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

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

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

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

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

Lexxxxx Там и ширина была (относительно окна 70%) и минимальная ширина (850px).
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2013, 10:33
    #38111744
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
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:44
    #38111761
Lexxxxx
Lexxxxx
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
krvsaКакие-то самостоятельные действия никто не отменял...
Вы когда советы свои пишете, сами смотрите что получилось?!
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.01.2013, 11:03
    #38111797
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Украли 1% )
LexxxxxВы когда советы свои пишете, сами смотрите что получилось?!
Нет конечно, на то они и советы...
Т.к. совет ни к чему не обязывает.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Украли 1% ) / 19 сообщений из 19, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 484ms
Закрыть
start [/forum/topic.php?fid=22&mobile=1&tid=1448850]:
 0ms
get settings:
 7ms
get forum list:
 11ms
check forum access:
 2ms
check topic access:
 2ms
track hit:
 186ms
get topic data:
 7ms
get forum data:
 2ms
get page messages:
 31ms
get tp. blocked users:
 1ms
others: 235ms
total:  484ms
x
x
Закрыть


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