Помогите с макетом CSS - PullRequest
Новая
       2

Помогите с макетом CSS

0 голосов
/ 14 августа 2010

В настоящее время я пишу свой портфель дизайнеров и столкнулся с проблемой с макетом.

Вот ссылка на мой сайт, чтобы вы могли увидеть проблему: http://www.mozazdesign.co.cc/

В принципе, я хочу, чтобы контакт со мной и значки ниже отображались под заголовком и навигацией. Я поместил их в отдельные контейнеры, но по какой-то причине, где бы я ни разместил контакт, я делаю заголовок.

Вот код: 

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<title>MozazDesign Portfolio</title>
</head>

<body>

<div id="container">
    <div id="header">
        <div id="logo">

        </div><!--end logo-->

        <div id="nav">
            <ul id="main_nav">
                <li><a href="#">home</a></li>
                <li><a href="#">about me</a></li>
                <li><a href="#">gallery</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">contact</a></li>
            </ul><!--end main nav-->
        </div><!--end nav-->
    </div><!--end header-->

    <div id="main_content">
        <div id="contact">

        </div><!--end contact"-->
    </div><!--end main content-->
</div><!--end container-->

</body>

body {
padding: 0px;
margin: 0px;
background:url('images/Background.png');
font-family: century gothic;
}

#nav a {
text-decoration: none;
color: white;
}

#container {
margin: 0 auto;
width: 960px;
}

#header {
width: 960px;
}

#logo {
background:url('images/Logo.png') no-repeat;
height: 340px;
width: 524px;
float: left;
margin-left: 0px;  <!--check-->
}

#nav {
background:url('images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
float: right;
margin-top: 100px;
padding: 0px;}

#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}

#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}

#main_content {
width: 960px;
margin-top: 250px;
}

#contact {
background: url('images/contact.png');
height: 274px;
width: 295px;
}

Буду очень признателен за любую помощь! Заранее спасибо! :)

Ответы [ 4 ]

1 голос
/ 15 августа 2010

Одна из проблем, с которой вы столкнулись, заключалась в том, что ваши плавающие элементы не содержались внутри родительского элемента (#header).Вы можете использовать overflow:auto; на родительском элементе, чтобы содержать плавающие элементы внутри.Но для такого заголовка я обычно просто позиционирую все абсолютно, поскольку контент не динамический.

Я не уверен, что это именно то, что вы ищете, но этот CSS сделаетпохоже, что вы ищете, я думаю. 

body {
padding: 0px;
margin: 0px;
background:url('Images/background.png');
font-family: century gothic;
}

#nav a {
text-decoration: none;
color: white;
}

#container {
margin: 0 auto;
width: 960px;
}

#header {
height:200px;
position:relative;
}

#logo {
background:url('Images/Logo.png') no-repeat;
height: 340px;
width: 524px;
position:absolute;
}

#nav {
background:url('Images/Nav_Container.png') no-repeat;
width: 435px;
height: 33px;
position:absolute;
right:0;
top:100px;
padding: 0px;
}

#main_nav {
padding: 0px;
margin-left: 15px;
margin-top: 5px;
}

#main_nav li {
list-style: none;
display: inline;
font: 18px century gothic, sans-serif;
color: white;
margin-right: 18px;
}

#main_content {

}

#contact {
background:url('Images/Contact.png');
height: 274px;
width: 295px;
margin-left:125px;
}
0 голосов
/ 15 августа 2010

Это займет 2 шага:

1) Переместите <div id="contact">...</div><!--end contact"--> в <div id="logo">...</div><!--end logo-->.

2) Измените стиль #contact на: 

background: url("Images/Contact.png") repeat scroll 0 0 transparent;
height: 274px;
top: 200px;
width: 295px;
position: relative; 
float: right;
top: 200px;

Youнужно установить position: relative, иначе он не работает.

0 голосов
/ 14 августа 2010

Я думаю, 

#header {
  overflow:hidden
}

или что-либо еще, что очищает поплавки div # nav и div # logo, должно помочь.

0 голосов
/ 14 августа 2010

Похоже, вам нужно clear: both на вашем main_content div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...