tini.kRyptoNite

November 27, 2011

Ага, это сейчас дизайном называется

November 27, 2011

Как можно сделать надпись по центру по вертикали:
Верстала следующим образом:
<td><div class='navigation'><a href='#' class'navigation'>Розма</a></div></td>
Фон задан для ссылки,поэтому,если пытаюсь делать отступы,то двигается всё.
Что делать?Помогите,пожалуйста.

Зачем вам div, так вы только код захламляете. Ну конечнр это ваше дело. Класс можно прописать и к td. Поместите ссылку припустим в тег span и в css можете писать в вашем случае так .navigation span{ padding: ваше значение} и фон не будет расширяться Так же можете использовать свойство vertical-align.

November 27, 2011

Я походу уже разобрался как это сделано. Короче само меню имеет фиксированный размер, а на его же место выводиться слой с таким же фоновым цветом и резиновый, правильно я мыслью ?

November 27, 2011

Вот хоть убей не понимаю этих воплей насчёт семантики... w3c призывает отделять оформление от струкутры - ок, но где инструменты для номального офрмления? box-sizing? не смешно! единственную нормальную модель структуры (табличную) и ту хотят похоронить! "Таблицы для таблиц"...
Дайте новые тэги, какой-нибудь <structure>... Хотя все-равно некроссбраузерно выйдет!
Вот типичный пример! Новичок берётся за вёрстку. Полазил в интернете и вывел для себя две вещи:
1) Важен валидный код
2) Таблицы - зло. Нужна блочная вёрстка.
Выбирает себе примитивнейший макет (хэдер, футер -резина, две колонки фикс.). И оп-па! Куча геммороя. ИЕ и Опера тупят. Какие-то хитрые финты нужно вставлять...
А какие-то имбицилы орут про "семантику". Пусть попробуют свертать такой макетик валидно и кроссбраузерно - это возможно, конечно... Но это будет ТАКОЙ кусище кода со всякими хаками-хреняками, что о какой семантике может идти речь? Штаны через голову одевать и называть это "рациональностью"?
И потихоньку эти вопли доходят до заказчиков (толком ничерта не понимающих) - многие уже особо прописывают в требованиях блочную вёрстку (не догдываясь о противоречии с кроссбраузерностью и валидностью!). Такое ощущение, что эти визги специально подняли старые мастера, с целью выдавить из профессии неопытный молодняк, хотя сами начинали с таблиц!..
Если у меня когда-нибудь попросят подобный макет в блочном исполнении и валидно-семантичный - назло отвечу: "В спецификациях html и css подобное не предусмотрено!" И буду прав на все 100%!

Согласен с вами, хоть только начинаю но уже понимаю. Сделать валидный код легко, но сделать валидный код и кросбраузерно это другое дело. Вообще как я понимаю валидность нужна для кросбраузерности так что можно на неё положить если достичь кросбраузерности! На счет меню ну зайдите припустим на твитер и масштабируйте окно, горизонтальное меню стоит по центру, а сам хедер расширяется!

November 26, 2011

Тогда вставляйте
min-height:100%; /* и пусть опера тупит */
По-хорошему надо перевёрстывать, чтобы было кузяво. Вот зачем Вам height:100% для контента? Вам нужна подсвеченная колонка?
На месте? На каком месте? Относительно чего? Ну уберите float:right и задайте нужный Вам margin-left
Кстати, если бы не недавние обсуждения, я бы и не обратил внимание на глюки Оперы! Как часто Вы думаете, пользователь ресайзит окно?

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

Пробывал не получается.

Думаю редко. Ну хочется разобраться со ньюансами. Так как учусь только верстать, думаете не стоит обращать внимание на такие мелкий недостатки?

Вы говорите с min-height:100% Опера лагает. НЕ знаю у меня всё норма, а как оно должно лагать?

November 26, 2011

Ёлки-палки! :facepalmxd:


<!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. Для него нужны танцы с бубном. Мне если честно лениво...

Наполните окно контента что бы появилась вертикальная полоса прокрутки и футер станет по центру странице.

А на счет горизонтального меню я хочу что бы кнопки оставались на месте вне зависимости от масштаба окна!

November 26, 2011

Ну вот как то так.

Разве что-то изменилось?

November 26, 2011

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

Убрал сделал всё как требуется всеровно не получилось. По моему нельзя прибить подвал к низу без вертикальной полосы прокрутки. Если я не прав то подскажите пожалуйста какую либо инфу.

На счет горизонтального меню поставил абсолютное позиционирование и он все равно ходит как ему хочется

November 26, 2011

Хотелось бы услышать ПРЕДЛОЖЕНИЯ по сайдбару (Рубрики, Архив). Мне он не очень нравиться.

Хорошо, только немного цвету добавить всё какой-то слишком серое + иконка под рекламу по моему не катит.

November 25, 2011

Знаю.
Во-первых:
<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), как и для футера...

Ну если убрать

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

то футер не будет прибит к низу.

Еще такой вопрос как сделать так что бы при уменьшение масштаба резиновый хедер тянется, и за ним мое меню. Как сделать что бы меню всегда оставалось на месте?

November 25, 2011

пол-года
Так вкратце:
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?

Сейчас исправлю. Ответ на 100% спасибо(завтра + к репе дам сегодня нельзя уже). А php то по привычке просто php учил недавно

А на счет этого: (Когда мы браузер сворачиваем в окно и уменьшаем это окно до таких размеров пока не появиться горизонтальная полоса прокрутки то футер почему то не заполняет всю ширину и появляется с права пустое пространство, не знаете как это пофиксить? ) не знаете?

+Просьба к модератором поменять название темы "Только начинают верстать(WIP)" на "Только начинаю верстать(WIP) " случайно "т" вписалось, а изменить название темі не могу.

November 25, 2011

"Сайт" помещаем в конструкция span. <span class="name">Сайт</span>
В CSS обращаемся к классу .name{
vertical-align:middle;
}

Минус репутации зачем? Не работает что-то?

November 25, 2011

Ну верстку выкладывать на файлообменник не серьезно. Залейте уж лучше на народ

Там по прямой ссылке качать можно, не какой рекламы. Ну могу и на народ выложить.

Вот на народе _http://narod.ru/disk/32481846001/test.rar.html

Вот еще такой вопрос интересует. Сколько времени где-то нужно учиться верстать что бы достаточно хорошо уметь верстать?

November 25, 2011

"Сайт" помещаем в конструкция span. <span class="name">Сайт</span>

В CSS обращаемся к классу .name{

vertical-align:middle;

}

November 25, 2011

Всем доброго времени суток.

Я начинаю только верстать и хотел бы слышать от вас подсказки и конструктивную критику. В этой теме буду выкладывать свои наработки и ждать ваших отзывов!

Вот первое что я сверстал _http://zalil.ru/upload/32134352

Хотел бы узнать вообще можно так верстать и может какие есть ошибки которые можно исправить. html, css код валидный.

Задумывалось(плавающий хедер резиновый, основная колонка фиксированной ширины в ней 2 колонки, футер прибит к низу резиновый).

Хотел бы узнать такую вот вещь. Когда мы браузер сворачиваем в окно и уменьшаем это окно до таких размеров пока не появиться горизонтальная полоса прокрутки то футер почему то не заполняет всю ширину и появляется с права пустое пространство, не знаете как это пофиксить?

May 9, 2011

Когда я ещё представления не имел о том, что такое web-сервер, я ставил себе shttps, потом я взял учебник и поставил апач. Никогда не ставил денвер, но не считаю, что что-то потерял. Поэтому, автор, если хочешь действительно что-то понимать (и как следствие, уметь быстро находить решение в случае возникновения проблем), а не быть блондинкой с печатной машинкой, ставь и настраивай сам. Чтение учебника происходит не за один час, но оно того стоит.

Ну, а можете дать ссылку на мануал или написать о какой книге сейчас идет речь? Или лично объяснить что нужно для установки web-сервера?

Вот что нашел в интернете. Посмотрите пожалуйста кто разбирается. Можно ли использовать эту информацию для установки веб-сервера? И по функциональности она не уступает Denwer-у?

May 9, 2011

Стоит изучать Dreamweaver для написания сайтов? Или достаточно самого простого редактора?

May 8, 2011

и если хочешь что бы сайт был функционален и быстрей соображал
- это бред, не слушайте никого. Сервер нужно настраивать либо просто для опыта, либо для доступности твоего локального сайта в интернете.
Что может быстрее работать, чем операции на твоем же компьютере?
Ставь Денвер, там и пхп есть и мускул. И все поднимается одним кликом.

Благодарю.

May 8, 2011

Всем доброго времени суток. Лазил по инету и узнал что можно создавать локальный сервер с помощью Денвера. Потом наткнулся на один топик на форуме, уже даже не помню на каком :rolleyes: и прочитал что Денвер это по-простецки, и если хочешь что бы сайт был функционален и быстрей соображал лучше сервер настраивать и ставить самому. Можете пожалуйста подсказать можно ли ставить сайт на Денвер или лучше создать сервер самому? И если можно ссылку на инструкцию по созданию простого сервера и его настройке без Денвера.

Sign In

tini.kRyptoNite

Posts

Joined

Last visited

Content Type

Profiles

Forums

Calendar

Store

Posts posted by tini.kRyptoNite

Троллфейс

Не знаю как разместить надпись по центру

Только начинают верстать(WIP)

Только начинают верстать(WIP)

Только начинают верстать(WIP)

Только начинают верстать(WIP)

Дизайн будущего блога

Только начинают верстать(WIP)

Дизайн будущего блога

Только начинают верстать(WIP)

Только начинают верстать(WIP)

vertical-align в div

Только начинают верстать(WIP)

vertical-align в div

Только начинают верстать(WIP)

Создание локального сервера!?

Adobe Dreamwear

Создание локального сервера!?

Создание локального сервера!?

Forums

Important Information