Есть шаблон и 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;
}