Jump to content
  • 0

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

olejan

Asked by olejan,

 Share

Question

olejan Explorer

olejan

Posted
Posted

делаю макет в 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>

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

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%;

}

Link to comment
Share on other sites

14 answers to this question

Recommended Posts

  • 0
psywalker Explorer

psywalker

Posted
Posted 

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

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

Link to comment
Share on other sites
  • 0
olejan Explorer

olejan

Posted
  • Author
Posted

то ведь комментарии,я не думаю, что что-то поменяется,но попробую, судя по всему єто проблемі со старой оперой с версией меньше 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%;
}

Link to comment
Share on other sites
  • 0
sigma77 Explorer

sigma77

Posted
Posted

olejan,

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

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

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

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

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

Link to comment
Share on other sites
  • 0
olejan Explorer

olejan

Posted
  • Author
Posted

olejan,

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

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

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

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

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

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

Link to comment
Share on other sites
  • 0
olejan Explorer

olejan

Posted
  • Author
Posted

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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to question listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy

  I accept