#1 13.04.09 03:32
CSS+PHP блочная верстка
Имеется страница сверстанная блоками, вна эту страницу, через PHP из БД выводится текст.
При большом количестве текста страница не расстягивается. А текст показывается поверх блоков. В чем может быть проблема.
Страница:
<body>
<div id="container">
<!-- ************** центр ************************* -->
<div id="central">
<div id="content">
<?php
include "script/conectadmin.inc";
$query = "SELECT * FROM glavn";
$result = mysql_query($query);
$num_results = mysql_num_rows($result);// Сколько строк нашли
for ($i = 0; $i <$num_results; $i ++) {
$row = mysql_fetch_array($result);
echo "<h3>";
echo ($row["zagol"]);
echo "</h3>";
echo ($row["text"]);
}
?>
</div>
</div>
</div>
</body>
Код CSS:
#container {/*контент*/
margin: 0 auto;
width: 800px;
background: #afdcfe;
}
#central {
position: relative;
background: url(../pictyre/kont_centr.jpg) repeat-y;
background-color:#3A7999;
width: 481px;
height: 100%;
color: #000;
float:left;
}
#content{
position: absolute;
top:0px;
left:25px;
width:440px;
height: 100%;
}
Исправлено -=potkot=- (13.04.09 03:34)
Offline
#7 13.04.09 14:02
Re: CSS+PHP блочная верстка
chmaxx написал(а):
А php то тут причем?
Когда без php было все нормально работало. А с ним почему то нет.
Offline
#8 13.04.09 14:04
Re: CSS+PHP блочная верстка
Antony написал(а):
проблема в безобразном нагромождении position
А можно точнее что не так с position?
Offline
#10 13.04.09 14:10
Re: CSS+PHP блочная верстка
абсолют позиционирует относительно документа, релетив, относительно родительского элемента.. неверное понять что ты хочешь.
Див ид="контент" держать абсолютным относительно документа? тили всё же в диве другом, тогда релетив, надо.
И как то странно описываешь, расположение блоков.
Offline
#11 13.04.09 14:15
#12 13.04.09 14:19
Re: CSS+PHP блочная верстка
Jaguar написал(а):
неа... абсолютные позиционируются относительно родительских релетив, а не документа...
а да, точно наоборот:))
relative
Позиция элемента смещается относительно его исходного положения вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left).
absolute
Позиция элемента смещается относительно родительского элемента вверх, вниз, вправо или влево (зависит от того, какое свойство применено: top, right, bottom или left), а так же нарушается порядок отображения элементов. Элементы, следующие за ним располагаются так, словно его нет на странице.
Offline
#13 13.04.09 14:20
#14 13.04.09 16:34
#15 13.04.09 16:34
#16 13.04.09 17:35
Re: CSS+PHP блочная верстка
iDrum, ну там немного другая механика, это не тоже самое, что и позишен абсолют, но некоторые свойства совпадают
Offline
#17 13.04.09 18:10
Re: CSS+PHP блочная верстка
а автору порекомендовал бы заменить «height:100%» на «min-height:100%; _height:100%»
Offline
#18 13.04.09 20:10
#19 20.04.09 22:50
Re: CSS+PHP блочная верстка
Мудрил мудрил, но так и не сделал нормально, блок с текстом тянется, а дизайн сзади нет((
Вразумите, что не тка делаю. И книги читаю и у вас спрашиваю а дело стоит((
Страница
<!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="ru" xml:lang="ru">
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251" />
<meta name="description" content="" />
<meta name="keywords" content=" " />
<link rel="stylesheet" href="../stile/osnov.css" type="text/css" />
<title>Главная</title>
</head>
<body>
<div id="container">
<!-- ************** центр ************************* -->
<div id="central">
<div id="content">
<h3>Проверка</h3>Проверяем<h3>Проверка два</h3>Вид сквозь бойницу замка Кастельгранде на Беллинцону, последний большой город на пути русской армии в Швейцарском походе
Из космоса Альпийский горный массив похож на дракона, который улегся на «раструбе голенища» итальянского «сапога». Голова его упирается в Ниццу, а кончик хвоста — в Вену. Сердце дракона — перевал Сен-Готард. Не зря его называют ключом Европы. Отсюда берет начало ее кровеносная система — реки: Рона, направляющая свои воды во Францию, Рейсса и Рейн — в Германию, Тичино — в Италию. От перевала расходятся и важные дороги, по которым разные войска во все времена обрушивались на врагов по обе стороны Альп. В 1799 году сердцем дракона завладела лучшая армия того времени, во главе которой стоял генерал-фельдмаршал граф Суворов-Рымникский.
С погодой в Швейцарии нам повезло. Всю неделю, пока корреспонденты «Вокруг света» шли путем русско-австрийских войск через Альпы, светило солнце. Мы оказались в Швейцарии в начале сентября, всего на пару недель раньше, чем некогда легендарный фельдмаршал, и недоумевали: неужели скоро в этом благословенном краю будет не переставая лить дождь и даже валить снег? По всем прогнозам выходило, что еще как будет. В октябре, например, дороги через многие перевалы из-за непогоды вообще закрывают до весны. Правда, остаются автострады, проложенные через многочисленные туннели, включая 17-километровый Сен-Готард — второй в мире по протяженности (после норвежского Лаэрдаля). Но все эти блага цивилизации появились здесь только в XIX и XX веках с изобретением динамита и прочими достижениями прогресса. А в 1799 году добраться в Швейцарию из Италии можно было только перевалами. Что же заставило русского фельдмаршала податься с армией в горы в столь неподходящее время? Как вообще суворовских «чудо-богатырей» занесло в Италию, а потом в Швейцарию?
Исторический экскурс
С 1792 года в Европе бушевала война старорежимных монархий с революционной Францией. Трезвомыслящая Екатерина II не скупилась на проклятия в адрес революции, но вступать в драку не торопилась. Пользуясь тем, что державы-конкуренты увязли в борьбе с Французской республикой, она окончательно подчинила Польшу и занялась обустройством Крыма и Кубани, отбитых у Турции. Только в 1796 году Екатерина согласилась отправить против французов 60-тысячную армию Суворова, но внезапно умерла. Ее наследник, император Павел, занятый упрочением престола, отменил поход, поругался со строптивым фельдмаршалом и сослал его в имение Кончанское. Однако к 1799 году французская угроза усилилась. Бонапарт завоевал Италию, а потом отправился в Египет. Экспорт революции вышел за пределы Западной Европы. Россия укрепляла побережье Черного моря, опасаясь десанта. Павел счел, что настал момент бросить «русскую карту» на игровой стол мировой политики. Россия присоединилась к Австрии, Англии, Турции и Неаполю, с тем чтобы вместе остановить распространение «заразы». Пройдя от Бреста до Вероны, наши войска вместе с австрийцами начали очищать от французов Италию. Русских было в несколько раз меньше, чем австрийцев, но во главе союзной армии стоял Суворов. На его назначении главнокомандующим настояли союзники, уговорив Павла вернуть полководца из ссылки. При Адде, Треббии и Нови Суворов разгромил Моро, Макдональда и Жубера — лучших французских генералов того времени, не считая Наполеона, конечно. Теперь он готовился штурмовать Геную.
Находя, хотя и не без труда, общий язык с австрийскими солдатами и офицерами, Суворов конфликтовал с гофкригсратом — Придворным военным советом Габсбургской империи (с функциями Генерального штаба). Главную роль в нем играли министры и дипломаты, уверенные, что лучше боевых генералов разбираются в стратегии и потому путавшие карты не только чужаку Суворову, но и своим полководцам. Канцлер Тугут имел собственный взгляд на кампанию, который разделяли англичане — премьер Питт и министр иностранных дел Гренвилл. Эта троица и придумала на ходу альтернативный суворовскому план масштабного наступления на Францию всеми силами коалиции. Согласно ему англичане при поддержке русского корпуса генерала Германа высаживались в Голландии, австрийцы должны были ударить с юга, из Италии, а русские — в центре, из Швейцарии. Павел, довольный, что русским отводится значительная роль, согласился. Так Суворов оказался в Альпах.
</div>
</div>
<!-- ************** заголовок **************** -->
<div id="header">
<!--<embed src="../pictyre/shapka.swf" width="800px" height="180px">-->
</div>
<!-- ************** Левая панель ************************* -->
<div id="lev_pan">
</div>
<!-- ************** Правая панель ************************* -->
<div id="prav_pan">
</div>
<!-- ************** Подвал ************************* -->
<div id="podval">
</div>
</body>
</html>
Стиль
body,div{
margin: 0 auto;
padding: 1% 0 2% 0;
font-family:Arial;
}
html,body{
height:100%;
background:#FFAB00;
color:#2E2E2E;
}
/*----------------------------------------------------*/
/*Вся страница*/
#container {
position: relative;
margin: 0 auto;
width: 800px;
height:100%; /*для IE*/
min-height:100%;
background: #72B1D1;
}
/*----------------------------------------------------*/
/*Центр*/
#central {
position: absolute;
background: url(../pictyre/kont_centr.jpg) repeat-y;
background-color:#3A7999;
top:180px;
left:136px;
width: 481px;
height:100%;
}
/*Техт*/
#content{
position: absolute;
top:0px;
left:25px;
width:440px;
}
/*----------------------------------------------------*/
/*Шапка*/
#header {
position: absolute;
top:0px;
left:0px;
background: url(../pictyre/shapka.jpg) no-repeat;
width: 800px;
height: 180px;
}
/*----------------------------------------------------*/
/*Левая панель*/
#lev_pan {
position: absolute;
background: url(../pictyre/menushka.jpg) no-repeat;
background-color:#afdcfe;
top:180px;
left:0px;
width: 136px;
height:100%;
}
/*----------------------------------------------------*/
/*Правая панель*/
#prav_pan {
position: absolute;
top:180px;
left:617px;
background: url(../pictyre/prav_osn.jpg) repeat-y;
background-color:#afdcfe;
width: 183px;
height:100%;
border-width:1px;
border-style:
}
/*----------------------------------------------------*/
/*Подвал*/
#podval {
background: url(../pictyre/podval.jpg) no-repeat bottom;;
background-color:#3A6CA6;
width: 800px;
height: 125px;
}
Исправлено -=potkot=- (20.04.09 23:10)
Offline
#20 21.04.09 14:21
Re: CSS+PHP блочная верстка
-=potkot=-, ты объясни народу зачем выставляешь жестко 100%?
смотри... ты браузер и тебе говорят "растяни до 100%", а ты думаешь, а это сколько? но ты не дурак и умеешь это посчитать... выставляешь эти 100%... и с чего это ты должен после всего этого еще делать растягивание?
тебе уже написали:
Угрюмый кебаб написал(а):
а автору порекомендовал бы заменить «height:100%» на «min-height:100%; _height:100%»
Offline
#21 22.04.09 22:47
Re: CSS+PHP блочная верстка
Тянется нормально) Спасибо всем. Но теперь такая сложность. Две колонки (div ами сделаны) в одной техт в другой форма для входа и пр. Когда текста много, первая тянется все нормально. Как сделать, что бы и вторая тянулась за первой. т.е. были всегда одной длинны?
Offline
#22 22.04.09 23:17
Re: CSS+PHP блочная верстка
ну если бы ие не был бы таким консервативным — display: table | table-cell
а так — ну может и есть способы, но все обходные. А вообще я не понимаю стремления верстать всё без таблиц. Обычно это как раз и заканчивается мозголомством с подгонкой под разные браузеры
Offline
#23 22.04.09 23:19
Re: CSS+PHP блочная верстка
Я просто учусь) хочу как нарисовал, так и сверстать без таблиц)
Offline
#24 23.04.09 14:34
Re: CSS+PHP блочная верстка
чтобы присутствовать в авангарде верстки и не слушать старичков рекомендовал бы начинать с http://ua.php.net/manual/en/book.dom.php
Offline
#25 23.04.09 14:52
#26 23.04.09 18:25
Re: CSS+PHP блочная верстка
A-Lex,
Код: php:
<?php //создаем объект $doc = new DOMDocument('1.0', 'windows-1251'); //добавим тэг html $html = $doc->createElement("html"); //добавим тег body $body = $doc->createElement("body"); //добавим тэг h1 и надпись $text = $doc->createTextNode('Привет, Хостел!'); $h1 = $doc->createElement("h1"); $h1->appendChild($text); //сформируем html $body->appendChild($h1); $html->appendChild($body); $doc->appendChild($html); //вывод на экран echo $doc->saveHTML();
Offline
#27 23.04.09 18:30
#28 23.04.09 19:00
Re: CSS+PHP блочная верстка
почему недоумение? тема называется CSS+PHP блочная верстка. собственно, хтел ее увидеть и зашел в тему. возможно я вообще не шарю в пэхапе, но по моему мнению так и выглядит эта верстка
Offline
#29 23.04.09 19:12
#30 23.04.09 20:20
#31 23.04.09 20:58
#32 24.04.09 08:05
Re: CSS+PHP блочная верстка
Antony, сорь, никого не хотел задеть, я в положительном смысле :)
Offline
