Шаблон HTML+CSS

92

emsti

7 марта 2010, 15:14

1030

Здравствуйте, уважаемые форумчане!

Имеется вот такой HTML-код в теле документа


<body>

<div id="wrap" class=" make">
	<div id="container1">
		<div id="container2">
			<div id="center">
				<div id="content">
				        <h1>Заголовок cтраницы</h1>
				        <p>Текст страницы</p>
				</div><!-- /#content -->				
				<div id="others">
				        <p>Вспомогательный текст страницы</p>
				</div><!-- /#others -->
			</div><!-- /#center -->
			<div id="left">
				<h2>Левая колонка</h2>
			</div><!-- /#left -->
			<div id="right">
				<h2>Правая колонка</h2>
			</div><!-- /#right -->
		</div><!-- /#container2 -->
	</div><!-- /#container1 -->
</div><!-- /#wrap .make -->

<div id="header">
	<h1>Header</h1>
</div><!-- /#header -->

<div id="topmenu"> 
	<ul> 
		<li><a href="#">Раздел 1</a></li> 
	</ul> 
</div><!-- /#topmenu -->

<div id="footer">
	<p>Footer</p>
</div><!-- /#footer -->

</body>

С помощью CSS необходимо сделать следующую верстку

Хедер и Топменю были расположены в нужных местах с помощью абсолютного позиционирования.

Проблема: необходимо разместить блоки Content и Others так, как это показано на рисунке, при условии, что блок Content будет сдвигаться вниз при наполнении блока Others

46

ixRock

7 марта 2010, 15:27

#1

никак не сделать так, только разве что подключать JS)

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

Работаю [S]за еду и секас[/S] с XHTML, CSS, XSLT, JS, PHP. Если что, вот тут (http://www.mintdesign.ru/) некоторые мои работы. Контакты: ася 344-ноль86-276, мыло ixrock@gmail.com

eTarget 2011:Панельная дискуссия «Стратегия eTarget 2011: Круглый стол Могут ли «плохие» входящие

122

skAmZ

7 марта 2010, 15:30

#2

У вас не правильная сама струтура документа. 2 раза открывается '<div id="center">' и не закрывается. Как на счет header поставить первым блоком?

92

emsti

7 марта 2010, 16:12

#3

ixRock, я понимаю, что теоретически необходимо один из блоков вставить в поток, но в другом месте, следовательно абсолютное позиционирование здесь неприменимо.

Увы, высота блока контента непредсказуема.

skAmZ, да, это я ошибся при наборе. Уже исправил.

Можно все, что угодно, но так задумывалось, чтобы контент ботами читался первым. Из-за этого, собственно, и весь этот сыр-бор.

[Удален]

7 марта 2010, 16:54

#4

emsti, вложите content в others и все, поставьте их абсолютом и задайте ризиновую ширину.

174

Varkolak

7 марта 2010, 19:33

#5

Moi-Sha:
emsti, вложите content в others и все, поставьте их абсолютом и задайте ризиновую ширину.

так он уже указал как он хочет сделать, думаю ему не интересны другие решения по размещениу html тегов.

как сейчас указано в html шаблоне - не сделать!

html/css/js верстка и разработка сайтов на hostcms (хостцмс) - skype: varkolak1, тел: 89675012935, e-mail: anton.yurzanov@gmail.com

[Удален]

7 марта 2010, 19:45

#6

Varkolak:
так он уже указал как он хочет сделать, думаю ему не интересны другие решения по размещениу html тегов.

Так он изначально ошибочно думает ))) Зачем городить церковь святых апостолов, когда есть нормальная dom модель при выводе? Как хочешь так и выводишь )

G

37

gordi

8 марта 2010, 11:53

#7

Если, расположение блока Others по html-коду ниже контейнера Content не критично,

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

Все о разметке web-страниц (http://csslayout.ru)

F

45

Fearful

8 марта 2010, 14:23

#8

Если высота header, topmenu постоянная, то можно через position absolute сделать, при условии что ширина дива center фиксированная

92

emsti

8 марта 2010, 17:16

#9

Varkolak, все правильно. Мне важно, чтобы сам контент читался ботами первым. Но, если это невозможно сделать, то придется отказаться от этой затеи.

Moi-Sha, в чем моя ошибка? Я пытаюсь сделать шаблон для примитивного движка. Но вот про DOM я здесь услышал впервые. И порывшись в сети даже нашел вот такую конструкцию, которая при клике меняет местами пункты в списке.


<html>
<head>
<title>Перемена мест</title>
<script>
function go() {
        var ol = document.getElementsByTagName('ol')[0]
        var first = ol.removeChild(ol.firstChild)
        var second = ol.removeChild(ol.firstChild)
        ol.appendChild(second)
        ol.appendChild(first)
}
window.onload = function() { document.body.onclick = go }
</script>
</head>
<body>
	Меняем пункты местами
	<ol>
		<li>First</li>
		<li>Second</li>
	</ol>
</body>
</html>

Но, увы, я со скриптами еще не дружу и пока не знаю, как это можно применить в моем случае, хотя знаю, что это возможно.

По ходу возникает еще один вопрос - будет ли все это работать в дефолтном шаблоне движка?

gordi, мне важно, чтобы блок контента в html-коде был первым.

Fearful, да весь шаблон с фиксированной шириной и дивы, соответственно, тоже. Я могу абсолютно спозиционировать блок Others так, как показано на рисунке, но при наполнении, он будет наползать на блок контента.

92

emsti

18 марта 2010, 18:56

#10

С помощью CSS получить такой результат не удается. Услышал об ООП и DOM-моделях в частности. Даже нашел функцию, меняющую местами соседние объекты:

function fncInterchange(row){

row.swapNode(row.previousSibling);

}

К сожалению, я со скриптами не дружу и мне этот код совершенно ничего не говорит. Может быть, кто-то подскажет, как привязать этот скрипт к документу так, чтобы перемена мест происходила при его открытии в браузере?

Маркетинг для шоколадной фабрики. На 34% выше средний чек

VK приобрела 70% в структуре компании-разработчика red_mad_robot