30.08.2012 23:02:28 Помощь к домашнему заданию по верстке из курса Сообщение #1
crips
Освоившийся
Дата регистрации:
18.12.2011 13:05:02
Сообщений: 28
Здравствуйте,Михаил,тут решил взяться за верстку и решил делать макет из Вашего курса по верстке(домашний). Хотел бы проконсультироваться у Вас по поводу шапки,а то не пойму движусь я в правильном направлении или же нет,мой пример шапки можно увидеть тут http://demo.love-plus16.ru/,
Оригинал Ваш: http://demo.love-plus16.ru/images/hw.jpg,
HTML:
CSS:
Оригинал Ваш: http://demo.love-plus16.ru/images/hw.jpg,
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
<META HTTP-EQUIV="Content-Type" Content="text/html; Charset=utf-8"/>
<title>моя верстка</title>
</head>
<body>
<div id='logo'>
<div class='border'>
<table class='logo' border='0' cellpadding='0' cellspacing='0'>
<tr>
<td>
<table border='0'>
<tr>
<td>
<div class='left'>
<p class='logotip'>Box & Cube</p>
<p class='logotip2'>create & innovate solutions</p>
</div>
<div class='right'>
<table cellpadding='0' cellspacing='0'>
<tr>
<td>
<a href='#'>Home</a>
</td>
<td>
<a href='#'>About</a>
</td>
<td>
<a href='#'>contact</a>
</td>
<td class='last'>
<a href='#'>Blog</a>
</td>
</tr>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
</table>
</td>
<td class='search2' >
<div class='search'>
<table cellpadding='0' cellspacing='0' border='0' class='form'>
<tr>
<td>
<div class='cont'>
<table cellpadding='0' cellspacing='0'>
<tr>
<td class='last'>
<img src='/images/rss.png' alt='rss'>
</td>
<td class='first'>
Please subscribe to:
</td>
<td>
<a href='#'>Posts</a>
</td>
<td>
<a href='#'>Comments</a>
</td>
<td class='last'>
<a href='#'>Email</a>
</td>
</tr>
</td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<td class='input'>
<input type='text'>
</td>
</tr>
<tr>
<td class="bottom"></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
CSS:
#logo div.border {
border-top: 10px solid #1B1B1B;
border-bottom: 10px solid #131313;
}
#logo{
border-top: 1px solid #474747;
border-bottom: 1px solid #474747;
}
#logo table.logo {
background: #181818 url(/images/fonlogo.jpg) repeat-x;
height: 130px;
width: 100%;
}
#logo p.logotip{
margin: 0;
color: white;
font-size: 303%;
}
#logo p.logotip2{
margin: 0;
color: white;
font-size: 100%;
font-family: 'Myriad Pro';
letter-spacing:3px;
color: #424242;
}
#logo table.logo td {
vertical-align: middle;
padding: 0;
margin: 0;
}
#logo table.logo div.top {
background: url(../images/top.png) top right no-repeat;
margin: 0;
}
#logo table div.left {
width: auto;
padding-right: 0;
padding-left: 50px;
padding-top: 42px;
padding-bottom: 36px;
float: left;
}
.menu {
text-align: left;
padding: 0;
margin: 0;
}
#logo table div.right{
width: auto;
float: left;
padding-left: 113px;
}
#logo div.right td {
border-right: 1px solid #363636;
padding: 0 18px;
}
#logo div.right td.last{
border: none;
padding-right: 0;
}
#logo div.right a {
font-family: Verdana,Arial;
color: #616161;
font-size: 10pt;
}
#logo table.form input{
width: 335px;
height:36px;
background: #131313 url(/images/lupa.jpg) no-repeat right;
border-bottom: 1px solid #2a2a2a;
border-top: none;
border-left: none;
border-right: none;
padding: 0;
margin: 0;
-moz-border-radius:.3em;
-webkit-border-radius:.3em;
border-radius:.3em;
}
#logo table div.search td {
background: #1B1B1B;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
}
#logo table.logo td.search2{
vertical-align: top;
}
#logo table.logo td.bottom {
background : url('images/bottom.png') no-repeat;
height: 14px;
padding: 0;
margin: 0;
}
#logo table.logo div.cont td {
font-size: 10pt;
font-family: veranda,arial;
color: #6E6E6E;
border-right: 1px solid #6E6E6E;
padding: 0 8px;
}
#logo table.logo div.cont td.last {
border: none;
padding-right: 0;
}
#logo table.logo div.cont td.first {
padding-left: 0;
}
#logo table.logo div.cont td a {
font-size: 10pt;
font-family: veranda,arial;
color: #A9A9A9;
}
#logo table.logo div.cont td img {
padding-right: 5px;
padding-left: 0;
}
