Появляется горизонтальная прокрутка прокрутка

AlexSF

Давно я тут
678
68 / 0
В споре истина рождается

Появляется горизонтальная прокрутка прокрутка

« : 23.05.2010, 15:21:20 »

Всем доброго времени суток.
Делаю свой первый шаблон руками.
Сделал скилет на дивах все было нормально. Выставил позиции модулей и появилась горизонтальная прокрутка ( на всех браузерах ). Не большая пикселей 50-80 , но уж очень не приятно.
Помогите побороть такую беду.

Записан

Задаёте вопрос - не забудьте приложить ссылку на проблемный сайт
При проблеме с CSS рекомендую использовать Mozilla Firefox и её плагин FireBug
И по максимуму изучите, или поставьте в закладки - http://htmlbook.ru/css
Notepad++ поможет почти в любом деле

AlexSF

Давно я тут
678
68 / 0
В споре истина рождается

Re: Появляется горизонтальная прокрутка прокрутка

« Ответ #1 : 23.05.2010, 16:50:35 »

Понимаю не видя код сложно. Поэтому выкладываю:

Цитировать

<body>
<div class="wrapptrs">
<div class="Header">
<div id="Wrapper">
<div id="Header">
   <div id="begsroka">
   <div class="begsroka">
     <jdoc:include type="modules" name="user1" style="xhtml" />
      </div>
   <div class="mpoisk">
     <jdoc:include type="modules" name="user2" style="xhtml" />
   </div>
</div>
      <div class="logo_left">Здесь располагается содержимое class "logo_left"</div>
<div class="logo_right">
<jdoc:include type="modules" name="banner" style="xhtml" />
</div>
<div class="pustotop">Здесь располагается содержимое class "pustotop"</div>
<div id="MenuWrapper">
   <jdoc:include type="modules" name="top" style="xhtml" />
</div>
<div class="pustotop">
<jdoc:include type="modules" name="breadcrumb" />
</div>
</div>
<div id="MainBody">
<div id="AllColooms">
<div id="ColText">
<div class="TCM">
<jdoc:include type="modules" name="banner-2" style="xhtml" />
</div>
<div class="postcontent">
<jdoc:include type="component" />
</div>
<div class="TCM">
<jdoc:include type="modules" name="bottom" style="xhtml" />
</div>
</div>
<div id="ColMK">
<div class="TCM">
<jdoc:include type="modules" name="user3" style="xhtml" />
         </div>
         <div class="ColMenuL">
           <jdoc:include type="modules" name="left" style="xhtml" />
         </div>
    <div class="ColMenuR">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
    <div class="TCM">
      <jdoc:include type="modules" name="user4" style="xhtml" />
    </div>
</div>
</div>
<div id="niz_module">
<div id="niz_1">
<jdoc:include type="modules" name="user5" style="xhtml" />
</div>
<div id="niz_2">
<jdoc:include type="modules" name="user6" style="xhtml" />
</div>
<div id="niz_3">
<jdoc:include type="modules" name="user7" style="xhtml" />
</div>
</div>
<div class="pustotop">
<jdoc:include type="modules" name="syndicate" style="xhtml" />
</div>
</div>
<div class="nigcherta"></div>
<div id="footer">
<div id="copy">2010  @   <?php echo $mainframe->getCfg('sitename') ;?></div>
</div>
<div id="debug">
<jdoc:include type="modules" name="debug" style="xhtml" />
</div>
</div>
</div>
</div>
</body>

И CSS в придачу

Цитировать

html{height:100%;}

body{
   margin:0 auto;
   height:100%;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 0.8em;
   color: #fff;
   /*background-color:#fff;*/
   padding: 0;
   background-color: #262626;
   background-image: url('../images/Page-BgTexture.jpg');
   background-repeat: repeat;
   background-attachment: scroll;
   background-position: top left;
   text-align: center;
}

/* Heading Formatting */
h1 {font-size:1.9em;line-height: 0.8em;font-weight: 900;color: #f00;}
h2 {font-size:1.7em;line-height: 0.8em;font-weight: 900;color: #f00;}
h3 {font-size:1.5em;line-height: 0.8em;font-weight: 900;color: #fff;}
h4 {font-size:1.4em;line-height: 0.8em;font-weight: 900;color: #fff;}
h5 {font-size:1.3em;line-height: 0.8em;font-weight: 900;color: #fff;}
h6 {font-size:1.2em;line-height: 0.8em;font-weight: 900;color: #fff;}

/*links*/
a:link {color: #CC6600;}
a:hover {color: #659FDE;}
a:visited {color: #CC6600;}
img {border: 0 none;}

/* Clears Divs */
.clr{clear: both;}

/* ####################### END GENERAL SETTINGS ############################ */
/* top bar nav on top of template good for staic links link sections etc. layout.css */
.topbar{
color:#fff;
background-color:#222;
/*ajust the top bar height*/
height:30px;
text-align:right;
text-decoration:none;
padding-top:5px;
padding-right:5px;
display:block;
white-space:nowrap;
}
.topbar a:link{ color:#FFF;}
.topbar a:visited{color:#FFF;}
.topbar a:hover{color:#FFF;}

/* Wrapper Footer Trick */
#Wrapper {
   width: 95%;
   margin-right: 2.5%;
   margin-left: 2.5%;   /*padding-right: 2.5%;
   padding-left: 2.5%;*/
}
.wrapptrs {
height:auto !important;
max-width: 95%px;
min-width: 800px
}
/* Heading Color and Height control*/
.Header {
   background-image:url(../images/redpan-bg.gif);
   background-repeat: repeat-x;
   height:auto !important;
}
#Header {
   /*background-image:url(../images/redpan-bg.gif);
   background-repeat: repeat-x;*/
   height: 250px /*auto !important*/;
}
#begsroka {
   font: 1em Verdana, Geneva, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
   height: 45px;
   width: 100%;
}
.begsroka {
   font: 1em Verdana, Geneva, sans-serif;
   text-align: center;
   margin: 0;
   padding: 10px 0 0;
   float: left;
   height: 35px;
   width: 81%;
}
.mpoisk {
   font: 1em Verdana, Geneva, sans-serif;
   text-align: left;
   margin: 0;
   padding: 10px 0 0;
   float: right;
   height: 35px;
   width: 18.5%;
}
.logo_left {
   font: 1em Verdana, Geneva, sans-serif;
   margin: 0;
   padding: 0;
   float: left;
   width: 24%;
   border: 1px solid #000;
   height: 120px;
}
.logo_right {
   font: 1em Verdana, Geneva, sans-serif;
   margin: 0;
   padding: 0;
   float: right;
   width: 75%;
   border: 1px solid #000;
   height: 120px;
}
.pustotop {
   margin: 0;
   padding: 0;
   float: left;
   height: 25px;
   width: 100%;
   text-align: left;
}
/*Menu Wrapper to cover the width if needed*/
#MenuWrapper{
   background-color:#333;
   width:99%;
   height:30px;
   white-space:nowrap;
   /*need for FF div not working right*/
   margin:0 auto 0 0;
   padding: 5px 0 0 10px;
   float: left;
   text-align: left;
}

/* Main Body Padding */
#MainBody {
   float: left;
   width: 100%;
}
.MainBody{padding:8px;}
#AllColooms {
   margin: 0;
   padding: 0;
   float: left;
   width: 100%;
}
#ColText {
   margin: 0;
   padding: 0;
   float: left;
   width: 60%;
   border: 1px solid #CCC;
   background: #FFF;
}
#ColMK {
   float: right;
   width: 39%;
   /*min-width: 339px;*/
   margin: 0;
   padding: 0;
   border: 1px solid #CCC;
   background: #FFF;
}
.postcontent {
   text-align: left;
   float: left;
   width: 100%;
}
.TCM {
   float: left;
   width: 100%;
   margin: 0;
   padding: 0;
}
.ColMenuL {
   float: left;
   width: 50%;
   height: 100%;
}
.ColMenuR {
   height: 100% auto;
   width: 49%;
   float: right;
}
#niz_module {
   width: 100%;
   float: left;
}
#niz_1 {
   padding: 8px;
   float: left;
   width: 31%;
}
#niz_2 {
   padding: 8px;
   float: left;
   width: 31%;
}
#niz_3 {
   padding: 8px;
   float: right;
   width: 31%;
}
.nigcherta {
   background: #F00;
   margin: 0px;
   padding: 0px;
   float: left;
   height: 7px;
   width: 100%;
}
#footer {
   width: 100%;
}
#copy {
   text-align: center;
   padding-top: 10px;
}
#debug {
   width: 99%;
   float:left;
   margin-top: 0;
   margin-right: auto;
   margin-bottom: 0;
   margin-left: auto;
   padding-left: 8px;
}

Записан

Задаёте вопрос - не забудьте приложить ссылку на проблемный сайт
При проблеме с CSS рекомендую использовать Mozilla Firefox и её плагин FireBug
И по максимуму изучите, или поставьте в закладки - http://htmlbook.ru/css
Notepad++ поможет почти в любом деле

AlexSF

Давно я тут
678
68 / 0
В споре истина рождается

Re: Появляется горизонтальная прокрутка прокрутка

« Ответ #2 : 23.05.2010, 16:52:22 »

Прошу строго не судить . Ведь делаю, что то подобное в первые.

Записан

Задаёте вопрос - не забудьте приложить ссылку на проблемный сайт
При проблеме с CSS рекомендую использовать Mozilla Firefox и её плагин FireBug
И по максимуму изучите, или поставьте в закладки - http://htmlbook.ru/css
Notepad++ поможет почти в любом деле

effrit

Легенда
10132
1118 / 13
effrit.com

Re: Появляется горизонтальная прокрутка прокрутка

« Ответ #3 : 23.05.2010, 16:54:09 »

это всё очень не гуманно и не интересно

надо ссылку на сайт выкладывать в таких случаях. завести полигон на бесплатном хостинге, если нет ещё своей площадки

Записан

Вредные советы свежеиспечённым форумчанам | SimpleInformer - модуль календаря/реминдера
Сервис для чистки HTML таблиц из Word и Excel | Extra ToC - плагин автогенерации оглавления страницы

AlexSF

Давно я тут
678
68 / 0
В споре истина рождается

Re: Появляется горизонтальная прокрутка прокрутка

« Ответ #4 : 24.05.2010, 18:15:40 »

Приношу свои извинения.
Прокрутка появлялась на Денвере.
Залил в сеть пока норма.

Касательно данного шаблона возник другой вопрос. Как привязать длину колонки модулей к длине контента?

Спасибо

Записан

Задаёте вопрос - не забудьте приложить ссылку на проблемный сайт
При проблеме с CSS рекомендую использовать Mozilla Firefox и её плагин FireBug
И по максимуму изучите, или поставьте в закладки - http://htmlbook.ru/css
Notepad++ поможет почти в любом деле

danik.html

Живу я здесь
2650
353 / 4

Re: Появляется горизонтальная прокрутка прокрутка

« Ответ #5 : 24.05.2010, 19:17:36 »

к сожалению используя CSS и HTML , блочную верстку, кроссбраузерно и без кучи div'ов - никак.
Есть вариант js, equal columns вроде называется. Или же использовать <table /> что печально. Еще, иногда можно сделать ложные колонки, через задание фона. обертывающему блоку...

Записан

【Мегапак Virtuemart】:
• метатеги (description,keywords)
• заголовки (title)
• красивые алиасы (чпу) без тормозов и дублей!

Горизонтальная прокрутка Автор web3.0	Ответов: 4 Просмотров: 1363	15.10.2018, 13:51:17 от web3.0
Прокрутка блока с position:fixed Автор Ragivort	Ответов: 2 Просмотров: 4690	24.08.2016, 15:23:49 от Ragivort
не появляется scroll на iphone Автор iliya777	Ответов: 3 Просмотров: 1491	01.07.2016, 12:25:46 от iliya777
Появляется класс element style поверх старого Автор NisXan	Ответов: 16 Просмотров: 2133	29.05.2016, 18:46:36 от vipiusss
Прокрутка содержимого сайта.(как сделать что бы фон не менялся а контент крутился вниз?) Автор ekonomizer	Ответов: 3 Просмотров: 4511	03.02.2016, 12:25:34 от monek

Появляется горизонтальная прокрутка прокрутка - Вопросы по CSS

Новости Joomla

👩‍💻 События плагинов и порядок их срабатывания при работе с пользовательскими полями Joomla и использовании FieldsHelper.

🏆 Открыто голосование за Joomla в премии CMS Critic People’s Choice Awards 2025

👩‍💻 Релиз JoomGallery 4.3.0 - компонент галереи изображений для Joomla.

AlexSF

Появляется горизонтальная прокрутка прокрутка

AlexSF

Re: Появляется горизонтальная прокрутка прокрутка

AlexSF

Re: Появляется горизонтальная прокрутка прокрутка

effrit

Re: Появляется горизонтальная прокрутка прокрутка

AlexSF

Re: Появляется горизонтальная прокрутка прокрутка

danik.html

Re: Появляется горизонтальная прокрутка прокрутка

Похожие темы