расположение текста для 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>
Честно говоря, на практике не применял. |
Цитата:
|
спасибо, но не то
Тогда, если вставлять текст с помощью js(как привел мне выше BETEPAH, в 5 посте), но div с #clone поместить внутрь div'a с #content, а затем, как-то автоматически менять высоту div'a c #clone в зависимости от размера текста в нем, и чтобы основное содержимое блока #content видело эту высоту и не заезжало на него(как наглядно это видно по 2-й ссылке в 3 посте). Вопрос! Если это можно сделать, то каким образом можно менять высоту div'a, в котором объем текста меняется, может быть и нулевым |
BETEPAH, спасибо за решение, я его сделала,но это не решило моей проблемы, по сути это тоже самое, что и css-вариант.
Я уже не знаю, как еще объяснить свою ситуацию((( |
Цитата:
http://jsfiddle.net/BETEPAH/sksNX/ |
сделала как у вас, у меня почему-то скрипт не работает, firebug'ом проверила, пишет, что srcDiv и cloneDiv равно null
|
Цитата:
Поместите код в
window.onload = function(){
//сюда
}
|
js я вынесла в отдельный файл, вот так? он не работает
window.onload = function(){
var srcDiv = document.getElementsById('key_words');
var cloneDiv = document.getElementsById('clone');
cloneDiv.innerHTML = srcDiv.innerHTML;
srcDiv.style.display = 'none';
}
|
Цитата:
|
у меня сайт на локалке
|
вариант хороший, но оказывается srcDiv.style.display = 'none'; плохо для поисковиков
|
а как у поисковиков с
srcDiv.innerHTML = ""; ? Можно, конечно, попробовать подшифровать скрипт, но гнаться наперегонки с гуглем то еще удовольствие ;) И обратите внимание на пост №10 от danik.js. Как поисковики относятся к display: table-footer-group; ? http://jsfiddle.net/BETEPAH/sksNX/2/ |
ой, я не seo-специалист, даже не знаю как у поисковиков с srcDiv.innerHTML = ""; надо погуглить.
Если бы все зависело от меня. Получается display:none и visibility:hidden исключаются. Хорошо, посмотрю на пост №10. Интересно, а если сделать текст прозрачным |
Цитата:
Вы сначала проконсультируйтесь с СЕО-специалистами и скажите, что нужно сделать. А уж возможности js почти безграничны в этом. Предложение danik.js я реализовал на jsfiddle, просто кликните по ссылке :) |
Цитата:
|
Пользуюсь услугами https://uniartic.ru/part/copyright и с уверенность могу сказать помогут во всем быстро и не дорого!
|
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 22:56. |