Форум Сайтостроение Веб-строительство

Вопрос знатокам CSS

D
На сайте с 01.02.2010
Offline
26
danilaka
952

Добрый день

Подскажите пожалуйста как поменять дивы местами

Есть код 


<div id=content>

<div id=products>

</div>

<div id=seotext>

</div>

</div>

Хочется что бы в html структуре было видно 


<div id=content>

<div id=seotext>

</div>

<div id=products>

</div>

</div>

То есть текст был выше товара, а на сайте что бы все оставалось так же, сначала товар а потом текст

seotext и products разной высоты по этому с position: absolute; bottom: 0; и main position: relative; у меня не выходит, один див заходит на второй

Заранее спасибо за совет

Хорошие квартиры посуточно в Киеве (http://nahate.com/kvartiry-posutochno-kiev.html)
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#1

Вы гадаете на кофейной гуще! Полный код давайте и полные стили. Мы не экстрасенсы.

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
D
На сайте с 01.02.2010
Offline
26
danilaka
#2
vlad00777:
Вы гадаете на кофейной гуще! Полный код давайте и полные стили. Мы не экстрасенсы.

Вы правы

Вот так должно выглядеть, только без заданной высоты блоков 


<html> 

<head> 

<style> 



.divB { 

position: relative; 

top: 200px; 

width: 200px; 

height: 200px; 

border: 1px solid red; 

} 

.divA { 

position: relative; 

top: -200px; 

width: 200px; 

height: 200px; 

border: 1px solid red; 

} 

</style> 



</head> 

<body> 

<div>

<div class='divB'>B 

</div> 

<div class='divA'>A 

</div> 

</div>



</body> 

</html>
Saitoff
На сайте с 27.05.2011
Offline
71
Saitoff
#3
vlad00777:
Вы гадаете на кофейной гуще! Полный код давайте и полные стили. Мы не экстрасенсы.

Что к чему? При чем здесь стили? Написано же:

danilaka:
seotext и products разной высоты по этому с position: absolute; bottom: 0; и main position: relative; у меня не выходит, один див заходит на второй

Т.е. при помощи CSS этого не решить при разной (и тем более меняющейся) высоте блоков. Тут требуется скрипт. Разговоры были на эту тему...

KS
На сайте с 11.06.2012
Offline
17
KostaShah
#4

Задачка показалась мне интересной. Пораскинул мозгами. Таки можно решить при разной высоте блоков, без скрипта. Довольно просто. Вот: http://filesafe.anek.ws/blocks.htm Смотрите стили в разметке. Оба дива ставятся в релятивно позиционированный контейнер, верхний див позиционируется абсолютно, и имеет top:100%.

FileSafe (http://filesafe.anek.ws/) - мониторинг неизменности файлов сайта для защиты от взлома. Для форумчан - первый год бесплатно.
Вопрос по поводу блочной Хитрая верстка дивами Как заставить пустой див,
IL
На сайте с 20.04.2007
Offline
435
ivan-lev
#5
KostaShah:
Довольно просто.

Довольно часто у сайта помимо двух блоков имеются ещё элементы. Если я правильно понял, Ваше решение не предусматривает наличие подвала (если добавить блок/элемент после последнего закрывающего div-а, он будет перекрываться красным блоком)

... :) Облачные серверы от RegRu - промокод 3F85-3D10-806D-7224 ( http://levik.info/regru )
Помогите правильно расставить блоки Стоит ли ставить сапу? Бесплатные консультации по MODx
KS
На сайте с 11.06.2012
Offline
17
KostaShah
#6

Подвал нужно поместить внутрь красного дива.

O
На сайте с 26.12.2006
Offline
41
oioish
#7

Интересная задачка.

Есть такое же интересное решение.

Суть получается в следующем: 


<html>  

<head>  

<style>  

.wrapper {

	display: table;

}

.divB {  

	display: table-footer-group;

}  

.divA {  

	display: table-header-group; 

}  

</style>  

</head>  

<body>  

<div class="wrapper"> 

	<div class="divB">

		B  

	</div>  

	<div class="divA">

		A  

	</div>  

</div> 

</body>  

</html>

Опять же, это только для нормальных браузеров :).

E
На сайте с 21.09.2009
Offline
283
easywind
#8

если в ксс стилях уже установлены параметры нужно просто в файле ксс поменять местами имена ид.

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий