Nanto

Надо чтобы блок c position:fixed (или эмуляцией) скроллился вместе с body при достижении min-width... JS тоже будет уместным

Я только начал изучать html, css, java b мне дали такое задание.

А мы то тут при чём?

Ну мы типа должны за топикстартера сделать тестовое задание, а уж потом он это сам выучит...

http://htmlbook.ru/content/osobennosti-tablits

Если так же лень читиать, вкратце: можно, но не всегда.

Сдаётся мне некорректно использовать <br> для чистки потока. Всё-таки служебный элемент форматирования текста, нулевого размера...

Замените на div.

Бред! Вы представляете сколько сайтов с position:fixed и overflow:auto смотрели через IE7? Майкрософт бы уже такую кучу дерьма слопал!..

Написал небольшой калькулятор для друга, во всех браузерах норм отображает кроме хрома. Почему понять не могу. Проблема происходит в момент открывания списков. Пропадает стиль (clear: both) для следующего за селектом дива и получается что всё сдвигается.

Ссылка на сайт _http://thpc.ru/items/domofony/kalkulyatory/kalkulyator_4/ в опере, мазиле и ie нормально всё.

Когда писал в простой HTMLке тоже не работает нормально.

Подскажите где ошибся.

Идентично опере

В макете понадобился закрыть часть экрана блоком с "position:fixed". Из-за чего некоторые ссылки перекрылись этим блоком. Отслеживать поведение каждой - уйма времени. Вариант - задать всем перекрытым блокам position:relative и "вытолкнуть" их наверх через z-index. Какие при этом могут появится косяки? Например, переопределение родителя при абсолютном позиционировании (вместо body - позиционированный блок) или float будет корректно работать? Может ещё какие подводные камни?

html{
background:transparent url("/2.jpg") repeat 0 0;
width:100%;
height:100%;
}
body{
background: transparent url("/1.jpg") no-repeat 0 100%;
width:100%;
height:auto !important;
height:100%;
min-height:100%;
}

А если попробовать http://htmlbook.ru/css/clip

Правда я слабо представляю себе реализацию, так... просто мысль пришла

а картинка бэкграундом или через img?

Порезать на три части!

Я прекрасно знаю (и даже понимаю) что такое супрематизм и прочее...

Это нормально (то как я выразился) - пусть привыкает. Дизайновое комьюнити в РФ отличает какая-то гипертрофированная агрессивность к новичкам. Хотя по большей части 95% российского дизайна - шлак! К тому же не адаптированный под вёрстку! Я тут одному товарищу как-то объяснял нюансы вёрстки по дизайн-макетам, он был шокирован от того сколько там подводных камней, о которых дизайнеры то ли забывают, то ли "это проблемы верстальщика". Творческие личности, мля! Не один год макеты под веб делают, а в "фиксе с графикой" 20 пикселей под скролл-бар дядя резервировать будет? Это так, накипело... Просто дали тут один высер с половиной сведённых слоёв. Надо всё расковыривать, резать и слоями с перекрытием укладывать... Ей богу проще самому подобное рисовать!

P.S. Это я ещё мягко выразился! Verder-a давно не видно!..

Ну покажите мне валидный "кросс" (IE6) на блоках!

Вот хоть убей не понимаю этих воплей насчёт семантики... w3c призывает отделять оформление от струкутры - ок, но где инструменты для номального офрмления? box-sizing? не смешно! единственную нормальную модель структуры (табличную) и ту хотят похоронить! "Таблицы для таблиц"...

Дайте новые тэги, какой-нибудь <structure>... Хотя все-равно некроссбраузерно выйдет!

Вот типичный пример! Новичок берётся за вёрстку. Полазил в интернете и вывел для себя две вещи:

1) Важен валидный код

2) Таблицы - зло. Нужна блочная вёрстка.

Выбирает себе примитивнейший макет (хэдер, футер -резина, две колонки фикс.). И оп-па! Куча геммороя. ИЕ и Опера тупят. Какие-то хитрые финты нужно вставлять...

А какие-то имбицилы орут про "семантику". Пусть попробуют свертать такой макетик валидно и кроссбраузерно - это возможно, конечно... Но это будет ТАКОЙ кусище кода со всякими хаками-хреняками, что о какой семантике может идти речь? Штаны через голову одевать и называть это "рациональностью"?

И потихоньку эти вопли доходят до заказчиков (толком ничерта не понимающих) - многие уже особо прописывают в требованиях блочную вёрстку (не догдываясь о противоречии с кроссбраузерностью и валидностью!). Такое ощущение, что эти визги специально подняли старые мастера, с целью выдавить из профессии неопытный молодняк, хотя сами начинали с таблиц!..

Если у меня когда-нибудь попросят подобный макет в блочном исполнении и валидно-семантичный - назло отвечу: "В спецификациях html и css подобное не предусмотрено!" И буду прав на все 100%!

Ладно, раз уж Вы такой твердолобый упрямый, погнали по пунктам:

1) "Меню на своём месте" - ну убейте меня, не понимаю где его место! ОБЪЯСНИТЕ! Дайте наконец картинку. Относительно чего оно должно позиционироваться (правого или левого края, браузера или страницы)?

2) Лаги в Опере. Сделайте ресайз окна по высоте - Опера затупит с перемещением футера.

3) Почитайте эту тему http://forum.htmlbook.ru/index.php?showtopic=30815 , там в приницпе есть рецепты для Вашего макета.

4) Раз Вы только изучаете, то зачем Вам весь этот гемморой? Почему не так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
        margin:0;
        padding:0;
}
html, body{
        height:100%;
        width:100%;
}
table{
	width:100%;
	height:100%;
	text-align:center;
	vertical-align:top;
	border-spacing:0;
}
.header{
	background:red;
	height:40px;
}
.footer{
	background:green;
	height:40px;
}	
.wrapper{
	height:100%;
	*height:auto;
}
.sidebar{
	width:150px;
	background:blue;
}
.content{
	background:yellow;
	width:700px;
}
.content p{
	width:700px;
}
</style>
</head>
<body>
        <table>
		<tr class="header">
			<td colspan="4">header</td>
		</tr>
		<tr class="wrapper">
			<td> </td>
			<td class="sidebar"></td>
			<td class="content" valign="top"><p>Бла-бла...</p></td>
			<td> </td>
		<tr class="footer">
			<td colspan="4">footer</td>
		</tr>			
	</table>
</body>
</html>

Дизайн - это творческая работа...

любое творчество- дизайн...

Выделил. Именно что творчество! Малевание фломастерами по бумаге - отнюдь ещё не творчество, и уж точно не живопись.

Тогда вставляйте

min-height:100%; /* и пусть опера тупит */

По-хорошему надо перевёрстывать, чтобы было кузяво. Вот зачем Вам height:100% для контента? Вам нужна подсвеченная колонка?

На месте? На каком месте? Относительно чего? Ну уберите float:right и задайте нужный Вам margin-left

Кстати, если бы не недавние обсуждения, я бы и не обратил внимание на глюки Оперы! Как часто Вы думаете, пользователь ресайзит окно?

Если вообще вылезут

А кто говорит, что можно ХОРОШО освоить профессию? На мой вгляд, пол-года - это как раз "уровень вхождения в профессию" (как сейчас очень полюбили говорить отчего-то). А выше уже правильно написали - минимальную базу наработал - устраивайся на работу. Продолжать обучение будешь уже в процессе работы (в вёрстке, это утверждение как никогда верно). Плюсы - постоянно набираешься опыта (сидя дома, можно на месяцок и отодвинуть вёрстку подальше. На работе не прокатит), нарабатываешь стаж (у обоих опыт вёрстки 2 года, только у одного ещё и полтора года официального трудоустройства - кому отдадут предпочтение при прочих равных?). Ну и наконец, подзабурев, через некоторое время можно элементарно сменить контору на более серъёзную (переходить на работу проще, чем устраиваться впервые).

А так Вы пишите вполне себе прописные истины (я бы даже сказал штампы). В вёрстке, конечно, есть куча нюансов, которые требуют вдумчивого изучения (как в любой IT-специальности), но не боги горшки обжигают... Положа руку на сердце - давайте признаемся: не такой уж и огромный пласт знаний и уровень интеллекта необходим для овладения этой специальностью.

Ёлки-палки!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>test</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
}
html, body{
	height:100%;
	width:100%;
}
body{
	min-width:890px; /* чтобы скроллились все элементы на странцие */
}
.line{
	margin:5px;
	outline:1px dashed #666;
}
.clear{
	clear:both;
}
#header{
	height:40px;
	width:100%;
	background:#0000CC;
	font-weight:bold;
	font-size:18px;
	position:relative; /* чтобы хэдер не перекрывался враппером */
}
#top-menu{
	padding:5px;
	float:right;
	list-style:none;
}
#top-menu li{
	margin-right:10px;
	display:inline; /* чтобы меню в одну строку */
}
#top-menu a{
	font-family:verdana, sans;
	padding:2px;
	border:1px dotted #FFF;
	color:#FFF;
	text-decoration:none;
}
#wrapper{
	height:100%; /* чтобы опера не тупила (вместо min-height) */
	background-color:#EEE;
	margin:-40px auto 0; /* Чтобы освобдить место для хэдера */
	width:890px;
	border-left:1px solid #DDD;/* Чтобы бордеры не плюсовались к высоте */
	border-right:1px solid #DDD;
}
#sidebar{
	border:1px dashed #CC0000;
	width:150px;
	float:left;
}
#sidebar a{
	color:#AAA;
	padding:5px;
	text-decoration:none;
	font-size:18px;
}
#sidebar a:hover{
	color:#666;
}
#content{
	padding:7px;
	border:1px dashed #999;
	margin-left:155px;
}
.spacer{
	height:40px;
}
#footer{
	width:100%;
	background-color:#000;
	color:#FFF;
	height:40px;
	margin-top:-40px;
}
.footer{
	text-align:center;
	padding-top:10px;
	font:bold 18px/normal italic, sans;
}

</style>
</head>
<body>
	<div id="header">
		<ul id="top-menu">
			<li><a href="#">Главная</a></li>
			<li><a href="#">Что-то</a></li>
		</ul>
	</div>
	<div id="wrapper">
		<div class="spacer"></div> <!-- вставляем сюда отбивку, чтобы хедер не перекрывал контент (и меняем айди на класс) -->
		<div id="sidebar">
			<p><a href="#">Рубрики</a></p>
			<div class="line"></div>
			<p><a href="#">Архив</a></p>
			<div class="line"></div>
			<p><a href="#">Блог</a></p>
			<div class="line"></div>
		</div>
		<div id="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in ligula urna,
			a feugiat libero. Sed quis fringilla urna. Fusce sit amet augue quis enim tempor
			sodales. Donec varius, lorem non tristique ultricies, risus nibh porta ligula,
			</p>
		</div>
		<div class="clear"></div>
		<div class="spacer"></div>
	</div>
	<div id="footer"><p class="footer">©zeR2one</p></div>
</body>
</html>

Насчёт меню - до сих пор не понимаю, что Вы с ним хотите сделать?

P.S. В шестом осле будет по прежнему (футер и хэдер не скроллятся), он не понимает min-width. Для него нужны танцы с бубном. Мне если честно лениво...

Но ведь есть же Гугл!..

Учиться чему-либо сейчас - это не то же самое, что 20 лет назад!

Я через пол-года, после того как узнал о HTML устроился верстальщиком

Сорри, здесь нет дизайна

Вы 40px уберите.

Меню позиционируйте абсолютно или выносите из хэдера (имеется в виду код).

Знаю.

Во-первых:

<div id="footer"><p class="footer">©zeR2one</p></div> - зачем? "Не преумножайте сущностей без нужды" (с) Бритва Оккама

Чем плох просто <p>? Или просто <div>, если собрались ещё что-то добавлять?

Во-вторых (футер Ваш):

У Вас потомок (#wrapper) перерос родителя (body), при ширине окна < 890px, 100% ширины у body и футера становятся меньше чем ширина #wrapper (поскольку width:100%; - это ширина ОКНА, а не страницы). Вариант решения: задать дополнительно min-width:900px; (890 + padding у Wrapper) для body или футера

В-третьих:

Вам так сильно нужен вертикальный скролл для любой высоты окна браузера? Если нет, то подумайте над смыслом вот этой конструкции:

margin:40px auto 0;min-height:100%;

100% высоты окна + 40px отступа = футер без скроллирования никогда не виден

если надо зарезервировать место под хедер, вставьте сверху такой же пустой блок (spacer), как и для футера...

пол-года

Так вкратце:

1) почему у файла расширение .php? Ваше счастье что там самих php-сущностей нет - браузеры их не понимают

2)

* {margin:0;padding:0;}html,body{height:100%;margin:0;padding:0;}

ничего лишнего не видите?

3)

font-weight:bold;font-size:18px;

лучше так:

font:bold 18px/normal "Ваш font-family";

, а ещё лучше так:

font:800 18px/normal "Ваш font-family";

4)

#top-menu{padding:5px;float:right;list-style:none;}
#top-menu li{margin-right:10px;float:left;color:#FFF;}

несколько косячная конструкция... почему не display:inline?