Страница на DIV.

corol · October 4, 2008

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

В Mozille два вертикальных div-а растягиваются по размеру страницы, а в IE обтягивают текст. Это нормально?

body {

overflow: hidden;

padding: 0;

margin: 0;

width: 100%;

height: 100%;

}

#header {padding: 0;

margin: 0;

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 50px;

overflow: hidden;

border: 1px solid #ccc;

background-color: #ffd;

}

#left {

padding: 0;

margin: 0;

position: absolute;

top: 100px;

left: 20px;

bottom: 20px;

overflow: auto;

width: 200px;

border: 1px solid #aff;

}

#right {

padding: 0;

margin: 0;

position: absolute;

top: 100px;

left: 240px;

right: 20px;

bottom: 20px;

overflow: auto;

border: 1px solid #fcc;

}

.top-menu {

list-style: none;

}

.top-menu li{

float: left; width: 15%;

list-style: none;

}

.top-menu li ul{

margin: 0px;

padding: 0px;

margin-top: 5px;

display: none; }

.top-menu li ul li{

float: none;

}

</STYLE>

</head>

<body>

<li>Первый</li>

<li>Второй</li>

<li>Третий

<ul>

<li>Третий 1</li>

<li>Третий 2</li>

</ul>

</li>

<li>Четвёртый

<ul>

<li>Четвёртый 1</li>

<li>Четвёртый 2</li>

<li>Четвёртый 3</li>

<li>Четвёртый 4</li>

</ul>

</li>

<li>Пятый</li>

<li>Шестой</li>

</ul>

</div>

<p>Навигация</p></div>

<p>Информация</p></div>

</body>

rus · October 4, 2008

1. Свой код оформляйте соответствующими тегами BB кода этого форума.

2. А доктайп не пробовали добавить?

Вот 4 типа (строгие и переходные):

тип первый строгий:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

тип второй переходный:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

тип третий строгий:

<!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">

тип четвертый переходный:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

Выбирайте на ваш вкус и приоритет верстки.

corol · October 4, 2008

1. Свой код оформляйте соответствующими тегами BB кода этого форума.
2. А доктайп не пробовали добавить?
Вот 4 типа (строгие и переходные):
тип первый строгий:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
тип второй переходный:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
тип третий строгий:
<!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">
тип четвертый переходный:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Выбирайте на ваш вкус и приоритет верстки.

Какое отношение доктайп имеет к позиционированию меню?

rus · October 4, 2008

я посмотрел ваш код, в отображении никаких багов не обнаружил кроме доктайпа, а потому не понимаю чего вы хотите?

Вставьте доктайп и поймете.

Какое отношение доктайп имеет к позиционированию меню?

Никаких подменю у вас не обнаружил

corol · October 4, 2008

я посмотрел ваш код, в отображении никаких багов не обнаружил кроме доктайпа, а потому не понимаю чего вы хотите?
Вставьте доктайп и поймете.
Никаких подменю у вас не обнаружил

Доктайп я поставил, но никаких изменений в поведении страницы не увидел. (может опыта мало). Меню 2-го уровня это Третий 1 и 2, Четвёртый 1-2-3-4. И хочу я чтобы эти Третий 1-2 и Четвёртый 1-2-3-4. Не прятались в родном Div-е, а показывались на фоне нижнего. Прочитал про слои, но ничего не добился.

rus · October 4, 2008

так что ли что-то непонял?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type=text/css>
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

#header {
padding: 0; 
margin: 0;
position: absolute;
top: 0px; 
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #ccc;
background-color: #ffd; 
}

#left {
padding: 0;
margin: 0;
position: absolute; 
top: 100px;
left: 20px;
bottom: 20px;
overflow: auto; 
width: 200px;
border: 1px solid #aff;

}
#right {
padding: 0;
margin: 0;
position: absolute; 
top: 100px;
left: 240px;
right: 20px;
bottom: 20px;
overflow: auto;
border: 1px solid #fcc;
} 
.top-menu { 
list-style: none;
}
.top-menu li{ 
float: left; width: 15%;
list-style: none;
}
.top-menu li ul{
margin: 0px;
padding: 0px;
margin-top: 5px;
}

.top-menu li ul li{
float: none;
}

</style>
</head>

<body>
<div id="header">
<ul class="top-menu">
<li>Первый</li>
<li>Второй</li>
<li>Третий

<ul>
<li>Третий1</li>
<li>Третий2</li>
</ul>
</li>

<li>Четвёртый
<ul>
<li>Четвёртый1</li>
<li>Четвёртый2</li>

<li>Четвёртый3</li>
<li>Четвёртый4</li>
</ul>
</li>
<li>Пятый</li>
<li>Шестой</li>
</ul>
</div>
<div id="left">
<p>Навигация</p></div>
<div id="right">
<p>Информация</p></div>
</body>
</html>

corol · October 4, 2008

так что ли что-то непонял?

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Документ без названия</title>
<style type=text/css>
body {
overflow: hidden;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}

#header {
padding: 0; 
margin: 0;
position: absolute;
top: 0px; 
left: 0px;
width: 100%;
height: 100%;
overflow: hidden;
border: 1px solid #ccc;
background-color: #ffd; 
}

#left {
padding: 0;
margin: 0;
position: absolute; 
top: 100px;
left: 20px;
bottom: 20px;
overflow: auto; 
width: 200px;
border: 1px solid #aff;

}
#right {
padding: 0;
margin: 0;
position: absolute; 
top: 100px;
left: 240px;
right: 20px;
bottom: 20px;
overflow: auto;
border: 1px solid #fcc;
} 
.top-menu { 
list-style: none;
}
.top-menu li{ 
float: left; width: 15%;
list-style: none;
}
.top-menu li ul{
margin: 0px;
padding: 0px;
margin-top: 5px;
}

.top-menu li ul li{
float: none;
}

</style>
</head>

<body>
<div id="header">
<ul class="top-menu">
<li>Первый</li>
<li>Второй</li>
<li>Третий

<ul>
<li>Третий1</li>
<li>Третий2</li>
</ul>
</li>

<li>Четвёртый
<ul>
<li>Четвёртый1</li>
<li>Четвёртый2</li>

<li>Четвёртый3</li>
<li>Четвёртый4</li>
</ul>
</li>
<li>Пятый</li>
<li>Шестой</li>
</ul>
</div>
<div id="left">
<p>Навигация</p></div>
<div id="right">
<p>Информация</p></div>
</body>
</html>

Показывает так. Большое спасибо. Утром буду разбираться в Ваших изменениях. А почему сейчас страница открывается и меню тоже всё открыто. И можно ещё вопрос по IE. Mozilla левый и правый DIV-ы показывает по их размерам, а IE обрамляет только текст. Это нормально? Заранее благодарен.

Sign In

Страница на DIV.

Question

corol

Link to comment

Share on other sites

6 answers to this question

Recommended Posts

rus

Link to comment

Share on other sites

corol

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

corol

Link to comment

Share on other sites

rus

Link to comment

Share on other sites

corol

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information