Layout с вложени div - проблеми с Mozilla Firefox.

B

bbsnatch

Registered
Начинаещ съм в уеб програмирането :) Не мога да разбера защо на Mozilla Firefox не ми визуализира div-овете в последователността, която съм определил (в IE всичко е както трябва). Ще съм благодарен на малко помощ.

Код: 
<!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" xml:lang="en" lang="en">
<head>
	<title>divs</title>
	<link href="divss.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="body">
	<div class="header">
	</div>
	<div class="main">
	</div>
	<div class="right">
	</div>
	<div class="footer">
	</div>
	</div>
</body>
</html>

Код: 
div.body
 	{
	width: 750px;
	border: 5px solid;
	margin-left: auto;
	margin-right: auto;
	}
div.header
 	{
	width: 750px;
	height: 50px;
	border: 5px solid;
   margin-left: auto;
	margin-right: auto;
	}
div.main
 	{
	width: 470px;
	border: 5px solid;
	margin-left: 10px;
	float: left;
	margin-top: 10px;
	margin-bottom: 10px;
	}
div.right
 	{
   width: 190px;
	border: 5px solid;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
	float: right;
	}
div.footer
 	{
   width: 750px;
	height: 50px;
	border: 5px solid;
   margin-left: auto;
	margin-right: auto;
	}
:)
 
Пробвай това:
<!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" xml:lang="en" lang="en">
<head>
<title>divs</title>
<style type="text/css">
div.body
{
width: 760px;
height:170px;
border: 5px solid;
margin:0 auto;
}
div.header
{
width: 750px;
height: 50px;
border: 5px solid;
}
div.main
{
position:absolute;
width: 470px;
border: 5px solid;
margin-left: 10px;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
div.right
{
position:absolute;
width: 190px;
border: 5px solid;
margin-left:520px;
margin-top: 10px;
float: right;
}
div.footer
{
position:absolute;
margin-top:50px;
margin-left:0;
width: 750px;
height: 50px;
border: 5px solid;
}
</style>
</head>

<body>
<div class="body">
<div class="header"> </div>
<div class="main"> </div>
<div class="right"> </div>
<div class="footer"> </div>
</div>
</body>
</html>
Увеличете...
И един съвет:яко четене на уроци за HTML и CSS :D :D :D
 
На мястото на
div.body
{
width: 750px;
border: 5px solid;
margin-left: auto;
margin-right: auto;
}
div.header
{
width: 750px;
height: 50px;
border: 5px solid;
margin-left: auto;
margin-right: auto;
}
div.main
{
width: 470px;
border: 5px solid;
margin-left: 10px;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
div.right
{
width: 190px;
border: 5px solid;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
float: right;
}
div.footer
{
width: 750px;
height: 50px;
border: 5px solid;
margin-left: auto;
margin-right: auto;
}
Увеличете...
Пробвай да сложиш едно много тактично решение и може и да стане. Аз го ползвам лично него. За CLASS ползвай . а за ID ползвай #т.е. кода ти да стане така
Код: 
.body
    {
   width: 750px;
   border: 5px solid;
   margin-left: auto;
   margin-right: auto;
   }
.header
    {
   width: 750px;
   height: 50px;
   border: 5px solid;
   margin-left: auto;
   margin-right: auto;
   }
.main
    {
   width: 470px;
   border: 5px solid;
   margin-left: 10px;
   float: left;
   margin-top: 10px;
   margin-bottom: 10px;
   }
.right
    {
   width: 190px;
   border: 5px solid;
   margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
   float: right;
   }
.footer
    {
   width: 750px;
   height: 50px;
   border: 5px solid;
   margin-left: auto;
   margin-right: auto;
   }

ИЛИ ТАКА
Код: 
#body
    {
   width: 750px;
   border: 5px solid;
   margin-left: auto;
   margin-right: auto;
   }
#header
    {
   width: 750px;
   height: 50px;
   border: 5px solid;
   margin-left: auto;
   margin-right: auto;
   }
#main
    {
   width: 470px;
   border: 5px solid;
   margin-left: 10px;
   float: left;
   margin-top: 10px;
   margin-bottom: 10px;
   }
#right
    {
   width: 190px;
   border: 5px solid;
   margin-right: 10px;
   margin-top: 10px;
   margin-bottom: 10px;
   float: right;
   }
#footer
    {
   width: 750px;
   height: 50px;
   border: 5px solid;
   margin-left: auto;
   margin-right: auto;
   }
 
djmum4e каза:
На мястото на
Увеличете...
един съвет от мен, не го приемай лично.
когато не си сигурен в отговора си по добре не го давай че може да обаркаш човека.
а ти поставям задачка да ми кажеш каква е разликата между
1) div.richt {}
2) .right {}
3) #right

@alex95_bg_2 в неговия случай .body е клас а не <body>
 
Казах, че аз така ги ползвам. Той използва CLASS т.е. аз като използвам клас в CSS слагам пред примерно RIGHT ако искам да е CLASS .right ако искам да е ID #right. Айде и аз да задам въпрос ако е div.right не е ли за CLASS на DIV описал съм това което съм написал. Не съм искал да объркам човека. Аз до сега като съм си правил по този начин CSS не съм имал проблеми с разминаването. На всички браузъри, говорим за използваните : MOZILLA, OPERA, IE5,6,7 не ми се е разминавало никога нищо, за това написах по този начин кода за CSS.
 
Благодаря за отговорите :) Явно проблемът с визуализацията идва от това, че искам да вложа div без да задавам височина за да се нагажда рамката спрямо съдържанието. Когато задам точни височини всичко е наред, защото са в такова съотношение, че не се застъпват.. Явно firefox не разчита div-овете като вложени за разлика от IE - поне такъв извод си правя... Може би по-удачно ще е да използвам таблица. За момента не търся ефектен сайг, а просто удобен за управление layout, в който лесно да добавям линкове към тексове и кратки описания.
Поздрави.
 
ползвал си маргин + флот
ИЕ6 увеличава 2но маргин-а най вероятно проблема ти идва от там.
ползвай паддинг
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе