Сайт вылезает за границу экрана

leealex · May 14, 2010

Здравствуйте, помогите пожалуйста найти косяк, сверстал сайт http://haski.leearts.ru и ширина сайта справа почему-то увеличилась, хотя никакие элементы не вылезают за края, т.е. ширина сайта почему то увеличилась, несмотря на то, что контент находится в пределах заданной ширины. Тупо фон справа добавляется.

html

<?php
/**
 * @copyright	Copyright (C) 2008 - 2010 LeeArts - Создание сайтов.
 * http://leearts.ru
 * admin@leearts.ru
 */

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
	<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/leearts/css/template.css" type="text/css" />
</head>
<body>
<div class="top">
<div class="tmenu">
<div class="ttmenu">
<jdoc:include type="modules" name="hormenu" />
</div>
</div>
<div class="lmenu">
<div class="llmenu">
<jdoc:include type="modules" name="leftmenu" />
</div>
</div>
<div class="slides">
<jdoc:include type="modules" name="slides" />
</div>
<div class="overlay">

<div class="search">
<jdoc:include type="modules" name="search" />
</div>
</div>
</div>
<div class="mid">
<div class="pencil"></div>
</div>
<div class="bot1">
<div class="left">
<jdoc:include type="modules" name="left" />
</div>
<div class="cont">
<jdoc:include type="component" />
</div>
</div>
<div class="bot3">
<div class="footer">
<jdoc:include type="modules" name="footer" />
</div>
<div class="cr"><a href="http://leearts.ru" target="_blank"alt="LeeArts - Создание сайтов, хостинг, регистрация доменов"><img src="templates/leearts/images/blank.png"></a>
</div>
</div>
</body>
</html>

CSS

/* TOP */

body {
margin: 0 0;
padding: 0 0;
background: url(../images/grass.jpg);
}

img {
border: none;
}

.top {
width: 1100px;
height: 550px;
background: url(../images/top.png);
margin: 0 auto;
z-index: 1;
}

.tmenu {
position: relative;
left: 97px;
top: 30px;
z-index: 10;
}

.ttmenu {
display: inline;
z-index: 10;
}

.ttmenu .menu li {
width: 163px;
height: 41px;
float: left;
background: url(../images/button.png) 0px -41px no-repeat;
list-style: none;
text-align: center;
}

.ttmenu .menu li a:link, .ttmenu .menu li a:visited {
width: 163px;
height: 41px;
padding-top: 3px;
font-size: 25px;
color: #49302d;
text-decoration: none;
float: left;
}

.ttmenu .menu li a:hover {
width: 163px;
height: 41px;
background: url(../images/button.png) 0px 0px no-repeat;
float: left;
color: #ebd3b0;
}

.lmenu {
position: relative;
top: 150px;
left: -871px;
float: left;
z-index: 10;
}

.llmenu .menu li.item11 {
width: 41px;
height: 172px;
list-style: none;
background: url(../images/but1.png) 0px 0px no-repeat;
margin-bottom: 5px;
}

.llmenu .menu li.item11:hover {
width: 41px;
height: 172px;
list-style: none;
background: url(../images/but1.png) -41px 0px no-repeat;
margin-bottom: 5px;
}

.llmenu .menu li.item12 {
width: 41px;
height: 172px;
list-style: none;
background: url(../images/but2.png) 0px 0px no-repeat;
margin-bottom: 5px;
}

.llmenu .menu li.item12:hover {
width: 41px;
height: 172px;
list-style: none;
background: url(../images/but2.png) -41px 0px no-repeat;
margin-bottom: 5px;
}

.llmenu .menu li a:link, .llmenu .menu li a:visited{
font-size: 1px;
padding-bottom: 150px;
padding-left: 20px;
padding-right: 20px;
text-decoration: none;
}

.slides {
position: relative;
left: -14px;
top: -299px;
z-index: 1;

}

.overlay {
position: relative;
top: -768px;
left: 76px;
width: 920px;
height: 470px;
background: url(../images/overlay.png);
z-index: 2;
}

.search {
position: absolute;
top: 217px;
left: 375px;
width: 200px;
z-index: 3;
}

.inputbox {
background: none;
border: none;
color: #a58c64;
font-size: 18px;
font-family: Times;
}

.pencil {
position: absolute;
top: 320px;
right: 120px;
background: url(../images/pencil.png);
width: 41px;
height: 520px;
}

/* MIDDLE */

.mid {
width: 1100px;
height: 137px;
background: url(../images/mid.png);
margin: 0 auto;
}

/* BOTTOM */

.bot1 {
width: 1100px;
min-height: 500px;
background: url(../images/bot1.png);
margin: 0 auto;
overflow:auto;
}

.bot3 {
width: 1100px;
height: 144px;
background: url(../images/bot3.png);
margin: 0 auto;
}

.left {
margin-top: 20px;
margin-left: 80px;
float: left;
width: 140px;
}

.left a:link, .left a:visited{
color: #49302d;
font-size: 16px;
text-decoration: none;
}

.left a:hover {
color: #b08273;
font-size: 16px;
text-decoration: none;
border-bottom: 1px solid #b08273;
}

.cont {
margin-top: 20px;
padding-left: 20px;
width: 750px;
float: left;
border-left: 1px solid #999;
color: #543d3a;
}

.footer {
width: 900px;
margin: 0 auto;
text-align: center;
padding-top: 30px;
}

.footer a:link, .footer a:visited{
color: #49302d;
font-size: 16px;
text-decoration: none;

}

.footer a:hover {
color: #b08273;
font-size: 16px;
text-decoration: none;
}

.footer .mainlevel {
padding-left: 20px;
padding-right: 20px;
border-left: 1px solid #49302d;
}

.cr {
width: 100px;
position: relative;
top: 20px;
left: 750px;
}

/* Additional CSS */

#current {
width: 163px;
height: 41px;
background: url(../images/button.png) 0px 0px no-repeat;
}

#current a:link, #current a:visited {
color: #ebd3b0;
}

я этот эффект конечно убрал заключив весь сайт в див и указав ему ширину 1100 пикс и атрибут оверфлоу: хидден, но ведь так не должно быть, что-то же вылезает за пределы.

psywalker · May 14, 2010

Релатив оставляет за собой место после сдвига. Значит задача: Убрать релатив или сделать абсолют.

psywalker · May 14, 2010

Не вижу косяка, у меня справа всё отлично. Где, кто, и какой браузер?

leealex · May 14, 2010

понял в чем косяк, но не знаю как его избежать ))

справа вылезло потому что у меня там был элемент который я позиционированием сдвинул влево и визуально он как бы на месте был, но его позиция осталась справа за экраном, хотя сам элемент сдвинут внутрь сайта. Как сделать так чтобы его "законная позиция" не разбивала сайт?

Не вижу косяка, у меня справа всё отлично. Где, кто, и какой браузер?

справа я убрал.

Вот сейчас взгляните в само низу под подвалом теперь вытянулось из-за листика который сечас справа под книгой. Т.е. изначально листик был в самом низу под сайтом, позиционированием я его сдвинул вверх и вправо, но его позиция прежняя разбила сайт снизу, как этого избежать?

у листика позиция relative

leealex · May 14, 2010

епрст, как все просто было, спасибо большое! Теперь все ровненько

psywalker · May 14, 2010

епрст, как все просто было, спасибо большое! Теперь все ровненько

Отлично. Рад был помочь.

an70n · May 16, 2010

Не пойму зачем делать ширину не стандартную и вообще фиксированную.

width: 1100px;
}

не занаю, хотя бы 1024рх чтоли..

leealex · May 17, 2010

ширина не стандартная, согласен но что плохого в фиксированности?

Searcher · May 17, 2010

ширина не стандартная, согласен но что плохого в фиксированности?

Плохо то, что размер сайта фиксированный, а разрешения мониторов и размеры окон броузеров у всех посетителей разный. Ширина экрана 1024px еще очень много у кого встречается на стационарных компах, я уж не говорю про нэтбуки и ноутбуки. Но делать фикс, конечно, проще.

leealex · May 17, 2010

сайт нормально смотрится на мониторах с разрешением от 1024х1280 все что меньше это уже каменный век, а на больших вполне прилично смотрится

и на девятнашке смотрел и на 22-дюймовом, на всех нормально

Edited May 17, 2010 by leealex

Searcher · May 17, 2010

Вопрос в задаче. Если вы хотите чтобы везде смотрелось отлично, то используется либо резиновая, либо адаптивная разметка, а то и комбинированную можно забацать )) Только тогда работы в 2 раза больше будет.

Если вам достаточно нормального отображения, а клиенту не хочется тратить больше денег, то фикс под 1024 - самое оно. И так как сделано - нормально, все можно прочесть, хотя текст блекловат - напрягаться приходится... Сойдет, не парься. ))

Sign In

Сайт вылезает за границу экрана

Question

Link to comment

Share on other sites

10 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

Join the conversation

Обсуждения

Important Information