Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Настройка отображения div блока (https://javascript.ru/forum/dom-window/39762-nastrojjka-otobrazheniya-div-bloka.html)

m1haluc4 11.07.2013 01:26

Настройка отображения div блока
 
Всем доброго времени суток! Я поставил перед собой задачу сделать так, чтобы объект в данном случае div с классом main отображался ниже рабочей области экрана, проблема в то что верхняя часть сайта имеет position : absolute в следствие чего данный div накладывается на этот блок, чего я пытаюсь избежать. Пришла мысль с помощью screen определить высоту экрана и вставить это значение в отступ от верхней точки сайта, НО что я не читал, как не пытался написать скрипт , ну ни как не получается , уже 3 день не могу решить это проблему. Помогите с решением пожалуйста. :)

skrudjmakdak 11.07.2013 08:33

код с хтмл пожалуйста

m1haluc4 11.07.2013 09:01

Вот это меню блок который привязан к нижней части экрана:
<ul id="cbp-tm-menu" class="cbp-tm-menu">

 <li>
 <a href="#">Добавить матриеал</a>
 </li>
 <li>
 <a href="$HOME_PAGE_LINK$">Домой</a>
 </li>
 <li>
 <a href="#">Каталог файлов</a>
 <ul class="cbp-tm-submenu">
 <li><a href="#" class="cbp-tm-icon-archive">Sorrel desert</a></li>
 <li><a href="#" class="cbp-tm-icon-cog">Raisin kakadu</a></li>
 <li><a href="#" class="cbp-tm-icon-location">Plum salsify</a></li>
 <li><a href="#" class="cbp-tm-icon-users">Bok choy celtuce</a></li>
 <li><a href="#" class="cbp-tm-icon-earth">Onion endive</a></li>
 <li><a href="#" class="cbp-tm-icon-location">Bitterleaf</a></li>
 <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
 </ul>
 </li>


</ul>


А это вид материалов, который мне нужно, чтобы отображался ниже рабочей части экрана:
<div class="main">
 
 <section>
 <div><p><a class="ssulka" href="">Название чего либо</a><br><img src="ссылка на изображение"></p></div>
 </section>
</div>

skrudjmakdak 11.07.2013 09:06

Цитата:

Сообщение от m1haluc4 (Сообщение 261691)
проблема в то что верхняя часть сайта имеет position : absolute в следствие чего данный div накладывается на этот блок

я считаю, что если можно избежать js, то лучше избежать.. лучше сверстать правильно

вот вы говорили, что ваш верхний блок имеет position : absolute. а нельзя ли его в релатив все таки сделать.. по какой причине он у вас абсолютный

ОлегА 11.07.2013 16:37

где верхняя часть сайта? весь хтмл давайте

m1haluc4 11.07.2013 23:57

Вот весь html код:
<div class="cbp-af-header">
 <div class="cbp-af-inner">
 <h1>KhU.com</h1>
 <nav>
 
 <a id="showLeft">Мини чат</a>
 <a id="showRight">Правый блок</a>
 <a href="#">Главная</a>


 
 </nav>
 </div>
</div>

<br />

<ul id="cbp-tm-menu" class="cbp-tm-menu">

 <li>
 <a href="#">Добавить матриеал</a>
 </li>
 <li>
 <a href="http://test-knu.ucoz.com/">Домой</a>
 </li>
 <li>
 <a href="#">Каталог файлов</a>
 <ul class="cbp-tm-submenu">
 <li><a href="#" class="cbp-tm-icon-archive">Sorrel desert</a></li>
 <li><a href="#" class="cbp-tm-icon-cog">Raisin kakadu</a></li>
 <li><a href="#" class="cbp-tm-icon-location">Plum salsify</a></li>
 <li><a href="#" class="cbp-tm-icon-users">Bok choy celtuce</a></li>
 <li><a href="#" class="cbp-tm-icon-earth">Onion endive</a></li>
 <li><a href="#" class="cbp-tm-icon-location">Bitterleaf</a></li>
 <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Pepper tatsoi</a>
 <ul class="cbp-tm-submenu">
 <li><a href="#" class="cbp-tm-icon-archive">Brussels sprout</a></li>
 <li><a href="#" class="cbp-tm-icon-cog">Kakadu lemon</a></li>
 <li><a href="#" class="cbp-tm-icon-link">Juice green</a></li>
 <li><a href="#" class="cbp-tm-icon-users">Wine fruit</a></li>
 <li><a href="#" class="cbp-tm-icon-earth">Garlic mint</a></li>
 <li><a href="#" class="cbp-tm-icon-location">Zucchini garnish</a></li>
 <li><a href="#" class="cbp-tm-icon-mobile">Sea lettuce</a></li>
 </ul>
 </li>
 <li>
 <a href="#">Sweet melon</a>
 <ul class="cbp-tm-submenu">
 <li><a href="#" class="cbp-tm-icon-screen">Sorrel desert</a></li>
 <li><a href="#" class="cbp-tm-icon-mail">Raisin kakadu</a></li>
 <li><a href="#" class="cbp-tm-icon-contract">Plum salsify</a></li>
 <li><a href="#" class="cbp-tm-icon-pencil">Bok choy celtuce</a></li>
 <li><a href="#" class="cbp-tm-icon-article">Onion endive</a></li>
 <li><a href="#" class="cbp-tm-icon-clock">Bitterleaf</a></li>
 </ul>
 </li>
</ul>

<div id="cbp-qtrotator" class="cbp-qtrotator">
 <span class="cbp-qtprogress"></span>
 <div class="cbp-qtcontent">

 <blockquote>
 <p>Ваш работодатель не несет ответственности за вашу заработную плату, это ваша ответсвенность. Ибо ваш работо датель не властвует над вашей шкалой ценностей. Но вы властвуете!</p> <p>Вы должны нести ответсвенность за себя. Вы не в силах изменить обстоятельства, времена годаили направление ветра, но вы можете изменить себя. Вот это то, за что вы действительно отвечаете. Вы не несете ответа за созвездия, но вы имеет руководство над тем, что вам читать, какие новые навыки развивать, какие новые занятия посещать.</p>
 <footer>Познавательные цитаты</footer>
 </blockquote>
 </div>
 <div class="cbp-qtcontent">
 <img src="images/2.jpg" alt="img02" />
 <blockquote>
 <p>Успех нельзя поймать. Успех можно привлечь, становясь лучше. <br /> Нетерпение и жадность одинаково убийственны для успеха. <br /> Сколько следует пытаться? До тех пор пока. Пока не достигнете успеха. <br /> Некоторые люди сеют весной и уходят летом. Если вы взяли работу на один сезон, доведите ее до конца. Вы не обязаны оставаться навсегда, но задержитесь хотя бы до тех пор, пока не закончите начатое.</p>
 <footer>Познавательные цитаты</footer>
 </blockquote>
 </div>
 
 </div>
 </div>

<br /><!--/U1AHEADER1Z-->

 
 <div class="main" style="position: absolute;">
 
 <section>
 <div><p><a class="ssulka" href="">lolololololololololololololololololololo</a><br><img src="http://cdn.tympanus.net/codrops/wp-content/uploads/2013/01/FlippingCircleSlideshow.jpg?84cd58"></p></div>
 </section>
 <section>
 <div><p><a class="ssulka1" href="">lolololololololololololololololololololo</a><br><img src="http://cdn.tympanus.net/codrops/wp-content/uploads/2013/01/FlippingCircleSlideshow.jpg?84cd58"></p></div>
 </section>
 <section>
 <div><p>Cardigan gluten-free photo booth pug, occupy ethnic bicycle rights disrupt ennui jean shorts art party raw denim Carles Tonx artisan. Freegan aesthetic skateboard, forage iPhone ugh umami tumblr McSweeney's chillwave biodiesel vinyl pitchfork gentrify asymmetrical. Sartorial synth wayfarers, freegan pork belly post-ironic ennui salvia direct trade shoreditch Wes Anderson pitchfork. Mumblecore Truffaut american apparel, Austin single-origin coffee post-ironic tofu retro Vice fanny pack narwhal Neutra skateboard 90's. Kogi sartorial post-ironic gentrify helvetica McSweeney's Schlitz, mustache 8-bit polaroid hella flexitarian viral kale chips tote bag. Banh mi PBR typewriter Banksy. Beard messenger bag deep v, keffiyeh lo-fi umami four loko vinyl lomo hoodie wolf banh mi.</p></div>
 </section>
 <section>
 <div><p>Artisan thundercats blog, VHS asymmetrical Schlitz whatever High Life chambray semiotics synth. Mustache flannel McSweeney's Carles gastropub put a bird on it. Occupy Pinterest try-hard PBR Schlitz, biodiesel disrupt forage. +1 pop-up Tonx, Echo Park thundercats authentic try-hard. Mlkshk pork belly artisan messenger bag raw denim cardigan Austin Portland, bicycle rights tumblr blog you probably haven't heard of them. Single-origin coffee seitan blog Williamsburg mlkshk, leggings cred meggings selvage synth next level McSweeney's pug 90's. Intelligentsia skateboard wolf, pour-over cred gastropub bespoke kogi DIY synth 8-bit hella dreamcatcher blog.</p></div>
 </section>
 <section>
 <div><p>Farm-to-table four loko narwhal tattooed salvia Etsy. Odd Future craft beer pop-up, sustainable synth wayfarers helvetica lomo forage freegan Banksy. Typewriter Williamsburg direct trade, forage banh mi asymmetrical thundercats street art you probably haven't heard of them actually freegan cred chillwave mustache. Actually Pinterest gluten-free, roof party gastropub you probably haven't heard of them blog. Pinterest Odd Future post-ironic, Echo Park selfies narwhal bespoke dreamcatcher american apparel iPhone raw denim. Selvage hella mixtape, Neutra Etsy before they sold out YOLO art party leggings Wes Anderson bespoke. Austin letterpress plaid kale chips biodiesel Pinterest gastropub banjo ugh.</p></div>
 </section>
 
 </div>
 
 
 
 </div>


Когда вы открываете сайт вы должны видеть только верхнее фиксированное меню + ротатор цитат+ меню у которого значение позиционирования absoltue и значение выравнивание = bot:0; все остальное должно быть ровно ниже данного меню со значением bot:0;

Если ставлю блок с id="main" абсолютное позиционирование + некоторые корректировки в коде то отображается блок ниже рабочей области экрана, НО стиль вида материалов отображается только на пол экрана , а нужно чтобы ширина опубликованных материалов была на всю ширину экрана.

Ссылка на сайт, если требуется : Ссылка.

Chiz 12.07.2013 00:28

Не трогай позицию, настрой отступы.Пропиши margin-top, рмвный высоте верха сайта, для элемента с классом main

m1haluc4 12.07.2013 00:58

Да но ведь у каждого пользователя разный размер экрана ,у меня например большой монитор и соответственно , если я пропишу этот фиксированный отступ то если пользователь зайдет с ноутбука у которого экран в 1.5 раза меньше экран появится пустая зона на сайте , а мне нужно либо скрипт либо какой то другой способ, как определить текущее значение рабочей высоты экрана и вписать это значение в отступ от верхней точки

ОлегА 12.07.2013 08:15

ну попробуйте вычислять высоту экрана пользователя и подстраивать ваш main под его экран
jquery
$(document).ready(function(){   
    $(document).find('.main').css('top', screen.height);
})

без jquery

onload = function(){
   main = document.getElementsByClassName('main')[0]
   main.top = screen.height
}


но и здесь есть подводные камни, если текст в вашей верхней части экрана дойдет до низу экрана, то он тупо налезит на ваш main, поэтому думаю лучше сделать фиксированной высоту верхней части сайта обернув его в div например, а у нижнего убрать позицию

m1haluc4 14.07.2013 15:12

Спасибо :) сейчас буду пробовать!


Часовой пояс GMT +3, время: 18:15.