Верстка сайта, возникли две проблемы

[Сальто]

Доброго времени суток, уважаемые форумчане.

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

 

Трехколоночный резиновый макет.

 

Правое меню. Я хотела бы, чтобы его высота не была фиксированной, а просто доходила до средней части (серая полоса посередине), но не знаю,как это реализовать.  Поэтому пока задала фиксированную высоту, но при маштабировании  иногда виден просвет.

 

Левая колонка. Я хочу поместить туда фотографию, но таким образом, чтоб и белое поле, и серая полоса являлись фоном. То есть чтобы фотография перекрывала и среднюю часть тоже. Пока никаких идей, как это воплощается. Фотография просто отодвинула среднюю часть вниз, образовав просвет.

 

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

 

Велика вероятность, что напортачено там прилично, поэтому если получится заметить любые другие ошибки, буду очень благодарна за критику. Да, та ляпка, что заменяет логотип, является его экизом, не обращайте внимания. И фотография будет другая, эта дана для примера.

 

http://jsfiddle.net/CEC5z/6/ код

http://yadi.sk/d/xOeu8FnMH3him скриншот, как это выглядит сейчас

http://yadi.sk/d/3YnPp2_uH3hh8  то, чего я пытаюсь добиться.

Заранее спасибо!

 

 

[EaGames]

Правое меню. Я хотела бы, чтобы его высота не была фиксированной, а просто доходила до средней части (серая полоса посередине), но не знаю,как это реализовать.  Поэтому пока задала фиксированную высоту, но при маштабировании  иногда виден просвет.  

 

 

тут скорее всего надо копать в сторону колонок одинаковой высоты.

Левая колонка. Я хочу поместить туда фотографию, но таким образом, чтоб и белое поле, и серая полоса являлись фоном. То есть чтобы фотография перекрывала и среднюю часть тоже. Пока никаких идей, как это воплощается. Фотография просто отодвинула среднюю часть вниз, образовав просвет.

поиграй с position:absolute для картинки

[Sensei]

http://jsfiddle.net/DtCk6/2/ если я правильно понял, что нужно было.

[Сальто]

 

тут скорее всего надо копать в сторону колонок одинаковой высоты.

поиграй с position:absolute для картинки

EaGames, спасибо большое за ответ! Похоже, что position: absolute и есть ключ к моей задаче.

А по поводу колонок одинаковой высоты, Вы говорите о фиксированной высоте, правильно я понимаю? Я попробую конечно, но тогда при масштабировании средняя часть бывает, что отваливается все равно. Но я попытаюсь, спасибо!

 

http://jsfiddle.net/DtCk6/2/ если я правильно понял, что нужно было.

 

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

 

Тем не менее, мне очень понравился Ваш макет, спасибо за время и знания, которыми Вы поделились.

[Сальто]

http://jsfiddle.net/DtCk6/2/ если я правильно понял, что нужно было.

 

UPD:

Sensei, еще раз спасибо! Я взяла Вашу идею с псевдоэлементом и вставила себе в код, попутно подчистив огрехи, сверяясь с Вашим кодом. Беру свои слова обратно, это именно то, что мне было необходимо, еще раз огромное спасибо! Просто у Вас ширина фиксированная, а я оставила в процентах)

 

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

[Sensei]

Да, их не поддерживает ИЕ7, но его доля настолько мала, что пора о нем забыть.

Вместо процентов для основного контейнера можно использовать «max-width» и «min-width»

Edited February 1, 2014 by Sensei

[Сальто]

Sensei, спасибо, я так и сделала.

 

Еще раз благодарю за Вашу помощь!