Проблема с версткой на div(. Помогите плиииииз!

romik · March 2, 2008

Хотел создать свой первый сайт на дивах, но возникает ряд проблем: в разных браузерах страница отображается по-разному и некоректно.

В идиале сайт должен одинаково отображатся о этих браузерах, и 2 колонки с контентом должны ростягиватся содержимым, но не получается добиться этого ефекта. Укажите на ошибки, буду очень благодарен.

Заранее спасибо!

IE 7.0:

Opera:

Mozilla Firefox:

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

<html>
<head>
 <title>.: Морские прогулки на яхтах в Крыму :.</title>
 <META http-equiv=Content-Type content="text/html; charset=win-1251">
 <META content="Морские прогулки на яхтах в Крыму" name=description>
 <META content="Яхты, отдых, Крым, продажа, оренда яхт, Евпатория, Ялта, яхта, прогулка, дайвинг, рыбалка, жиль?" name=keywords>
 <META content="MSHTML 6.00.2600.0" name=GENERATOR>
 <link rel="STYLESHEET" type="text/css" href="style.css">
</head>
<body background="img/fon.gif" topmargin="0" rightmargin="0" marginwidth="0" marginheight="0" leftmargin="0" bottommargin="0">

 <center>
 <div align="left" id="main">
 <div id="top"> </div>
 <div id="head"> </div>
 <div id="navigation"> </div>
 <div id="head-bottom"> </div>
 <div id="bottom-navigation"> </div>

 <div id="img1"> </div>
 <div id="h3"><h3>Наши яхты</h3></div>
 <div id="img3"> </div>
 <div id="h1"><h1>Контент</h1></div>
 <div id="img4"> </div>
 <div id="img5"> </div>
 <div id="left" align="center">
 <p style="padding: 15px;" align="justify">wsjg ejjerjis uiwiehgej ejgejgbej sg у уwsjg ejjerjis uiwiehgej ejgejgbej sg у у</p>
 </div>
 <div id="img6"> </div>
 <div id="right">
 <p style="padding: 15px;" align="justify">wsjg ejjerjis uiwiehgej ejgejgbej sg у уwsjg ejjerjis uiwiehgej ejgejgbej sg у у</p>
 </div>
 <div id="img7"> </div>
 <div id="bottom"> </div>
 </div>
 </center>

</body>
</html>

TD {
 font-family:verdana; 
}
h1{
 font-family: verdana;
 font-size: 18;
 text-align : right;
 color: #36495a;
 font-style : normal;
 font-weight : 100;
 margin:0px;
 padding-right: 50px;
}
#h1{
 background-color: #ede9e9;
 width: 405px;
 height: 37px;
 float: left;
 padding:0px;
}
h3{
 font-family: verdana;
 font-size: 18;
 text-align : center;
 color: #36495a;
 font-style : normal;
 font-weight : 100;

}
#h3{
 background-image : url(img/img2.gif);
 background-repeat: repeat-x;
 width: 383px;
 height: 37px;
 float : left;
 padding: 0px;
 margin: 0px;
}
INPUT.order {
 BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-LEFT: silver 1px solid; WIDTH: 100%; BORDER-BOTTOM: silver 1px solid
}
TEXTAREA.order {
 BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-LEFT: silver 1px solid; WIDTH: 100%; BORDER-BOTTOM: silver 1px solid
}
SELECT.order {
 BORDER-RIGHT: silver 1px solid; BORDER-TOP: silver 1px solid; BORDER-LEFT: silver 1px solid; WIDTH: 100%; BORDER-BOTTOM: silver 1px solid
}
#main{
 width: 910px;
 text-align: left;
}
#top{
 background-image : url(img/top.jpg);
 width: 910px;
 height: 34px;

}
#head{
 background-image : url(img/head.jpg);
 width: 638px;
 height: 273px;
 float : left;
}
#navigation{
 background-image : url(img/navigation.jpg);
 width: 272px;
 height: 273px;
 float : left;
}
#head-bottom{
 background-image : url(img/bottom-head.jpg);
 width : 638px;
 height : 51px;
 float : left;
}
#bottom-navigation{
 background-image : url(img/bottom-navigation.jpg);
 width :272px;
 height: 51px;
 float : right;
}
#img1{
 background-image : url(img/img1.gif);
 width: 42px;
 height: 37px;
 float : left;
}
#img3{
 background-image : url(img/img3.gif);
 width: 35px;
 height: 37px;
 float: left;

}
#img4{
 background-image : url(img/img4.gif);
 width: 45px;
 height: 37px;
 float: right;
}
#img5{
 background-image : url(img/img5.gif);
 background-repeat : repeat-y;
 width: 42px;
 height: 100px;
 float: left;
 margin: 0px;
 padding: 0px;

}
#left{
 background-color : #8cd5fa;
 width: 383px;
 height: 100px;
 float: left;
}

#img6{
 background-image : url(img/img6.gif);
 background-repeat : repeat-y;
 width: 35px;
 height: 100px;
 float: left;
}
#img7{
 background-image : url(img/img7.gif);
 background-repeat : repeat-y;
 width:46px;
 height: 100px;
 float: right;
}
#right{
 background-color: #ede9e9;
 width: 405px;
 height: 100px;
 float: left;
}
#bottom{
 background-image : url(img/bottom.jpg);
 width: 910px;
 height: 114px;
 clear : left;
}

Scrum · March 2, 2008

Что за манеры выкладывать весь сайт ?

локализуйте проблему.

Dimitry Wolotko · March 2, 2008

Вс? верно - полностью вашу в?рстку мало кто разбирать будет.

romik · March 2, 2008

Я дико извиняюсь, просто я новичок в дивах и не знаю что главное выложить, не знаю что важнее, а что нет. Прошу только указать на ошибку, чтобы я знал где трабл. Простите за некомпетентность.

yopopt · March 2, 2008

Судя по скринам у Вас проблема с float. Почитайте про него подробнее. В особенности про то, как он работает в ие и про "тр?хпиксельный баг".

romik · March 3, 2008

спасибо большое

Sign In

Проблема с версткой на div(. Помогите плиииииз!

Question

romik

Link to comment

Share on other sites

5 answers to this question

Recommended Posts

Scrum

Link to comment

Share on other sites

Dimitry Wolotko

Link to comment

Share on other sites

romik

Link to comment

Share on other sites

yopopt

Link to comment

Share on other sites

romik

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information