Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 18.03.2010, 20:42   #1
serg_sk
Новичок
Джуниор
 
Регистрация: 18.03.2010
Сообщений: 1
По умолчанию Позиционирование

Есть шаблон и ccs файл со стилями. Не получается сделать 2 вещи.
1. Переместить меню в левую часть страницы. Тоесть поставить перед .content.
2. Когда окно браузера сужается и в header'е длинная картинка, то меню и класс main-right налазиет на картинку. Хотелось бы этого избежать, например добавление полосы прокрутки. Но тоже не получается.

Буду признателен за помощь.

default.css
Код:
/*   Reset
------------------------------------------------------------------- */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym,
address, code, del, dfn, em, img, q, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption,
tbody, tfoot, thead, tr, th, td, textarea, input, 
select { margin: 0; padding: 0; border: 0; font-weight: inherit; font-style: inherit; font-size: 100%; font-family: inherit; vertical-align: baseline;}
table {border-collapse: collapse; border-spacing: 0;}
caption, th, td {text-align: left; font-weight: normal;}
table, td, th {vertical-align: middle;}
blockquote:before, blockquote:after, q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img {border: none;}
:focus {outline: 0;}

.header {
        background: url('img/stripes.gif') no-repeat;
        border-bottom: 1px solid #EEE;
        height: 160px;
        margin-bottom: 24px;
}
.header h1 {
        color: #222;
        font: normal 4em sans-serif;
        margin-top: 40px;
        text-align: center;
}
.header h2 {
        border-top: 1px solid #EEE;
        color: #666;
        text-align: right;
}
.header h2 span {
        background: #222;
        color: #EEE;
        padding: 0 6px;
}


.main-left {
        margin: 0 42% 20px 3%;
}
.content .descr {
        color: #06F;
        font-size: 1.2em;
        margin-bottom: 6px;
}
.content table {
        background: #222;
        border-collapse: collapse;
        font-size: 12px;
        color: #888;
}
.content tr,th {
        border-left-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 0px;
        border-right-width: 0px;
}
.content td {
        padding: 0px 10px 0px 10px;
        border:1px solid #333;
        border-left-width: 0px;
}
.content li {
        list-style: url('img/li.gif');
        margin-left: 18px;
}

.content h1 {
        font-size: 2.4em;
        margin-bottom: 4px;
}
.content a,.footer a {
        color: #F06;
        text-decoration: none;
}
.content a:hover,.footer a:hover {
        color: #444;
        border-bottom: 1px solid #F06;
}

/* nav & subnavigation */
.nav,.main-right {
        margin-bottom: 20px;
        position: absolute;
        top: 40px;
} 

/* navigation */
.nav {
        right: 23%;
        text-align: center;
        width: 17%;
}

.nav .logo {
        background: url('img/l2logo.png') no-repeat center top;
        border-bottom: 1px solid #EEE;
        border-top: 1px solid #EEE;
        height: 159px;
}

.nav h1 {
        color: #F60;
        margin: 12px 0;
}
.nav li {
        border-bottom: 1px solid #EEE;
}
.nav li a {
        color: #888;
        display: block;
        font: normal 1.4em serif;
        padding: 8px 0;
}
.nav li a:hover {
        background: #FAFAFA;
        color: #F06;
}

/* subnav */
.main-right {
        background: #222;
        right: 3%;
        width: 18%;
}
.subnav {
        padding: 12px 12px 0;
}
.tsub {
        color: #888;
}
.trsub {
        padding: 0px 0px 0px 8px;
        border: solid #333;
        border-left-width: 0px;
        border-top-width: 0px;
        border-bottom-width: 1px;
        border-right-width: 0px;
} 
.subnav h1 {
        color: #F06;
        font-size: 1.4em;
        height: 20px;
        margin-left: 8px;
}
.subnav ul {
        margin: 0 0 16px;
        padding: 0;
}
.subnav li { 
        list-style: none;
        margin: 0;
        border-bottom: 1px solid #333;
        font-size: 0.9em;
        padding: 0px 0px 0px 8px;
        color: #777;
}
.subnav li a { 
        color: #777;
        /* display: block; */
        font-size: 0.9em;
        padding: 3px 6px 3px 0px;
        text-decoration: none;
}
.subnav li a:hover {
        color: #DDD;
}
/* footer */
.footer {
        color: #666;
        border-top: 1px solid #EEE;
        font: normal 1em Verdana,sans-serif;
        margin: 0 42% 0 3%;
        padding: 8px 6px;
}
.footer .right, .footer .right a {color: #AAA;}
.footer .right a:hover {color: #333;}


/* Floats */
.left,.alignleft {float: left;}
.right,.alignright {float: right;}

.clear,.clearer {clear: both;}
.clearer {
        display: block;
        font-size: 0;
        line-height: 0;
        height: 0;
}
Вложения
Тип файла: html index.html (2.8 Кб, 8 просмотров)
serg_sk вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
позиционирование в файле, lseek, СИ Stases Помощь студентам 1 24.12.2009 23:51
Фиксированное позиционирование блоков. Андрей79 HTML и CSS 0 17.08.2009 11:50
Про позиционирование Risk07 HTML и CSS 6 18.05.2009 12:58
Позиционирование каретки Spice Win Api 1 25.03.2009 04:51
Позиционирование элемента vlad2423 HTML и CSS 7 09.03.2009 20:28