Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.07.2013, 00:26
Новичок на форуме
Отправить личное сообщение для m1haluc4 Посмотреть профиль Найти все сообщения от m1haluc4
 
Регистрация: 11.07.2013
Сообщений: 5

Настройка отображения div блока
Всем доброго времени суток! Я поставил перед собой задачу сделать так, чтобы объект в данном случае div с классом main отображался ниже рабочей области экрана, проблема в то что верхняя часть сайта имеет position : absolute в следствие чего данный div накладывается на этот блок, чего я пытаюсь избежать. Пришла мысль с помощью screen определить высоту экрана и вставить это значение в отступ от верхней точки сайта, НО что я не читал, как не пытался написать скрипт , ну ни как не получается , уже 3 день не могу решить это проблему. Помогите с решением пожалуйста.
Ответить с цитированием
  #2 (permalink)  
Старый 11.07.2013, 07:33
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

код с хтмл пожалуйста
Ответить с цитированием
  #3 (permalink)  
Старый 11.07.2013, 08:01
Новичок на форуме
Отправить личное сообщение для m1haluc4 Посмотреть профиль Найти все сообщения от m1haluc4
 
Регистрация: 11.07.2013
Сообщений: 5

Вот это меню блок который привязан к нижней части экрана:
<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>
Ответить с цитированием
  #4 (permalink)  
Старый 11.07.2013, 08:06
Профессор
Отправить личное сообщение для skrudjmakdak Посмотреть профиль Найти все сообщения от skrudjmakdak
 
Регистрация: 27.04.2012
Сообщений: 1,410

Сообщение от m1haluc4 Посмотреть сообщение
проблема в то что верхняя часть сайта имеет position : absolute в следствие чего данный div накладывается на этот блок
я считаю, что если можно избежать js, то лучше избежать.. лучше сверстать правильно

вот вы говорили, что ваш верхний блок имеет position : absolute. а нельзя ли его в релатив все таки сделать.. по какой причине он у вас абсолютный
Ответить с цитированием
  #5 (permalink)  
Старый 11.07.2013, 15:37
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

где верхняя часть сайта? весь хтмл давайте
Ответить с цитированием
  #6 (permalink)  
Старый 11.07.2013, 22:57
Новичок на форуме
Отправить личное сообщение для m1haluc4 Посмотреть профиль Найти все сообщения от m1haluc4
 
Регистрация: 11.07.2013
Сообщений: 5

Вот весь 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" абсолютное позиционирование + некоторые корректировки в коде то отображается блок ниже рабочей области экрана, НО стиль вида материалов отображается только на пол экрана , а нужно чтобы ширина опубликованных материалов была на всю ширину экрана.

Ссылка на сайт, если требуется : Ссылка.
Ответить с цитированием
  #7 (permalink)  
Старый 11.07.2013, 23:28
Аспирант
Отправить личное сообщение для Chiz Посмотреть профиль Найти все сообщения от Chiz
 
Регистрация: 18.04.2012
Сообщений: 43

Не трогай позицию, настрой отступы.Пропиши margin-top, рмвный высоте верха сайта, для элемента с классом main
Ответить с цитированием
  #8 (permalink)  
Старый 11.07.2013, 23:58
Новичок на форуме
Отправить личное сообщение для m1haluc4 Посмотреть профиль Найти все сообщения от m1haluc4
 
Регистрация: 11.07.2013
Сообщений: 5

Да но ведь у каждого пользователя разный размер экрана ,у меня например большой монитор и соответственно , если я пропишу этот фиксированный отступ то если пользователь зайдет с ноутбука у которого экран в 1.5 раза меньше экран появится пустая зона на сайте , а мне нужно либо скрипт либо какой то другой способ, как определить текущее значение рабочей высоты экрана и вписать это значение в отступ от верхней точки
Ответить с цитированием
  #9 (permalink)  
Старый 12.07.2013, 07:15
Аватар для ОлегА
Профессор
Отправить личное сообщение для ОлегА Посмотреть профиль Найти все сообщения от ОлегА
 
Регистрация: 25.08.2011
Сообщений: 420

ну попробуйте вычислять высоту экрана пользователя и подстраивать ваш 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 например, а у нижнего убрать позицию
Ответить с цитированием
  #10 (permalink)  
Старый 14.07.2013, 14:12
Новичок на форуме
Отправить личное сообщение для m1haluc4 Посмотреть профиль Найти все сообщения от m1haluc4
 
Регистрация: 11.07.2013
Сообщений: 5

Спасибо сейчас буду пробовать!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Перемещение div блока Deself Элементы интерфейса 5 18.05.2012 13:26
Фиксация блока DIV при сворачивании другого блока DIV kacnepbI4 jQuery 2 04.04.2011 13:15
Два блока div разъезжаются при скроллинге окна браузера. call007 jQuery 0 03.04.2011 15:21
Скрытие блока div и его составляющих pomuk123 Events/DOM/Window 6 14.02.2011 09:31
Скрытие, показ определённого div блока. Flashton Events/DOM/Window 5 11.04.2010 22:44