Наместване на дивове

M

miro_94

Registered
Здравейте.Имам малко проблемче с разместване на дивове.Ето вижте http://mirovit.no-ip.org/GeoMilev/Untitled-1.html

Ето .html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link href="img/style.css" rel="stylesheet" type="text/css">
<title>Английска гимназия "Гео Милев" Русе</title>
<script type="application/javascript" language="javascript" src="img/script.js"></script>
</head>

<body onLoad="MM_preloadImages('img/000.jpg','img/001.jpg')">
<div class="header"></div>

<div class="menu"><img src="img/ag02.jpg" alt="" width="105" height="30" border="0" align="absmiddle"><a href="#"> Начало </a>|<a href="#"> Патрон на училището </a>|<a href="#"> Новини </a>|<a href="#"> Галерия </a>|<a href="#"> Контакти </a>|<a href="#"> История на гимназията </a></div>

<div class="left_01"><ul class="glossymenu">
<li><a href="#">Защо в АГ?</a></li>
<li><a href="#">Профилиращи предмети</a></li>
<li><a href="#">Общообразователни предмети</a></li>
<li><a href="#">Летописна книга</a></li>
<li><a href="#">Материална база</a></li>
<li><a href="#">Учители</a></li>
<li><a href="#">Учебен план</a></li>
<li><a href="#">Учебна програма</a></li>
<li><a href="#">Прием след 7 клас</a></li>
<li><a href="#">Библиотека</a></li>
<li><a href="#">Интеграционни връзки</a></li>
</ul>
<div class="style2" align="center"><br>Ученически постижения</div>
<ul class="glossymenu">
<li><a href="#">Олимпиади</a></li>
<li><a href="#">Състезания и конкурси</a></li>
<li><a href="#">Спортни постижения</a></li>
</ul>
<div class="style2" align="center"><br>Извънкласни дейности</div>
<ul class="glossymenu">
<li><a href="#">Проекти</a></li>
<li><a href="#">Театрални състави</a></li>
<li><a href="#">Клуб "Дебати"</a></li>
<li><a href="#">Спортни секции</a></li>
<li><a href="#">Училищно радио</a></li>
<li><a href="#">Училищен вестник</a></li>
<li><a href="#">Бридж клуб</a></li>
</ul></div>
<div class="right_top">asd</div>
<div class="right_middle">
<p>a<br>
</p>
<p> </p>
<p> </p>
<p> </p>
</div>
<div class="right_bottom"></div>
<div class="left_bottom"> </div>
<div class="footer">adsasdfdadaf</div>

</body>
</html>
Увеличете...
и .css
@charset "windows-1251";
body, td, th {
font-size: 14px;
color: #333333;
}
/* CSS Document */

.header {
width: 800px;
height: 160px;
background-image: url('ag01.jpg');
margin-left:300px;
}
.menu {
background-image: url('ag03.jpg');
width: 800px;
vertical-align: baseline;
height: 30px;
margin-left: 300px;
}
.left_01 {
background-image: url('ag04.jpg');
font-family: "Palatino Linotype";
font-size: 14px;
margin-left:300px;
width:200px;
height:auto;
background-image:url('ag04.jpg');
background-repeat:repeat-y;
float: left;
}
.left_bottom {
background-image: url('ag10.jpg');
width: 200px;
height:auto;
margin-left:300px;
}
.right_top {
background-image: url('ag05.jpg');
padding-left: 50px;
background-repeat: no-repeat;
height: 40px;
width: 600px;
padding-top: 10px;
margin-left: 500px;
}
.right_middle {
background-image: url('ag08.jpg');
background-repeat: repeat;
height: auto;
width: 600px;
padding-left: 20px;
padding-right: 20px;
margin-left: 500px;
}
.right_bottom {
background-image: url('ag11.jpg');
width: 600px;
height: 25px;
margin-left: 500px;
background-repeat: no-repeat;
}
.glossymenu {
list-style-type: none;
margin: 0px 0;
padding: 0;
width: 200px;
border-bottom-width: 0;
}
.glossymenu li a {
background: white url('ag07.jpg') repeat-x bottom left;
font: 13px "Palatino Linotype";
color: #333;
display: block;
width: auto;
padding: 3px 0;
padding-left: 5px;
text-decoration: none;
}
.right_middle {
background-image: url('ag08.jpg');
background-repeat: repeat-x;
height: auto;
width: 600px;
}
* html .glossymenu li a { /*IE only. Actual menu width minus left padding of A element (10px) */
width: 200px;
}
.glossymenu li a:visited, .glossymenu li a:active {
color: #333;
}
.glossymenu li a:hover {
background-image: url('ag00.jpg');
color: #000;
}
a {
font-family: Palatino Linotype;
font-size: 14px;
color: #336699;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
background-color: #FFFFFF;
color: #000000;
}
a:active {
text-decoration: none;
}
.style1 {
font-weight: bold;
}
.style2 {
background-image: url('ag04.jpg');
font-family: "Palatino Linotype";
font-size: 14px;
font-weight: bold;
height: 50px;
width: auto;
}

.footer {
background-image: url('ag12.jpg');
width: 795px;
margin-left: 300px;
height: 20px;
padding-top: 5px;
margin-top: 0px;
padding-left: 5px;
}
Увеличете...
Бихте ли ми помогнали? :lol:
 
<div style="position:absolute; overflow:hidden; left:140px; top:0px; width:750px; height:249px;">

top:0px това е нагоре-надолу
left:140px колко на ляво да е
width:750px
height:249px
тези мисля че няма смисъл да ги обяснявам

дано ти помогне
 
emagi каза:
Докато не свикнете да ползвате позишъни, няма да стане!
Увеличете...

Никъде не е казано,че трябва да се ползват позишъни.Всичките дизайни,които съм кодира,се виждат еднакво под всички браузъри,но никъде не съм ползвал position.Аз ти препоръчвам 1 основен див,центиран или с маргин ако ти харесва така и в него елементите.
 
Съгласен съм с Фенстър, и искам да допълня , че най добре работи позишън абсолют да е в релатив.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе