Добрый вечер! =)
Начала потихоньку изучать верстку слоями, и уже на первых парах столкнулась с проблемами и кучей вопросов, внятные ответы на которые в гугле найти не удалось.
Первая проблема:
На скриншоте я обвела черные круги, которые вообще не ясно откуда появились, поскольку в коде о них ничего не сказано…как их можно убрать?
Второе, это отмеченной цифрой два, как мне можно сделать так, чтобы вместо белой полосы был цвет?
И еще вопрос, можно ли сделать вместо монотонного белого фона такой, как на картинке:
коды станицы:
Начала потихоньку изучать верстку слоями, и уже на первых парах столкнулась с проблемами и кучей вопросов, внятные ответы на которые в гугле найти не удалось.
Первая проблема:
На скриншоте я обвела черные круги, которые вообще не ясно откуда появились, поскольку в коде о них ничего не сказано…как их можно убрать?
Второе, это отмеченной цифрой два, как мне можно сделать так, чтобы вместо белой полосы был цвет?
И еще вопрос, можно ли сделать вместо монотонного белого фона такой, как на картинке:
коды станицы:
| Код |
|---|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
body {
margin-top: 0px;
background-image: url(Header_bg.png);
background-repeat: repeat-x;
}
.style1 {color: #666666}
-->
</style></head>
<body>
<div class="body">
<!--header-->
<div id="header">
<a class="logo_link" href="blank_page"></a>
<!--Top menu-->
<div id="topMenu">
<ul>
<li class="first">
<a href="blank_page">Content</a></li>
<li><a href="blank_page" class="manual">Manual</a></li>
<li class="second"><a href="blank_page" class="example">Text examples</a></li>
<li><a href="blank_page" class="faq">FAQ</a></li>
<li><a href="blank_page" class="friends">Our friends</a></li>
</ul>
</div>
<!-- topMenu -->
<!-- Header -->
</div>
<!--Footer -->
<div id="footer" class="TR">
<div id="footerContent">
<div class="left">
<div class="Copyright">
Copyright © 2007-2013 <br>
Copyright © 2007-2013 <br>
Copyright © 2007-2013 <br>
Copyright © 2007-2013 <br>
Copyright © 2007-2013 <br>
Copyright © 2007-2013 <br>
</div>
</div>
<div class="Right">
<div class="Follow">
"<span class="style1">Follow us!</span>"</div>
</div>
</div>
</div>
<!-- / Footer -->
</div>
</body>
</html>
|
| Код |
|---|
.body {
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
min-width: 1000px;
width: 100%;
max-width: 1440px;
}
#header {
height:165px;
background:url(Logo.png) no-repeat 0 37px;
position: relative;
}
#header a.logo_link {
display:block;
height:165px;
left:0px;
position:relative;
top:0px;
width:301px;
text-decoration:none;
}
#topMenu {
height: 36px;
margin-top:-118px;
margin-right:auto;
margin-left:auto;
margin-bottom:0px;
width:1000px;
position:relative;
}
#topMenu ul {
height: 36px;
margin-left:310px;
text-decoration:none;
}
#topMenu li.first {
background:none;
padding-left:0px;
margin-left:2px;
width: 100px;
}
#topMenu li {
float:left;
margin-top:1px;
height:36px;
width: 100px;
text-align:center;
}
#footer {
background-image: url(bottom_bg.png);
background-color: #333333;
width:100% !important;
height:120px;
background-position: bottom;
vertical-align: bottom;
position: absolute;
bottom: 0;
left: 0;
background-repeat: repeat-x;
}
.TR {
display:block;
clear:both;
overflow: visible;}
#footerContent {
max-width:1920px;
margin-top:0px;
margin-bottom:0px;
margin-left:auto;
margin-right:auto;
padding-bottom:1em;
}
#footer .Left {
width: 300px;
float: left;
overflow: hidden;}
#footer .Right {
margin-left: -228px;
padding-left: 8px;
width: 200px;
float: right;
overflow: hidden;}
.follow {
position: relative;
top: 50px;
height: 120px;
padding-left: 37px;
padding-top:15px;}
.Copyright {
position: relative;
top: 56px;
height: 100px;
width: 300px;
color: #999999;
}
|
Изменено:
FFalChrom - 26 Марта 2013 04:20
