[Ishanuee]

В моём случае сайт-визитка служит площадкой для экспериментов. И со своими опытами далеко не ушёл. Нарисовал дизайн, сверстал сайт, порезал на футеры.пхп, хедеры.пхп... в indexe всё <?php include 'header.php';?>. разрезанный сайт собрал в шалон. но вот беда. как же мне сделать рабочее меню, чтобы переключались странички? так как сайт лёгкий, и в отсутствии надобности в каком-то либо движке наткнулся на такое решение. http://jsfiddle.net/gxy45/1386/ и оно меня устраивает. однако присобачить так и не смог

исходники
https://www.dropbox.com/s/yy1d6tjku47oaq4/dd.zip?dl=0

сам сайт
http://dinnerdesigner.hol.es/

вроде получилось схлопнуть все блоки, но по нажатию на меню ничего не меняется... =\ помогите пожалуйста

[Hispanic]

на самом деле все очень просто сделать на php
в ссылках пишешь что то типа <a href="?page=name">
в index.php пишешь

$name=$_GET["page"];

if (isset($name)) {
include "$name";
} else {
include "main";
}

то есть в зависимости от значения переменной page в область контента вставляется тот или иной файл, если значение пустое (только загрузилась страница) то вставляется главная.

Код не проверял, но врод должно работать

я так первые сайты делал))

[Ishanuee]

Во, всё работает! Спасибо огромное. и следующий камешек )) . Футер прилипить к нижнему краю страницы нужно с помощью абсолютного позиционирования? (пробую, пока не выходит)

[Hispanic]

немного сложнее

http://csstemplater.com

[Ishanuee]

На http://csstemplater.com сгенерил шаблон, подставил, поэксперементировал, всё равно не получается

вот мой css код

#footer {
width: 100%;
height: 100px;
margin-top: 90px;
display: block;
background: #575757;
position: relative;
}

вот index.php

<?php include 'header.php';?>
<div id="wrapper">
<?php
$name=$_GET["page"];

if (isset($name)) {
include "$name";
} else {
include "main.php";
}
;?>
</div>
<?php include 'footer.php';?>

вот footer.php

<div id="footer">
<div id="contfoot">
<div id="footleft">
<div id="imgfooter">
<img src="images\footer.png" width="50" height="50" alt="Логотип">
</div>
<div id="textfooter">
<p>OH, YES! THIS IS FOOTER-R-R-R-r-r-r-...!</p>
</div>
</div>
</div>
</div>
</body>
</html>

[Hispanic]

ну а на сгенерированном шаблоне получилось?

в общем там система такая
wrapper=100% height и он выталкивает footer за экран, соответственно footer назначается отрицательный margin на высоту footer ну а wrapper padding на высоту футера, вот и все

[Ishanuee]

Всё.. я сам дурак))

position: absolute;
bottom: 0;

Спасибо за разъеснение и ценные советы!

Правда не совсем то что нужно =( если текста боле чем сейчас, то футер ляжет поверх него

Добавлено через 43 минуты

http://dinnerdesigner.hol.es/?page=about.php

всё ещё никак не могу справиться ((

Добавлено через 3 минуты

посмотрите пожалуйста
https://www.dropbox.com/s/pfpnkh8xjw...ooter.zip?dl=0

Пробывал по схеме, всё никак не могу грамотно сделать
http://jsfiddle.net/Alex83/qktyU/

[Hispanic]

сгенерируй в html генераторе, и переверстай если не выйдет совсем, я если честно никогда не заморачивался, у тебя на сайте стоит position:absolute, мож в этом проблема, а так врод должно работать...

Добавлено через 2 минуты

body, html {
width: 100%;
height: 100%;
}

.wrapper {
width: 100%;
min-height: 100%;
padding-bottom:70px;
}

header {
width: 100%;
height: 70px;
background: black;
color: #fff;
}

footer {
width: 100%;
height: 50px;
background: #000;
color: #fff;
margin-top: -50px;
}

ну у меня работает, единственное я дал padding-bottom:70px;

[Ishanuee]

ладно... пойду искать в чём дело

Добавлено через 19 часов 26 минут

В общем решил отписать, может кому понадобится... дело было в

position:absolute

и не только. Совет: проверяйте синтаксис и наследуемые правила элементов

[Ishanuee]

В продолжение к мучению данной веб страницы (http://dinnerdesigner.hol.es) рассмотрим элемент "меню". Как оно у меня устроено. есть див на 100% ширины экрана и в нём ещё один див с меню максимальной шириной 800 и минимальной 600. всё вродебы ок, но при приближении к 600 пикселям последний пункт меню прыгает вниз. =\ почему? помогите плз. вот вырезка из css стиля

snapshot_140925_130255.jpg

#menuline {
width: 100%;
height: 49px;
display: block;
background: #575757;
padding: 0;
}

#menu {
margin-top: 0;
margin-bottom: 0;
margin-right: auto;
margin-left: auto;
height: 49px;
max-width: 800px;
min-width: 600px;
width: 100%;

}

#menu ul {
font: 14px;
display: inline-table;
position: relative;
}

#menu li {
float: left;
list-style: none;
width: 200px;
text-align: center;
}

#menu li a {
text-decoration: none;
display: block;
color: #ffffff;
background: #575757;
padding: 10px;
}

#menu li a:hover {
color: #000000;
background: #F0B356 ;
}

#menu ul ul {
display: none;
position: absolute;
top: 100%;
}

#menu ul ul li {
float: none;
position: relative;
}

#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
}

#menu ul li:hover > ul {
display: block;
}

пробывал и так

#menu li {
float: left;
list-style: none;
min-width: 150px;
max-width: 200px;
text-align: center;
}

и блоки после такого становятся по ширине текста в них.