Jump to content
  • 0

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


leealex
 Share

Question

Здравствуйте, помогите пожалуйста найти косяк, сверстал сайт 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 пикс и атрибут оверфлоу: хидден, но ведь так не должно быть, что-то же вылезает за пределы.

Link to comment
Share on other sites

10 answers to this question

Recommended Posts

  • 0

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

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

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

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

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

  • 0

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

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

Edited by leealex
Link to comment
Share on other sites

  • 0

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

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

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

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