0

Проблема в том что съезжает весь последний блок, если указать ширину у таблицы или у блока menu 100%, то съезжает вниз ровно на блок content-header -а.

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

Буду, очень признателен, если разжуете мне эту проблему более подробно.

body {
	font-family:Arial,'Times New Roman', sens-serif;
	margin:0;
	padding: 25px 40px 25px 45px;
}

.clear {
	clear: both;
}

#logo table {
	width:100%;
}

.grey {
	color:#afaeae;
}

.green {
	color:#91aa77;
	font-weight:bold;
}

.right p {
	margin:0;
	font-style:italic;
	text-align:right;
}
#topmenu {
	background-color: #538bc5;
	margin-top: 20px;
}
#topmenu ul li {
	float:left;
	list-style: none;
}
#topmenu ul li a {
	text-decoration: none;
	color: #fff;
	display:block;
	font-size: 135%;
	padding: 10px 20px;
}

#topmenu ul {
	margin: 0;
	padding: 0;
}

#topmenu ul .active a , #topmenu ul li a:hover {
	background-color: #375c84;
}


#contact {
	float:  right;
	margin: 10px 6px 0 0;
	text-decoration:none;
}

#header img {
	width: 100%;
	margin-top: 15px;
}

#content-header {
	float: right;
	position:relative;
	top: -175px;
	right: 30px;
	text-align: right;
}

#content-header h1, #content-header h3 {
	margin: 0 0 0 0 ;
	}

#content-header h1 {
	color: #5F91B0;
	font-size: 215%;
}

#content-header h3 {
	color: #8AAEC0;
}

#content-header a{
	background-color: #F08221;
	color: #fff;
	text-decoration: none;
	padding: 10px 20px;
	font-size: 105%;
	font-weight: bold;
}

#content-header p {
	margin-top: 45px;
}


#search div input{
	float: right;
	border: 4px solid #cbddbb;
	width: 180px;
	padding-left: 5px;
	height: 25px;
	color: #676767;
}

#menu {
	margin-top: 5px;
}

#menu table{
	width: 69%;
	float: left;
}

#menu .right {
	margin:12px 2px auto auto ;
}

#menu .right {
	float: right;
	text-align: right;
	margin-right: -340px;
}

.border {
	border-top: 1px dashed blue;
	width: 100%;
}

#menu table table {
	width: auto;
}

#menu table td a {
	padding:10px 20px;
	display: block;
	text-decoration: none;
	background-color: #E7E7E8;
	color: #BCB9B8;
	margin:12px 2px auto auto;
	font-weight: bold;
}

#menu table td a:active, #menu table td a:hover {
	color: #356790;
	background-color: #DCEBF4;
}

#menu .active a {
	color: #356790;
	background-color: #DCEBF4;
}
<!DOCTYPE html>
<html lang='ru'>
<head>
<title>Верстка сайта</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><img src='images/logo.jpg' alt='logo'/></td>
				<td class='right'>
					<p class='grey'>For additional information. Contact Us!</P>
					<p class='green'>[email protected]</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>Chothig</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='contact'>
			<a href='#'><img src='images/mail.jpg' alt='icon-mail'></a>
			<a href='#'><img src='images/facebook.jpg' alt='icon-facebook'></a>
		</div>
		<div class='clear'></div>
	</div>
	
	<div id='header'>
		<img src='images/head.jpg' alt='header'/>
		<div id='content-header'>
			<h1>Welcome to Mostra!</h1>
			<h3>Quality products - Great prices!</h3>
			<p>
				<a href='#'> Check it Out! </a>
			</p>
		</div>
	</div>
	
	<div id='menu'>
	<table>
		<tr>
			<td class='left'>
				<table>
					<tr>
						<td class='active'> <a href='a'><span>All categories </span></a></td>
						<td> <a href='a'><span>Men </span></a></td>
						<td> <a href='a'><span>Women </span></a></td>
					</tr>
				</table>
			</td>
			<td class='right'>
				<div id='search'>
				<form name='search' action='#' method='post'>
					<table>
						<tr>
							<td>
								<div>
									<input type='text' name='searched' value='Browse Products'/>
								</div>
							</td>
							<td>
								<input type='image' src='images/button.jpg' alt='button'/>
							</td>
						</tr>
					</table>
				</form>
				</div>
			</td>
		</tr>	
	</table>
	</div>
	<div class='border'></div>
</body>
</html>

3
  • добрый день! Не понятно, в каком порядке должны в итоге идти блоки и что где должно быть расположено, можете описать подробнее? 1. порядок блоков 2. взаимное расположение блоков на странице. 3 не хотите ли прибегнуть к grid-css ? (не обязательно, но верстать будет проще=) ) Объясню на том, в чем вам удобнее писать, но поясните целевой макет 12 фев 2020 в 7:28
  • Блоки, идут в том порядке, как указаны в теле, т.е. 1.logo 2.contact 3.topmenu 4.header .5.menu и после 5-ого блока идет рамка. Идут они с верху вниз ровно по горизонтали. grid css даже о таком не слышал...
    – Павел
    12 фев 2020 в 11:15
  • Как таковой проблемы нет, я это все дело подвинул через margin, но хотелось бы узнать почему съезжают при указании 100%
    – Павел
    12 фев 2020 в 11:16

1 ответ 1

0

Блоки съехали из-за правила position. Если во множестве блоков стоит relative, они начинают позиционироваться относительно друг друга и конфликтовать. Такое позиционирование лучше использовать только у четко зависимых друг от друга элементов (например - стрелочка у выпадающего списка должна быть привязана к первому пункту всегда и находиться внутри него) В остальных случаях чтобы блоки не жили своей жизнью, лучше не использовать position. Когда блок должен быть независим и остальные должны под него заезжать или на него, используйте background-color, чтобы не смешивался текст накладываемых элементов grid css позволяет виртуально поделить страницу на заданную вами сетку и не дать элементам из разных блоков попасть в чужой сектор. Удобная технология, советую почитать.

10
  • Благодарю за ответы, поправил все это background -ом на блок хидер и все стало ок, За место тега img в самом теле. Но конечно же хотелось бы что бы и картинка и текст все было в одном, и без position не обойтись, так как текст "убегает" под картинку... Если же двигать простым margin.
    – Павел
    12 фев 2020 в 12:54
  • Спасибо, догадывался, что что то не то с контент хидером... Но не понимал что, теперь понял .. position!!! :)
    – Павел
    12 фев 2020 в 12:57
  • Ах да... Про рамку еще подскажите, почему она ставится сверху блока menu, хотя я явно прописваю блок после блока с menu <div class='border'></div>
    – Павел
    12 фев 2020 в 12:59
  • Ещё можете обернуть картинку и Хидер в один див, задать ему ширину/высоту и уже его отпозиционировать как надо, а внутри расположить картинку с хидером относительно друг друга при помощи display:inline-block, margin и padding 12 фев 2020 в 13:01
  • Все что ниже в коде - выше на странице. Используйте css z-index. У нижнего блока задайте 0, а у верхнего 999. Вы же имеете ввиду наложение, да? 12 фев 2020 в 13:01

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.