Помогите с кодом для резиновой верстки

[svaroha]

Ребята...

Подскажите, а еще лучше, помогите с кодом на сайте khodyka.com

Хочу сделать другу сайт, только опыта почти нету....И вышла загвоздка с шапкой страницы....она банально разъезжается при увеличении масштаба..

мне необходимо следующее:

3 области в шапке

1 div под левый рисунок (200Х200)

2 div посередине, разделенный на две области - верхний ДИВ под яваскрипт, отображающий карусель фотографий, нижний ДИВ - отображение навигации для зарегистрированных пользователей;

3 div справа, который отображает обрезанный тизер статьи.

Под седьмой эксплоер худо бедно подправил, под 6-ой - тихий ужас.

И самое главное - как сделать, чтобы нормально тянулся сайт (шапка), и не спрыгивал правый див вниз при увеличении страницы больше 100%.

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

[psywalker]

Сделай шапку следующим образом:

Левая и правая колонка разные флоаты с нужной шириной, а средняя оверфлоу: хайден.

[svaroha]

Имеешь ввиду, слева - float:left, clean:right, а справа - float:right, clean:left?? размеры в пикселях задавать?? или же в процентах для левой, центра и правой колонок??

сейчас буду пробовать на локальной машинке

спасиба

[psywalker]

Имеешь ввиду, слева - float:left, clean:right, а справа - float:right, clean:left??

Да, только:

clean:right, вот это убирай. Размеры в пикселях.

[sigma77]

svaroha,

<div style="float: left"></div> /* Левая колонка */
<div style="float: right"></div> /* Правая колонка */
<div style="overflow: hidden"></div> /* Центральная колонка */

Ширина левой и правой колонки - в любых единицах. Средней задавать ширину не надо. clear использовать тоже не надо.

Edited June 8, 2010 by sigma77

[psywalker]

В его случае размеры у боковых колонок задавать в пк.

[svaroha]

Сделал вот так

#wrapper #container #header #header-left{ 
  left:0;
  top:0;  
  position: absolute;
  float: left;
  width:200px;  
  clear: right;
}
#wrapper #container #header #header-center{
  left:0;
  top:0;
  width: 800px; 
  margin-left: 200px;
  overflow: hidden;
   /*height: 100%;*/
}

#wrapper #container #header #header-right{
	left:0;
	top:0;
	float: right;		
	width:160px;	  
	clear: right;
	height: 100%;
}

Теперь правая колонка уезжает ниже шапки, то есть не вырывнивается по верхнему краю

щас еще и клиар уберу

[psywalker]

1) Вот это нахрена?

left:0;
  top:0;  
  position: absolute;

2) про это говорили не ставить вроде?

 clear: right;

3) и вот это тоже не нужно

margin-left: 200px;

[sigma77]

4) И порядок колонок: левая - правая - центр должен быть.

[svaroha]

Нет, не помогло (это первый раз)

Во второй раз -

Код -

#wrapper #container #header #header-left{ 
   float: left;
  width:200px;  

}
#wrapper #container #header #header-right{

	float: right;		
	width:160px; 	
}
#wrapper #container #header #header-center{

  width: 800px; 
  margin-left: 200px;
  overflow: hidden;

}

[psywalker]

Средней колонке вот это НЕ СТАВИТЬ:

  width: 800px;
  margin-left: 200px;

[svaroha]

По position: absolute; - необходимо, чтобы следующий блок, который является левой колонкой - <div id="sidebar-left"> не уплывал на 200 пикселей - ширину картинки...

я шаблон не с нуля делал, стандартный Garland для друпала

#wrapper #container #header #header-left{ 
   float: left;
  width:200px;  

}
#wrapper #container #header #header-right{

	float: right;		
	width:160px; 	
}
#wrapper #container #header #header-center{
  overflow: hidden;  
}

Средняя картинка растянулась максимум вправо, а правый блок как был справа посредине, так и остался

Что еще можно попробовать??

[svaroha]

Я был неправ...я поменял в ЦСС файле вывод право, влево, центр, а надо было еще и в HTML-ле поменять...правый блок прыгнул вверх

Немножко поигрался с цсс, для дальнейшего корректного отображения...

добавил для правой колонки

height:90%;
overflow:hidden;

для блока, идущим сразу за правой колонкой (левый сайдбар) пришлось добавить position:absolute (а был position:relative)...

в мозиле, как всегда, нормально..

в осле - левый сайдбар прыгает за основной контент (то есть меняются местами левый сайдбар и центральный контент)...у меня всего две колонки в основной части страницы...

до изменения шапки левый сайдбар привязывался к шапке (к картинке, у которой position:absolute).

можно как то поправить для IE отображение??

[psywalker]

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

[sigma77]

svaroha,

Задай фотографии в лого display: block, иначе за счет нижнего отступа у картинки она получается по высоте больше, чем 220px, заданные в шапке.

Левую колонку также можешь сделать на флоатах (float: left), а основной контент также overflow: hidden.

[svaroha]

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

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

еще раз спасибо

А можно еще один вопрос??

Ты каким редактором для css и html пользуешся?? чтобы было с автоподстановкой и аавтодописыванием атрибутов и селекторов??

Я вот видел, что в Eclepse так все можно настроить, только какие дополнительные плагины надо использовать, не пойму...

[svaroha]

Вот так пока на основном сайте...Ходыкин сайт ....По крайней мере, ничто никуда не едет...

осталось добавить отступы для некоторых блоков...

[psywalker]

1) Да, молодец, вроде доделал.

2) Я пользуюсь Дримвивером, настроил его под себя.

[svaroha]

sigma77

Сделал блок слева, спасибо...

[sigma77]

Сделал блок слева, спасибо...

Молодец!

Только один момент. Свойство display: block надо присвоить не самому блоку (#header-left), а этой картинке <img id="logo" alt="" src="/sites/default/files/garland_logo.JPG">. Иначе посмотри внимательно. У тебя левый блок немного вылазит вниз.

[svaroha]

sigma77

Поправил блок, сделал

#wrapper #container #header #header-left #logo {display:block;}

верстка

<a><img id="logo"></img></a>

[psywalker]

Поправил блок, сделал

#wrapper #container #header #header-left #logo {display:block;}

верстка

<a><img id="logo"></img></a>

Это неправильно.

<img id="logo"></img>

Должно быть так

<img id="logo" />

[svaroha]

да, я уже увидел, что я неправильно написал....на сайте -

<div id="logo-floater">
	  <a title="" href="/khodyka/"><img id="logo" alt="" src="/khodyka/sites/default/files/garland_logo.JPG"/></a>	</div>

[psywalker]

да, я уже увидел, что я неправильно написал....на сайте -

<div id="logo-floater">
	  <a title="" href="/khodyka/"><img id="logo" alt="" src="/khodyka/sites/default/files/garland_logo.JPG"/></a>	</div>

Тут вроде всё верно.