Прошу совет в верстке шапки

dazoom · June 2, 2011

Добрый день. Прошу не пинайте сильно сразу.

Сверстал сайт на wordpress, но теперь возникла потребность в изменении дизайна.

сайт _hhttp://stereoinside.ru

Хочу сделать согласно картинке.

Header.php переделал, теперь он имеет код

<body>

<div id="top">
<div id="header">
<div class="description"><h1><?php bloginfo('name'); ?></h1>
<?php bloginfo('description'); ?></div>
<div class="clearfloat"/>
</div>
</div>
<div id="container"></div>
<?php wp_nav_menu( array( 'theme_location' => 'main-menu' ) ); ?>
</div>
</body>
</html>

А как именно в css прописать не соображу...

вот он

* {
border: 0;
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height:100%;
}

* html #container {
height:100%;
}

body {
background: #010101 url(images/dody-bg.jpg) repeat-y;
color: #4aa0cf;
font-size: .85em;
font-family: Arial, Helvetica, Verdana, Sans-Serif, UniWide;
}

#container {
position: relative;
background: #27363E url(images/bg-container.gif) repeat-y;
width: 960px;
margin: 0 auto;
min-height: 100%;
}

.empty {
height: 250px;
}

a, a:visited {
text-decoration: none;
}

a:active {
outline: none;
}

#header {
background: #15191c url(images/bg-header.jpg) no-repeat;
font face: UniWide;
width: 960px;
height: 292px;
margin: 0 auto 0;
padding: 0;
verflow: hidden;
}

#header h1 {
color: #4AA0CF;
font-size: 0em;
font-weight: normal;
letter-spacing: -2pt;
}

#header .description {
width: 380px;
color: #4F6B78;
margin: 0 0 0 150px;
padding: 55px 0 0 55;
font-size: 1.95em;
letter-spacing: -1pt; 
float: left;
}

.rss a {
color: #F5E9C2;
}

.rssicon {
width: 159px;
height: 78px;
padding: 10px 0;
}

#content {
width: 580px;
float: left;
padding: 0 0 20px 10px;
}

#content p {
padding: 0px 0px 10px;
margin: 0;
}

#content .empty {
height:100px; 
}

#content a {
color: #4AA0CF;
}

#content a:hover {
color: #4B5A69;
}

#content h2 {
background: url(images/h.gif) no-repeat 0 50%;
color: #4AA0CF;
font-size: 2em;
font-weight: normal;
line-height: 1em;
letter-spacing: -1pt;
padding: 10px 0 10px 30px;
}

#content ol {
margin: 0 0 15px 20px;
}

#content ul {
list-style-type: square;
margin: 0 0 15px 20px;
}

blockquote {
background: url(images/bquote.gif) no-repeat 95% 0;
color: #8AA1AB;
font-style: italic;
padding: 10px 50px 10px 15px;
}

.post-date {
color: #728790;
font-size: .8em;
margin: 10px 0 15px;
}

#l_sidebar {
color: #8AA1AB;
float: left;
width: 207px;
font-size: 95%;
padding: 0 0 20px;
}

#l_sidebar h3, #r_sidebar h3 {
background: url(images/bull.gif) no-repeat 0 80%;
color: #819CA8;
font-size: 1.5em;
letter-spacing: -1pt;
margin: 0 0 10px 15px;
padding: 10px 0 0 15px;
}

#l_sidebar ul, #r_sidebar ul {
list-style: none;
padding: 0 5px 10px 15px;
}

#l_sidebar ul li, #r_sidebar ul li {
padding: 5px 0 0;
}

#l_sidebar ul li a, #r_sidebar ul li a {
color: #BCB8D7;
}

#l_sidebar ul li a:hover, #r_sidebar ul li a:hover {
color: #4B5A69;
}

#r_sidebar {
color: #8AA1AB;
float: right;
width: 160px;
font-size: 95%;
padding: 0 0 20px;
}

#searchform {
overflow: hidden;
}

#s {
background: url(images/search.gif) no-repeat;
width: 131px;
height: 21px;
font-size: 1em;
padding: 2px 5px;
margin: 10px 0 0 15px;
}

.ads {
margin: 10px 0 0 3px;
}

.tags {
line-height: 16px;
font-weight: bold;
padding: 0 5px;
}

.tags a {
color: #8DB38D;
}

.tags a:hover {
color: #4B5A69;
}

#footer {
position: relative;
background: #15191c url(images/footer.jpg) no-repeat;
width: 960px;
height: 365px;
color: #43728B;
font-size: .9em;
margin: -245px auto 10px;
}

#footer p {
padding: 10px 85px 10px 480px;
}

.counters {
padding: 260px 10px 10px 220px;
}	

#footer a, #footer a:visited {
color: #4AA0CF;
text-decoration: none;
}

#footer a:hover {
color: #43728B;
text-decoration: underline;
}

#commentblock {
width: 520px;
background: #15191c url(images/bg-comment.jpg) no-repeat;
color: #74848D;
float: left;
padding: 20px 20px 10px 20px;
margin: 10px 0 0;
border-top: 5px solid #000;
border-bottom: 2px solid #7B848A;
}

#commentblock ol{
list-style-position: inside;
margin: 0;
padding: 0 0 10px;
}

.comments {
font-size: 1.5em;
font-weight: bold;
}

.approve {
font-style: italic;
}

.commenttext {
background: #000;
width: 500px;
margin: 3px 0 10px 0;
padding: 20px 10px 5px 10px;
clear: both;
}

#commentform input, #commentform textarea {
background: #27363E;
border: 1px solid #7B848A;
color: #819CA8;
font-size: 1.2em;
padding: 1px 5px;
}

#commentform textarea {
scrollbar-base-color: #15191c;
}

.clearfloat {
clear: both;
}

Edited June 2, 2011 by dazoom

Gaspode · June 2, 2011

Проще так =D

psywalker · June 2, 2011

Делай таблицей и не парься.

dazoom · June 2, 2011

Делай таблицей и не парься.

как это, не понимаю...

Проще так =D

спасибо. Это нужно в index.php или header.php прописывать???

Edited June 2, 2011 by dazoom

Gaspode · June 2, 2011

Это нужно прописывать в тех шаблонах (не весь код сразу!), которые используются на сайте. Вы с вордпрессом совсем не дружите?

И вообще это прописывать не надо. Посмотрите, как код организован, и подгоните свой под него.

Edited June 2, 2011 by Gaspode

dazoom · June 2, 2011

Это нужно прописывать в тех шаблонах (не весь код сразу!), которые используются на сайте. Вы с вордпрессом совсем не дружите?
И вообще это прописывать не надо. Посмотрите, как код организован, и подгоните свой под него.

Да это понятно.

Сделал согласно скаченному шаблону... Толку 0. У хедера и футера всеравно поля побокам... Я либо идиот,либо чето в этой жизни не понимаю....

Согласно моему коду, footer и header лежет в container. и пляшут от 960 px. Согласно генератору , они все вроде отдельно лежат. Но поля у footer и header все равно остаются фиксированными. :devil: :dash: :dash:

Помогите пожалуйста, я уже неделю бьюсь.... :(

Edited June 2, 2011 by dazoom

Gaspode · June 2, 2011

Я не понимаю, в чём проблема. Дайти картинку, как должно быть.

dazoom · June 3, 2011

Я не понимаю, в чём проблема. Дайти картинку, как должно быть.

В первом посте есть картинка.

dazoom · June 4, 2011

Лююююдиии !!!! Кто-нибудь подскажет?

Sign In

Прошу совет в верстке шапки

Question

dazoom

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Gaspode

Link to comment

Share on other sites

psywalker

Link to comment

Share on other sites

dazoom

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

dazoom

Link to comment

Share on other sites

Gaspode

Link to comment

Share on other sites

dazoom

Link to comment

Share on other sites

dazoom

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information