СЕО верстка

ale-kc · November 3, 2012

Добрый день, я сделал небольшой макет шаблона, но из-за нехватки опыта не могу (или это не возможно) побороть некоторые проблемы.

- блок “bot_content”-там будет СЕО текст выходит за пределы блока “content”

- блок class="footer" может отображаться поверх блока id=”container” при

маленькой высоте окна браузера. И он всегда лежит за пределами видимого окна браузера(но я думаю это можно побороть просто сделав

footer такой же ширины как и весь сайт и перенести его в блок class=”main”, но

все равно при этом остается первая проблема)

Необходимо поправить шаблон, так что бы он работал в большинстве браузеров, возможно применение js (но очень не желательно!)

IE6+

FF3+

Opera9+

Chrome

Ниже привожу код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
	xmlns="http://www.w3.org/1999/xhtml"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=iso-8859-1"
/>
<style type="text/css">
* {
	margin:0;
	padding:0;
}

#container {
	width:980px; /*trip haslayout */
	position:relative;
	margin: 0 auto;
}

.main {
	position:absolute;
	top:100%;
	width:100%;
	background:#EEF;
	border: 1px solid;
}
.menu {
	background:#FEE;
}
.menu ul li {
	display:inline;
	width:30px;
}
.header {
	background:#EFE;
	width: 980px;
	margin: 0 auto;
}
.header ul li{
	display:inline;
	width:300px;
}
.header ul li div{
	position:relative;
	display:inline;
}
.search {
    bottom: 0;
    position: absolute;
    right: 0;
	background-color: lightgreen;
	width:150px;
}
.left	{
	float: left;
	width: 200px;
}
.inside	{
	float: right;
    width: 500px;
}
.footer	{
    border: 1px solid;
	background:#EFE;
	height: 100px;
    position: absolute;
    top: 100%;
	width: 100%;
}
.right	{
	float: right;
}
.content	{
	float: left;
	position: relative;
}
.bot_content	{
	position:absolute;
	top:100%;
}
</style>

</script>

</head><body>
<div id="container">
	<div class="main">
	   <div class="container">
		<div class="inside">
			<div class="picture">picture</div>
			<div class="bradcrumbs">breadcrumbs</div>
			<div class="content">
				<div class="bot_content">
					<p>main bot</p>
					<p>main bot</p>
					<p>main bot</p>
					<p>main bot</p>
					<p>main bot</p>

				</div>
				<div class="top_content">
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
					<p>main top</p>
				<div class="module"> some module</div>
				</div>
			</div>
			<div class="right">
				<p>right</p>
				<p>right</p>
				<p>right</p>
			</div>
		</div>
		<div class="left">
			<p>left</p>
			<p>left</p>
			<p>left</p>
			<p>left</p>
			<p>left</p>
			<p>left</p>
			<p>left</p>
		</div>
	   </div>
	</div>
	<div class="header" style="height:25px;">
		<div style="float: left;width:150px;"> logo </div>
		<div style="float: left;width:350px;"> login </div>
		<div style="float: right;width:150px;"> cart </div>
	</div>
	<div class="menu">
	   <ul>
	      <li><span>menu 1</span></li>
	      <li><span>menu 2</span></li>
	      <li><span>menu 3</span></li>
	      <li><span>menu 4</span></li>
	   </ul>
	   <div class="search">Search</div>
   </div>
</div><!-- #container -->
<div class="footer">footer</div>
</body></html>

Edited November 3, 2012 by ale-kc

Web-red · November 3, 2012

Готов взятся за работу

icq: 648358658

Sign In

СЕО верстка

Recommended Posts

ale-kc

Link to comment

Share on other sites

Web-red

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information