Проблема с резиновым дизайном

ZFJoury · January 3, 2012

Привет всем,

К сожалению большая проблема,не могу отладить файл css стилей(

А очень хочу сделать резиновый дизайн

Помогите

Вот css

сайт www.vs-aqua.ru

*

{

margin: 0px;

padding: 0px;

}

a:link {

color: #ffffff;

}

a:hover {

text-decoration: none;

color: #FF0000;

}

a:visited {

color: #ffffff;

}

body {

background: #A2E5F5 url(image/back_all.jpg) repeat-x;

font: 13px Arial, Helvetica, sans-serif;

color: #000000;

}

#content

{

width: 100%;

text-align: auto;

background: url(image/back.jpg) no-repeat;

}

#main

{

width: 908px;

padding: 10px;

}

#back

{

width: 1151px;

}

#header {

height: 386px;

text-align: auto;

}

#logo {

background: url(image/logos.gif) no-repeat;

background-position: 50% 17%;

background-attachment: scroll;

width: 1131px;

height: 134px;

text-align: center;

padding-left: 20px;

padding-top: 180px;

}

#logo a {

text-decoration: none;

text-transform: lowercase;

font-style: italic;

font-size: 28px;

color: #ffffff;

}

#logo H2

{

font-size: 12px;

text-align: left;

font-style: italic;

color: #000000;

}

#menu

{

background: url(image/menu.gif) no-repeat;

height: 75px;

}

#menu ul {

list-style: none;

}

#menu li {

display: inline;

}

#menu a {

float: left;

width: 129px;

height: 30px;

display: block;

text-align: center;

text-decoration: none;

color: #2273A4;

vertical-align: middle;

font-weight: bold;

font-size: 14px;

padding-top: 20px;

text-transform: uppercase;

}

#menu a:hover {

width: 129px;

height: 54px;

color: #ffffff;

text-decoration: underline;

}

#left

{

width: 190px;

}

#left H3

{

width: 165px;

height: 27px;

font-size: 14px;

font-weight: bold;

padding-left: 25px;

padding-top: 15px;

text-transform: uppercase;

color: #ffffff;

background: url(image/title.gif) repeat-x

}

#left ul {

list-style: none;

padding-bottom: 10px;

margin-bottom: 10px;

background: #ffffff url(image/title_back.gif) repeat-x bottom;

}

#left li ul {

border: 0px;

margin-left: 20px;

margin-bottom: 10px;

padding-top: 20px;

background: none;

}

#left li li {

padding: 5px 5px;

color: #000000;

border: 0px;

}

#left a {

color: #2F8BC4;

}

#left a:visited {

color: #2F8BC4;

}

#left td

{

color: #2F8BC4;

}

#left th

{

color: #2F8BC4;

}

#left caption

{

color: #2F8BC4;

}

#left p

{

padding: 10px;

color: #2F8BC4;

}

#right

{

float: right;

width: 680px;

padding-right: 10px;

}

#right H4

{

margin: 0;

padding: 0px;

font-size: 12px;

color: #2F8BC4;

}

#right a

{

color: #2F8BC4;

text-decoration: underline;

}

#right p {

margin: 0;

padding: 0;

padding-bottom: 10px;

}

#right h2 {

margin: 0;

padding: 0;

padding-top: 10px;

color: #2F8BC4;

}

#footer {

clear: both;

height: 80px;

width:100%;

background: url(image/footer.gif) repeat-x bottom;

border-top: 5px solid #2F8BC4;

padding-top: 30px;

}

#footer p {

margin: 0;

width: 778px;

font-size: 12px;

text-align: center;

color: #ffffff;

}

#footer a {

color: #ffffff;

}

br3t · January 8, 2012

Сделайте живой пример

Без html тут сложно что-то сделать

ZFJoury · January 8, 2012

Сделайте живой пример
Без html тут сложно что-то сделать

а он есть www.vs-aqua.ru код полностью открыт ВОТ ЖИВОЙ ПРИМЕР

br3t · January 9, 2012

Я думал, что у вас на сайте нерезиновый css

Пару замечаний по вёрстке:

1. В исходнике ФФ показывает мне

<body class="img" src="image/show/1.jpg" name="SlideShow" <img="" onload="runSlideShow()">

что явно как-то не так

2.

<div style="position:absolute;top:0">
     <div class="width=100% height=100%">
     </div>
</div>

Это тоже непонятно зачем

3. Заголовки блоков в сайдбаре на фиксированной подложке - тут трудно сделать резину

4. Фон с небом я бы отцентровал, как и всю область контента, но первый совершенно не стыкуется слева с основным бекграундом

...продолжение следует

Arantir · January 9, 2012

ZFJoury,

Что именно вы бы хотели сделать резиновым? Резиновый дизайн - понятие относительное.

Из того, что можно было бы растянуть, наверное, только основной блок текста.

поставьте для #main свойство width, например, 60% или 70%...

Отцентрировать тоже не получится с текущим синеньким вертикальным меню, так как оно визуально прибито к левому краю.

Может немного не в тему: Зачем горизонтальное меню вверху и вертикальное сбоку? Хоть пункты разные, но 2 меню - как-то не кошерно...

Edited January 9, 2012 by Arantir

ZFJoury · January 10, 2012

ZFJoury,
Что именно вы бы хотели сделать резиновым? Резиновый дизайн - понятие относительное.
Из того, что можно было бы растянуть, наверное, только основной блок текста.
поставьте для #main свойство width, например, 60% или 70%...
Отцентрировать тоже не получится с текущим синеньким вертикальным меню, так как оно визуально прибито к левому краю.
Может немного не в тему: Зачем горизонтальное меню вверху и вертикальное сбоку? Хоть пункты разные, но 2 меню - как-то не кошерно...

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

Sign In

Проблема с резиновым дизайном

Recommended Posts

ZFJoury

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

ZFJoury

Link to comment

Share on other sites

br3t

Link to comment

Share on other sites

Arantir

Link to comment

Share on other sites

ZFJoury

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information