Вернуться   SEO форум - оптимизация и продвижение сайтов > Web разработки > Программирование

Важная информация
Программирование - PHP, MySQL, JavaScript, CSS, HTML верстка и т.д.

Ответ
 
Опции темы Оценить тему Опции просмотра
Старый 19.04.2015, 15:38   #1
 
Аватар для Nazaru
 
Сообщений: 34
FR (активность): 2,231

Доп. информация
По умолчанию Автор темы помогите разобраться с версткой блока

Добрый день уважаемые форумчани!
Решил для своих нужд освоить основы HTML и CSS. Просмотрев несколько видео уроков, вооружившись книгой HTML для чайников и сервисом htmlbook.ru попробовал сверстать шапку для сайта.
Результат, некорректный вывод в опере и хроме:
http://joxi.ru/EA49VG7t9KjJrb
в мозиле и IE все хорошо:
http://joxi.ru/zANyvXEIgVXL29
Код HTML и CSS проверил сервисом w3.org на ошибки, все хорошо.
Сам код:
HTML
Оффтоп:

<!DOCTYPE html>
<html>
<head>
<title>Замена микросхем flash</title>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles/main.css">
<link rel="shortcut icon" href="/images/favicon.ico" type="image/x-icon"/>
</head>
<body>
<div id="container">
<header>
<img id="logotype" src="images/xrepair-logo.png" width='250' alt = "Харьков-Repair" />
<nav>
<ul id="topmenu">
<li>
<a href="index.php" title="Главная страница"><span>Главная</span></a>
</li>
<li>
<a href="tools.php" title="Наше оборудование"><span>Оборудова ние</span></a>
</li>
<li>
<a href="feedback.php" title="Обратная связь"><span>Обратная связь</span></a>
</li>
<li>
<a href="contacts.php" title="Контакты"><span>Контакы</span></a>
</li>
</ul>
</nav>
</header>
<div id="top">
<div class="clear"></div>
<div id="search">
<form name="search" action="#" method="get">
<div>
<input type="text" name="query" placeholder="Поиск"/>
<input type="submit" name="search" value=""/>
</div>
</form>
</div>
<div id="auth">
<form name="auth" action="#" method="post">
<div>
<input type="text" name="login" placeholder="Логин"/>
<input type="password" name="password" placeholder="Пароль"/>
<input type="submit" name="auth" value="Войти"/>
</div>
</form>
<img src="images/bg_item_top.png" alt=""/>
<img src="images/icon_register.png" alt="" id="icon_register"/>
<a href="#" id="link_register">Регистрация</a>
<img src="images/bg_item_top.png" alt=""/>
<div id="links_reset">
<a href="#">Забыли пароль?</a>
<a href="#">Забыли логин?</a>
</div>
</div>
</div>
</div>
</body>
</html>

CSS
Оффтоп:

body{
background-color: #f2f2f2;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}

.clear{
clear: both;
}

#container{
width: 100%;

}

header {
background: linear-gradient(180deg, #dbf4f9 0%, #d0eff5 33%, #dbf2f7 34%, #d4f0f6 41%, #caecf4 42%, #c5eaf2 50%, #a7dfeb 51%, #a2ddea 54%, #bce7f0 56%, #b9e4ed 61%, #9ad8e5 63%, #9cd9e5 66%, #b3e1ea 67%, #a7dae7 73%, #8dd1de 74%, #77c0d1 100%);
border-bottom: 1px solid #333333;
height:140px;
padding: 10px 20px 0;
}

header h1{
color: #d96291;
float: left;
padding: 0;
}

#logotype{
float: left;
}

#topmenu{
margin: 0;
padding: 0;
float: right;
list-style: none;
font-weight: bold;
}

#topmenu li{
float: left;
}

#topmenu a{
background: url("../images/bg_item.png") no-repeat right top;
color: #605b61;
padding: 9px 7px 5px;
display: block;
text-decoration: none;
}

#topmenu a:hover, #topmenu a:active{
background: linear-gradient(180deg, #cdebef 0%, #7b98b0 100%);
border: 1px solid #8db9c4;
padding: 8px 6px 4px;
border-radius: 5px;
color: #df6f9b;
}

#top{
background-color: #dddddd;
border-bottom: 1px solid #262626;
box-shadow: 0 4px 4px #262626;
height: 34px;
padding: 0 20px;
}

#search{
margin-top: 5px;
float: left;
}

#search input[type="text"]{
background-color: #ffffff;
border: none;
border-radius: 5px 0 0 5px;
color: #333333;
height: 22px;
padding-left: 5px;
width: 263px;
}

#search input[type="submit"]{
background: url("../images/icon_search.png") no-repeat center center;
border: none;
cursor: pointer;
height: 22px;
margin-left: -4px;
width: 31px;
}

#auth{
float: right;
margin-top: 6px;
}

#auth form{
float: left;
}

#auth input[type="text"], #auth input[type="password"]{
border: 1px solid #999999;
border-radius: 5px;
height: 18px;
padding: 0 3px;
width: 88px;
}

#auth input[type="submit"]{
background: url("../images/icon_auth.png") no-repeat left center;
border: none;
color: #8ab71b;
cursor: pointer;
font-size: 100%;
margin-left: 10px;
padding-left: 15px;
}

#auth img{
float: left;
margin: 0 10px;
}

#icon_register{
margin: 3px 5px 0 0 !important;
}

#link_register{
color: #c8504b;
float: left;
text-decoration: none;
}

#link_register:hover, #links_reset a:hover{
text-decoration: underline;
}

#links_reset {
float: left;
margin-top: -3px;
}

#links_reset a{
color: #605b61;
display: block;
font-size: 75%;
text-decoration: none;
}

table{
background-color: rgba(217, 209, 206, 0.7);
border-radius: 10px;
width: 100%;
border: 1px double black;
border-collapse: collapse;
}

td{
border: 1px solid black;
padding: 5px;
}

input#red{
color: red
}

input#yellow{
color: yellow
}

.c{
background-color: red;
}

input[type="submit"]{
border: 4px double black;
}


Прошу сильно не пинать, если не сложно ткните в направлении ошибки.
Большое спасибо
Nazaru вне форума  
Ответить с цитированием Сказать Плохо за это бесполезное сообщение Быстрый ответ на это сообщение
Ответ

Быстрый ответ
Ваше имя пользователя: Регистрация. Для входа нажмите здесь
Случайный вопрос

Сообщение:
Опции
Внимание!
Этой теме более 2584 дней. Вы можете оставить сообщение здесь. Но, обращаем внимание. Возможно, рациональней создать новую тему (найти свежее обсуждение)?


Опции темы
Опции просмотра Оценка этой теме
Оценка этой теме:

Ваши права в разделе
Вы не можете создавать новые темы
Вы можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
[ Обсуждение ] Помогите разобраться Jaga Беседка 6 29.11.2013 00:33
Помогите разобраться с WP ArcDi WordPress 0 07.03.2012 15:39
помогите разобраться nof8ole Продвижение сайта 3 02.05.2011 09:36
Помогите разобраться Sport Раскрутка в общих чертах 10 10.09.2009 19:31
Помогите разобраться! джошь Яndex 5 03.12.2008 12:48

Текущее время: 07:57. Часовой пояс GMT +3.