Всем привет. У меня возникла небольшая проблема. Только начал изучать css и html, как сразу столкнулся с проблемой:
Таблицы съехали непонятным образом. Прошу помощи в решении данной проблемы! :wacko:
Заранее спасибо за помощь.
<!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>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="styles/styles.css" />
</head>
<body>
<div id="logo">
<table>
<tr>
<td>
<a href="#">
<img src="images/logo.jpg" alt="Логотип">
</a>
</td>
<td class="right">
<p class="gray">For Additional Information, Contact Us!</p>
<p class="green">info@memostra.com</p>
</td>
</tr>
</table>
</div>
<div id="topmenu">
<ul>
<li class="active">
<a href="#">
<span>Home</span>
</a>
</li>
<li>
<a href="#">
<span>About</span>
</a>
</li>
<li>
<a href="#">
<span>Clothing</span>
</a>
</li>
<li>
<a href="#">
<span>Shoes</span>
</a>
</li>
<li>
<a href="#">
<span>Electronics</span>
</a>
</li>
<li>
<a href="#">
<span>Perfumes</span>
</a>
</li>
<li>
<a href="#">
<span>Contact Us</span>
</a>
</li>
</ul>
<div id="contacts">
<a href="#">
<img src="images/facebook.jpg" alt="Фейсбук">
</a>
<a href="#">
<img src="images/mail.jpg" alt="Почта">
</a>
</div>
<div class="clear"></div>
</div >
<div id="header">
<img src="images/header.jpg" alt="Header">
<div id="content_header">
<h1>Welcome to Mostra!</h1>
<h3>Quality Products - Great Prices!</h3>
<p>
<a href="#">
<span>Check It Out!</span>
</a>
</p>
</div>
</div>
<div id="menu">
<table>
<tr>
<td>
<div class="left">
<table>
<tr>
<td class="active">
<a href="#">
<span>All Categories</span>
</a>
</td>
<td>
<a href="#">
<span>Men</span>
</a>
</td>
<td>
<a href="#">
<span>Women</span>
</a>
</td>
</tr>
</table>
</div>
</td>
<td class="right">
<div id="search">
<form name="searchform" method="post" action="#">
<table>
<tr>
<td>
<div>
<input type="text" name="words" value="Browse Products" />
</div>
</td>
<td>
<input type="image" src="images/bsearch.jpg" class="myimg" />
</td>
</tr>
</table>
</form>
</div>
</td>
</tr>
</table>
</div>
<div id="separator"></div>
<div id="Clothes">
<table>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
</body>
</html>
[CSS]body {
font-family: Arial, "Times New Roman", sans-serif;
font-size: 12pt;
margin: 0;
padding: 20px 40px 20px 35px;
min-width: 1000px;
}
#logo table {
width: 100%
}
.clear {
clear: both;
}
.right {
text-align: right;
}
#logo p {
margin: 0;
font-style: italic;
}
.gray {
color: #afaeae;
}
.green {
font-weight: bold;
color: #91aa77;
}
#topmenu {
margin-top: 20px;
background-color: #538bc5;
}
#topmenu ul {
margin: 0;
padding: 0;
}
#topmenu ul li {
list-style: none;
float: left;
}
#topmenu ul li a {
display: block;
font-size: 120%;
color: #fff;
padding: 10px 20px;
text-decoration: none;
}
#topmenu ul li.active a, #topmenu ul li a:hover {
background-color: #375c84;
}
#contacts {
float: right;
margin: 10px 10px 0 0;
}
#contacts a {
text-decoration: none;
}
#header {
margin-top: 15px;
}
#header img {
width: 100%;
}
#content_header {
float: right;
position: relative;
text-align: right;
top: -150px;
right: 30px;
}
#content_header h1, #content_header h3{
margin: 0;
}
#content_header h1 {
color: #688fb1;
font-size: 210%;
}
#content_header h3 {
color: #91a9bd;
font-size: 100%;
}
#content_header a {
background-color: #d8812e;
color: #fff;
padding: 10px 20px;
text-decoration: none;
}
#content_header p {
margin-top: 30px;
}
#content_header a:hover {
background-color: #940f0e;
}
#menu {
margin-top: 15px;
vertical-align: top;
}
#menu td a {
background-color: #ececec;
color: #a0a0a0;
text-decoration: none;
font-weight: bold;
padding: 10px 20px;
display: block;
}
#menu td.active a, #menu td a:hover {
background-color: #e2ecf4;
color: #3b638f;
}
#search div {
border: 1px solid #aec697;
margin-top: -3px;
}
#search {
float: right;
}
#search div input {
border: 3px solid #cbddbb;
height: 25px;
width: 220px;
padding-left: 5px;
color: #91a9bd;
}
#menu .right {
text-align: right;
}
#menu table {
width: 100%;
text-align: center;
}
#menu table table {
width: auto;
}
#separator {
width: 100%;
height: 1px;
border-top: 1px dashed #b6c6dd;
margin-top: 15px;
}
#search td input.myimg {
height: 92%;
}[/CSS]