Есть вопросы по сайту. Помогите!

[SYS1984]

Вот мой сайт:

http://www.kolpino-remont.ru/

А вот вопросы:

1. Как сделать чтобы шапка сайта растягивалась по размеру окна? И чтобы она на сайте была 100% от своего размера.

2. Как в списке рубрик строку "Каталог организаций" сделать чтобы она не выделялась при наведение курсора?

3. Как отступ текста до рамки в последней строчке списка увеличить?

4. Как счетчик сместить в право?

Если еще найдете глюки напишите. Буду очень благодарен.

[Vlad]

1. Вариантов несколько. Оптимальным, мне кажется, будет следующий. Картинку разбить на три части - лого, следы краски, валик. Далее краску сделать в виде фона, слева от него положить лого, справа валик. Тогда при любом разрешении монитора картинки масштабироваться не будут, но станут занимать всю ширину.

2. В FF и IE не выделяется.

3. У вас есть класс brd, для него поставить padding-bottom: 20px;

4. Какой счетчик!?

[SYS1984]

1. Вариантов несколько. Оптимальным, мне кажется, будет следующий. Картинку разбить на три части - лого, следы краски, валик. Далее краску сделать в виде фона, слева от него положить лого, справа валик. Тогда при любом разрешении монитора картинки масштабироваться не будут, но станут занимать всю ширину.

2. В FF и IE не выделяется.

3. У вас есть класс brd, для него поставить padding-bottom: 20px;

4. Какой счетчик!?

Спасибо! за помощь!

1. Не совсем понял как это сделать. Место для шапки разбить на 3 ячейки и в каждую поставить часть картинки?

2. Спасибо сделел!

3. Спасибо сделал!

4. Спасибо сделал!

Edited January 28, 2011 by SYS1984

[Vlad]

Неее, ячейки здесь ваще ни при чем. Задача разбивается на 3, может быть, при желании, на 4 части.

1. Фон. Готовите отдельно фоновую картинку и вставляете ее в <div>. Главное, чтобы фон был повторяемым по горизонтали. Это значит, что если правый край картинки приставить к его левому краю никаких видимых и заметных стыков быть не должно.

2. Логотип, включает изображение слева до надписи "окна", либо и надпись целиком. Здесь тоже возможны варианты, пусть будет простой случай, когда логотип и надпись одинакова. Вставляете логотип в тот же <div> с фоном, ставите ему float: left.

3. Валик. Вырезается отдельно от фона, вставляется все в тот же <div>, ставится float: rigth.

4. Любуемся работой при разных разрешениях, исправляем мелкие огрехи.

Профит.

[SYS1984]

Неее, ячейки здесь ваще ни при чем. Задача разбивается на 3, может быть, при желании, на 4 части.

1. Фон. Готовите отдельно фоновую картинку и вставляете ее в <div>. Главное, чтобы фон был повторяемым по горизонтали. Это значит, что если правый край картинки приставить к его левому краю никаких видимых и заметных стыков быть не должно.

2. Логотип, включает изображение слева до надписи "окна", либо и надпись целиком. Здесь тоже возможны варианты, пусть будет простой случай, когда логотип и надпись одинакова. Вставляете логотип в тот же <div> с фоном, ставите ему float: left.

3. Валик. Вырезается отдельно от фона, вставляется все в тот же <div>, ставится float: rigth.

4. Любуемся работой при разных разрешениях, исправляем мелкие огрехи.

Профит.

Спасибо!

Посижу подумаю над этим.

А будут замечания по коду? Нормально написано или что то можно доработать. Меня очень волнует качественное отображение в разных броузерах, ну и все остальное конечно.

Edited January 30, 2011 by SYS1984

[SYS1984]

Помогите со следующими вопросом:

В Opere, Ie, Chrome ширина зазора между левым спискои и центральной частью и разделом рекламы google и центральной частью разные. А в Firefox одинаковые. Как сделать чтобы везде были одинаковые?

[acid]

А будут замечания по коду? Нормально написано или что то можно доработать. Меня очень волнует качественное отображение в разных броузерах, ну и все остальное конечно.

Я заметил что все страницы вашего сайта имеют разный карказ. Это не очень хорошо. Думаю легче сделать все страницы с одинаковым каркасом, например:

<table>
	<tr>
		<td>шапка</td>
	</tr>

	<tr>
		<td>
			<table>
				<tr>
					<td>правая колонка с категориями</td>
					<td>центральная колонка с содержанием страницы</td>
					<td>левая колонка с рекламой</td>
				</tr>
			</table>
		</td>
	</tr>

	<tr>
		<td>футер</td>
	</tr>

</table>

В таком случае:

- каркас очень прост (не имеет rowspan и colspan)

- очень легко настраиваются 3 основные колонки сайта (правая, центральная, левая)

- вы тутже найдете ответ на свой последний вопрос а именно: как сделать все отступы одинаковыми

Edited February 3, 2011 by acid

[Bandyy]

в топку табличную верстку.

[SYS1984]

в топку табличную верстку.

Это еще почему?

Нет я конечно понимаю что это уже вчерашний день, но пока решил так сделать потом на div переделаю.

Может лучше подскажите как проблему устранить?

[psywalker]

Да, такую вёрстку лучше делать на слоях.

По сабжу. Зазоры одинаковые.

[SYS1984]

Да, такую вёрстку лучше делать на слоях.

По htmlbook . Зазоры одинаковые.

Psywalker!

Спасибо за ответ!

Но я новичок в этом деле, есть пару наверно "глупых вопросов"

"Делать на слоях" это с помощью тэгов div?

И что вы имели в виду "По сабжу зазоры одинаковые"?

Если можете выскажите свое мнение по сайту?

Очень жду Вашего ответа!

[psywalker]

"Делать на слоях" это с помощью тэгов div?

Да

И что вы имели в виду "По сабжу зазоры одинаковые"?

Просто имел ввиду, что зазоры одинаковые, а ты говоришь, что разные.

Если можете выскажите свое мнение по сайту?

Нечего говорить. Таблицы и есть таблица. Я бы переверстал на дивах.

[SYS1984]

Да

Просто имел ввиду, что зазоры одинаковые, а ты говоришь, что разные.

Нечего говорить. Таблицы и есть таблица. Я бы переверстал на дивах.

Спасибо!

Да планирую, это сделать потом.

[Vlad]

Зачем откладывать на потом, ничего не мешает для шапки использовать div уже сейчас. К тому же это будет даже проще, чем на таблицах.

[htmlonline]

А вот тебе в помощь совет как сверстать три колонки дивами:

css:

div.column {text-align:right;
					   border:none; width:ширина;
					   position:absolute;}
div.container {border:none; position:relative;
						  width:общая ширина колонок с						   отступами друг от друга;}

Это в боди:

<left>
<div class="column">...</div>
</left>
<center>
<div class="column">...</div>
</center>
<right>
<div class="column">...</div>
<right>

[Vlad]

htmlonline, перестаньте уже советовать другим то, в чем вы еще сами не понимаете.

[htmlonline]

А что здесь не правильно?

[deadrash]

А что здесь не правильно?

Всей темы не читал, но если я правильно понял что нужно поставить три колонки то:

position:relative; - ещё куда ни шло.

position:absolute; - бяка.

<center> - вообще не делают так http://htmlbook.ru/html/center

Три колонки делаются через float

[htmlonline]

Чем тебе абсолют не угодил?

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

[deadrash]

Чем тебе абсолют не угодил?

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

Что бы они встали на одну строку они на ней должны уместиться, для этого их общая ширина должна быть равна или меньше ширины строки на которой они умещаются, т.е. их ширина меньше ширины или ровна ширине контейнера. От этого и пляшут.

Edited February 5, 2011 by deadrash

[htmlonline]

Я так пробовал..

Нифига..

вот код:

<div class="container" style="width:300px;">
<div style="float:left; width:100px;">..</div>
<div style="width:100px;">..</div>
<div style="float:right; width:100px;">..</div>
</div>

[deadrash]

Я так пробовал..

Нифига..

вот код:

<div class="container" style="width:300px;">
<div style="float:left; width:100px;">..</div>
<div style="width:100px;">..</div>
<div style="float:right; width:100px;">..</div>
</div>

Вот так получится -

<div class="container" style="width:300px;">
<div style="float:left; width:100px;">..</div>
<div style="float:left;width:100px;">..</div>
<div style="float:right; width:100px;">..</div>
</div>

И так тоже -

<div class="container" style="width:300px;">
<div style="float:left; width:100px;">..</div>
<div style="float:left;width:100px;">..</div>
<div style="float:left; width:100px;">..</div>
</div>

[htmlonline]

А с точки зрения нормальной человеческой логики это странно..

А блоки на одной строке будут да?

[deadrash]

А с точки зрения нормальной человеческой логики это странно..

А блоки на одной строке будут да?

Тут можешь представить что при задании блокам свойства float они переносятся на другую плоскость, другой поток документа.

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

Ну про строку это я немного фигурально выразился, это ведь всё таки блочные элементы.

Кстати сказать, position:absolute; тоже помещает элементы на новый слой, или уровень, как там его назвать не знаю. Но в отличие от float - absolute полностью вырывает элементы из общего потока. И элементы совсем перестают взаимодействовать с остальным потоком, за одним исключением, он продолжает воспринимать родительский блок у которого есть position:absolute; или position:relative;

Edited February 5, 2011 by deadrash

[htmlonline]

Я знал, что float вырывает элемент из потока, но пробовал только как я показал, а как ты показал, то все заработало..

А почему мой способ не получается?

[deadrash]

Я знал, что float вырывает элемент из потока, но пробовал только как я показал, а как ты показал, то все заработало..

А почему мой способ не получается?

Вот это и есть та самая особая логика взаимодействия одного слоя с другим. У строчных и блочных элементов эта логика разная. Если бы второй элемент у тебя был не блочный а строчный, он бы встал справа от первого блока.

Edited February 5, 2011 by deadrash