резиновый макет в 3 колонки, div

olejan · June 24, 2011

делаю макет в 3 колонки и в опере все не так как должно быть. в чем проблема?

html

<!--

To change this template, choose Tools | Templates

and open the template in the editor.

-->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Символика</title>

</head>

<body>

<div id="header">заголовок</div>

<div id="hor_menu">горизонтальное меню</div>

<div id="left">левый див</div>

<div id="right">правый див</div>

<div id="data">данные</div>

<div id="footer">подвал</div>

</body>

</html>

css

#header{

margin-left: 15%;

width: 70%;

height: 100px;

background-color: red;

}

* HTML #header {

margin-left: 20%;

width: 80.7%;

}

#hor_menu{

margin-left: 15%;

width: 70%;

height: 100px;

background-color: aquamarine;

}

* HTML #hor_menu {

margin-left: 20%;

width: 80.7%;

}

#left{

margin-left: 15%;

width: 10%;

height: 500px;

float: left;

background-color: yellow;

}

* HTML #left {

margin-left: 20%;

float: left;

}

#right{

width: 10%;

height: 500px;

margin-right: 15%;

float: right;

background-color: yellow;

}

* HTML #right {

position: relative;

margin-right: 15%;

float: right;

position: relative;

left: -6px;

}

#data{

margin-left: 25%;

margin-right: 25%;

width: 50%;

height: 500px;

background: yellowgreen;

}

* HTML #data {

position: relative;

left: -3px;

width: 100%;

}

#clear{

clear: both;

}

#footer{

margin-left: 15%;

width: 70%;

height: 100px;

background-color: red;

}

* HTML #footer {

margin-left: 20%;

width: 80.7%;

}

ctpz · June 24, 2011

подсказки вверху для кого? обрамляйте код в спец. теги

Bonzash · June 24, 2011

Нужна ссылка на образец как есть и как должно быть. Экстрасенсы только на ТНТ.

olejan · June 24, 2011

щас

Edited June 24, 2011 by olejan

psywalker · June 24, 2011

<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Символика</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="header">заголовок</div>
<div id="hor_menu">горизонтальное меню</div>
<div id="left">левый див</div>
<div id="right">правый див</div>
<div id="data">данные</div>
<div id="clear"></div>
<div id="footer">подвал</div>
</body>
</html>

Убери перед доктайпом всю лишнюю хрень

olejan · June 24, 2011

то ведь комментарии,я не думаю, что что-то поменяется,но попробую, судя по всему єто проблемі со старой оперой с версией меньше 9й,т. к. на 9 все норм

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>Символика</title>
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
      <div id="header">заголовок</div>
      <div id="hor_menu">горизонтальное меню</div>
            <div id="left">левый див</div>
      <div id="right">правый див</div>      
      <div id="data">данные</div>
      <div id="clear"></div>
      <div id="footer">подвал</div>
  </body>
</html>

#header{
    margin-left: 15%;
    width: 70%;
    height: 100px;
    background-color: red;
}

* HTML #header {
    margin-left: 20%;
    width: 80.7%;
}

#hor_menu{
    margin-left: 15%;
    width: 70%;
    height: 100px;
    background-color: aquamarine;
}

* HTML #hor_menu {
    margin-left: 20%;
    width: 80.7%;
}

#left{
    margin-left: 15%;
    width: 10%;
    height: 500px;
    float: left;
    background-color: yellow;
}

* HTML #left {
    margin-left: 20%;
    float: left;
}

#right{
    width: 10%;
    height: 500px;
    margin-right: 15%;
    float: right;
    background-color: yellow;
}

* HTML #right {
    position: relative;
    margin-right: 15%;
    float: right;
    position: relative;
    left: -6px;
}

#data{
    margin-left: 25%;
    margin-right: 25%;
    width: 50%;
    height: 500px;
    background: yellowgreen;

}

* HTML #data {
    position: relative;
    left: -3px;
    width: 100%;
}

#clear{
    clear: both;
}

#footer{
    margin-left: 15%;
    width: 70%;
    height: 100px;
    background-color: red;
}

* HTML #footer {
    margin-left: 20%;
    width: 80.7%;
}

sigma77 · June 24, 2011

olejan,

Ох и намудрил же...

Вот сравни со своим - http://jsfiddle.net/VTtPf/2/

Ну и эта ссылка не помешает - http://htmlbook.ru/layout

olejan · June 24, 2011

olejan,
Ох и намудрил же...
Вот сравни со своим - http://jsfiddle.net/VTtPf/2/
Ну и эта ссылка не помешает - http://htmlbook.ru/layout

спасибо) только в осле оно как-то неоч выглядит....

sigma77 · June 24, 2011

olejan,
Ох и намудрил же...
Вот сравни со своим - http://jsfiddle.net/VTtPf/2/
Ну и эта ссылка не помешает - http://htmlbook.ru/layout
спасибо) только в осле оно как-то неоч выглядит....

В каком? Ослов много. ИЕ7-9 выглядит как надо.

olejan · June 24, 2011

olejan,
Ох и намудрил же...
Вот сравни со своим - http://jsfiddle.net/VTtPf/2/
Ну и эта ссылка не помешает - http://htmlbook.ru/layout
спасибо) только в осле оно как-то неоч выглядит....
В каком? Ослов много. ИЕ7-9 выглядит как надо.

в седьмом отсупа слева нету и надо добавлять отдельнфй стиль для него

sigma77 · June 24, 2011

в седьмом отсупа слева нету и надо добавлять отдельнфй стиль для него

Аааа, так комментарий сверху убери и поставь полный доктайп. Это я у тебя забыла поправить.

olejan · June 24, 2011

в седьмом отсупа слева нету и надо добавлять отдельнфй стиль для него
Аааа, так комментарий сверху убери и поставь полный доктайп. Это я у тебя забыла поправить.

ммм...а как сделать полный доктайп?

Bonzash · June 24, 2011

sigma77 · June 24, 2011

ммм...а как сделать полный доктайп?

Читать очень внимательно от сюда и далее http://htmlbook.ru/samlayout/rezhimy-brauzerov

olejan · June 24, 2011

ммм...а как сделать полный доктайп?
Читать очень внимательно от сюда и далее http://htmlbook.ru/samlayout/rezhimy-brauzerov

спс)займусь)

Sign In

резиновый макет в 3 колонки, div

Question

Link to comment

Share on other sites

14 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information