расположение текста для SEO
Всем привет!
У меня такая задача, нужно текст расположить в начале кода, т.е. сразу под открывающимся тегом бади, а на экран выводить в конце контента, но перед футером. Контент по высоте резиновый. Я сделала это с помощью position'a. Только это работает при фиксированном тексте, для которого я сделала зазор по высоте между футером и контентом. А у меня должен текст быть динамичным, т.е. на разных страницах объем текста меняется. Подскажите, как сделать так, чтобы этот зазор для текста, расположенный между основным контентом и футером менялся по высоте вслед за текстом? Вот как у этого сайта,если прокрутите вниз там текст начинается с"Как производится доставка",а если пройтись по другим пунктам меню, то текста либо нету, либо другой текст:http://http://enjoyflowers.ru/dostavka_buketov/ |
что если дать высоту текста - 5%, а размер блока - 7%?
можно измерить высоту текста и исходя из этого задать высоту зазора. но, думаю, тут можно обойтись css |
мне кажется не то(
Дело в том, что мне нужно, чтобы текст был расположен внутри <div id="content"></div>. Внутри этого дива есть свое содержимое, за которым и должен идти этот текст,но текст у меня прибит к низу с помощью position'a и bottom:0; Т.е. содержимое налазит на текст, а при малом содержимом, текст не следует за ним, оставаясь внизу Для наглядности, вот ссылка:http://s020.radikal.ru/i720/1309/1a/f15edda43bff.png http://s020.radikal.ru/i719/1309/21/143a557d7f20.png вот код
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="temp.css" type="text/css">
</head>
<body>
<div id="container">
<div id="main">
<div id="all">
<div id="key_words">текст, который должен быть внизу<br>текст, который должен быть внизу<br>текст, который должен быть внизу<br>текст, который должен быть внизу
</div>
<div id="sidebar">sidebar</div>
<div id="content">
content<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>text<br>
text<br>
end
</div>
</div><!--end all-->
</div><!--end main-->
<div id="footer">footer</div>
</div><!--end container-->
</body>
</html>
html,body{
background:#fff;
height:100%;
color:#000;
margin:0;
padding:0;
}
#container{
width:1200px;
height:100%;
background:url(bg_sidebar.png) repeat-y;
margin:0 auto;
}
#key_words{
position:absolute;
margin-left:250px;
color:red;
bottom:0;
}
#all{
width:100%;
overflow:hidden;
background:url(bg_sidebar.png) repeat-y;
}
#main{
min-height:100%;
background:url(bg_content.png) repeat-y 100% 0;
position:relative;
}
#sidebar{
float:left;
width:250px;
}
#content{
float:left;
width:950px;
}
#footer{
float:left;
width:100%;
height:150px;
background:#388b3d;
|
position:relative у меня в #main
вы наверно имеете в виду как на этой странице сделатьhttp://jsfiddle.net/VkuaL/ |
Судя по тому, что Вы написали на js-форуме, Вам нужно скриптовое решение? Вот:
<div id="container"> <div id="key_words"></div> <div id="main"> <div id="all"> <div id="sidebar">sidebar</div> <div id="content"></div> </div> </div> <div id="clone"></div> <div id="footer">footer</div> </div>
var srcDiv = document.getElementById('key_words');
var cloneDiv = document.getElementById('clone');
cloneDiv.innerHTML = srcDiv.innerHTML;
srcDiv.style.display = 'none';
|
Цитата:
Семантически это конечно неправильно, но Вы ведь уже пренебрегаете семантикой по условиям задачи. |
во втором варианте: если я добавлю футер в блок main, то при малом контенте футер поднимается вверх, а текст на экране расположен вне блока и не следует за текстом, который внутри блока с id="content"
|
мне нужно, чтобы было как на этом скриншоте, чтобы текст для сео(обозначен красным цветом) шел сразу за текстом что в id="content", объем текста в обоих случаях меняется,но и чтобы не заезжал на футер
http://s017.radikal.ru/i430/1309/54/b839947844e0.png |
Господа! Неужели нет выхода из этой задачи, наверняка кто-то сталкивался, я просто не очень хорошо js знаю, верней плохо, если бы знала хорошо я бы может и решила эту задачу, но сейчас хоть намекните в какую сторону копать
|
Существует вот такой вот финт:
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
.top {
display: table-row-group;
}
.bottom {
display: table-footer-group;
}
</style>
<div class="bottom">Этот текст в коде идет первым, но отобразится внизу</div>
<div class="top">Этот текст в коде идет вторым, но отобразится вверху</div>
Честно говоря, на практике не применял. |
| Часовой пояс GMT +3, время: 03:49. |