Jump to content
  • Sign Up

rtl_one

Newbie
  • Posts

    13
  • Joined

  • Last visited

rtl_one's Achievements

Explorer

Explorer (1/14)

0

Reputation

  1. live: https://jsfiddle.net/5fL1xn9q/ Дублирую: div.wrapper { position: absolute; top: 0px; height: 500px; width: 600px; border: 4px outset grey; } div.title { position: absolute; top: 0px; height: 28px; width: 590px; border-bottom: groove 2px #aaa; padding: 5px 5px 5px 5px; line-height: 125%; background-color: green; } div.content1 { position: absolute; top: 40px; height: 455px; width: 590px; padding: 5px; overflow: auto; /* background-color: #ffffff; */ background-color: red; opacity: 10% } Тестовое окно Это еще одно окно. Значение атрибута z-index этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживаемых такую возможность множество строк для демонстрации прокрутки 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 По wrapper вопросов нет. Мы просто создаем объект высотой 500px и шириной 600px и делаем border 4px. Вопросы возникают далее. div.title: значит мы создаем хидер "окна", его размеры 28px + 2px border. Далее, т.к у нас width == 590px, то нам надо сделать padding-left: 5px, padding-right: 5px;. Ок, по ширине мы div.title растянули. Далее мы смотрим, сколько нам делать padding-top. А вот тут вопрос. По идее, div.wrapper border == 4px. Значит мы должны отступить...4px или 5px ? Далее div.content1: по ширине всё ясно. Мы делаем width 590px, и padding-left: 5px, padding-right:5px растягиваем объект до ширины 600px. Но по вертикали опять вопрос: мы смотрим, что у нас div.title равно 28px(height) + 2px(border) + 5px(padding-top) + 5px(padding-bottom) == 40px. Ок, сколько мы должны отступить top? 40px или 41px ? Я понимаю, что padding'om мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
  2. live: https://jsfiddle.net/5fL1xn9q/ Дублирую: div.wrapper { position: absolute; top: 0px; height: 500px; width: 600px; border: 4px outset grey; } div.title { position: absolute; top: 0px; height: 28px; width: 590px; border-bottom: groove 2px #aaa; padding: 5px 5px 5px 5px; line-height: 125%; background-color: green; } div.content1 { position: absolute; top: 40px; height: 455px; width: 590px; padding: 5px; overflow: auto; /* background-color: #ffffff; */ background-color: red; opacity: 10% } Тестовое окно Это еще одно окно. Значение атрибута z-index этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживаемых такую возможность множество строк для демонстрации прокрутки 1 2 3 4 5 6 7 8 9 0 1 2 3 4 5 6 7 8 9 0 По wrapper вопросов нет. Мы просто создаем объект высотой 500px и шириной 600px и делаем border 4px. Вопросы возникают далее. div.title: значит мы создаем хидер "окна", его размеры 28px + 2px border. Далее, т.к у нас width == 590px, то нам надо сделать padding-left: 5px, padding-right: 5px;. Ок, по ширине мы div.title растянули. Далее мы смотрим, сколько нам делать padding-top. А вот тут вопрос. По идее, div.wrapper border == 4px. Значит мы должны отступить...4px или 5px ? Далее div.content1: по ширине всё ясно. Мы делаем width 590px, и padding-left: 5px, padding-right:5px растягиваем объект до ширины 600px. Но по вертикали опять вопрос: мы смотрим, что у нас div.title равно 28px(height) + 2px(border) + 5px(padding-top) + 5px(padding-bottom) == 40px. Ок, сколько мы должны отступить top? 40px или 41px ? Я понимаю, что padding'om мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
  3. http://jsfiddle.net/2R7RR/ Как бы сделать так, чтобы footer прибивался к низу экрана, но как только middle будет больше чем экран, то тогда футер уходил за пределы экрана ?
  4. Как отцентровать wrapper внутри container 1) по горизонтали и вертикали ? 2) по горизонтали ? 3) по вертикали ? <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Html</title> <body> <style> * { margin:0; padding:0; } html,body { background: none; height: 100%; width: 100%; } .container { display: block; position: relative; height: 100%; margin: 0px auto 0; width: 1000px; background-color: black; } .wrapper { display: block; position: relative; height: 150px; width: 150px; margin: 0; background-color: blue; } </style> <div class="container"> <div class="wrapper"> </div> </div> </body> </head> </html>
  5. Итак есть футер, текст которого я хочу выравнять по центру <div id="footer_wrapper"> <div id="footer"> <div id="copyr">траляляляля, самый лучший проект</div> </div> </div> #footer_wrapper { position: relative; display: block; width: 100%; height:50px; } #footer { position: relative; display: block; height: 30px; width: 1002px; } #copyr { position: relative; display: block; height: 30px; width: 400px; } нужно выравнять #copyr внутри #footer по горизонтали и вертикали
  6. #user_menu_right ul li a:hover, #stylefour ul li a.current { background:url("/static/images/userbar.gif") repeat-x left -75px; } #user_menu_right li:nth-child(6) { background: url("/static/images/icons.png") no-repeat scroll 12px -71px transparent; } С обычными кнопками без беграунда все ок, но происходит перекрытие кнопки с беграундом.
  7. есть обьект div, внутри него еще один див который крутит показ банеров. <div id="carusel"> <div id="bannerRotator"> <ul> <!--<img src="123_files/1390x140&text=one.gif" alt="bannerImage1">--> <li rel="1" style="display: block; opacity: 0.828293;"> <a href="#"><img src="123_files/1390x140&text=one.gif" alt="bannerImage1"></a></li> <li style="display: list-item; opacity: 0.171707;" rel="2"> <a href="#"><img src="123_files/1390x140&text=two.gif" alt="bannerImage2"></a></li> </ul> <!--<div timeoutid="83" id="bannerNav"><a class="" rel="1" href="#"></a> <a class="active" rel="2" href="#"></a> <span class="pause"></span> <span href="#" class="play" style="display:none;"></span> </div></div>--> </div> #carusel { position: relative; height: 150px; width: 1400px; margin: 8px auto 0px; display: block; border: 1px solid rgb(204, 204, 204); } #bannerRotator { position: relative; height: 140px; width: 1390px; margin: 4px auto 0px; display: block; border: 1px solid rgb(204, 204, 204); } #bannerRotator ul li img { } #bannerRotator ul li { display: none; position: absolute; } Так вот в эксплорере центровка дива bannerRotator не работает. Сбивается на пару пикселей вправо и вниз. Если убрать ul li и поставить внутри bannerRotator <img src="123_files/1390x140&text=one.gif" alt="bannerImage1">, то центрирование имеджа внутри дива bannerRotator работает кроссбраузерно. Что я неправильно делаю ?
  8. Здравствуйте. Делаю панель на всю ширину экрана: #menu { background: url("/static/images/menu/menu.png") repeat-x scroll 0 0 transparent; position: relative; display: block; width: 100%; height:50px; font-size: 11px; } далее пытаюсь оставить место под лого: #logo{ position: relative; height: 40px; width: 300px; margin: 0; display: block; background-color: red; } угу, далее пытаюсь поставить рядом с лого еще один обьект, назовем его logo1 #logo1{ position: relative; height: 40px; width: 300px; margin: 0; display: block; background-color: red; } Так вот у меня съезжает logo1 под logo. А мне нужно рядом. Вообще как посоветуете строить всё это ?
  9. rtl_one

    jquery

    мы разве в разделе комерц ?
  10. rtl_one

    jquery

    в номере 1 появляются строки данных пользователь кликает на строке с данными в квадрате 1(данные должны динамически добавляться в нем) и кнопками >> или << перекидывает эти данные в квадрат 2 или 3
  11. rtl_one

    div верстка

    Перефразируйте свою мысль с помощью кода
  12. rtl_one

    div верстка

    <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>SomeSite - Главная</title> <!--<link rel="shortcut icon" href="favicon.ico" />--> <style type="text/css"> body { background: #121212; margin: 0px 135px 0px 135px; } #header { background: red; position: relative; clear: both; height: 120px; background-size: cover; } #main_menu { position: relative; display: block; height: 39px; font-size: 11px; font-weight: bold; background: blue; border-top: 4px solid rgb(179, 0, 0); } #main_menu ul { margin: 0px; padding: 0px; list-style-type: none; width: auto; } #main_menu ul li { display: block; float: left; margin: 0px; } #main_menu ul li a { display: block; float: left; color: rgb(102, 102, 102); text-decoration: none; padding: 11px 20px 0px; height: 23px; } #main_menu ul li a:hover, #stylefour ul li a.current { color: rgb(179, 0, 0); } #middle { background: green; position: relative; clear: both; height: 800px; } #left_panel { position: absolute; display: block; height: 750px; width: 166px; margin: 11px 0px 0px 12px; background: red; border: 1px solid #cccccc; font-size: 11px; font-weight: bold; } #left_panel_content { margin: 1px 2px 3px 400px; position: absolute; display: block; height: 300px; width: 150px; margin: 0; padding: 0; } #left_panel_content ul li a { margin: 1px 2px 3px -28px; text-decoration:none; text-shadow: 0 1px #FFFFFF; line-height:200%; } #user_menu { position: absolute; height: 40px; width: 801px; margin: 11px 2px 3px 184px; border: 1px solid #cccccc; background: blue; } #user_menu_content { position: absolute; margin: 13px 0px 0px 11px; } #user_menu_content ul,li { display: inline; font-size: 11px; font-weight: bold; font-family: Arial,Verdana,Helvitica,sans-serif; } #content_index { border: 1px solid #cccccc; position: absolute; display: block; margin: 61px 30px 40px 185px; width: 800px; height: 700px; background: blue; } #list_list { margin: 92px 2px 3px 31px; } #list_list a { text-align: center; color: #555555; display: inline-block; margin-bottom: 48px; margin-left: 20px; margin-right: 20px; text-decoration: none; text-shadow: 0 1px #FFFFFF; } #list_list a:hover { color: #AA0000; } #list_list a img { margin-top: 12px; } #list_list a span.g_text { display: block; font-size: 18px; margin-top: -45px; } #list_list a span.g_logo { border: 1px solid #B8B8B8; border-radius: 5px 5px 5px 5px; box-shadow: 1px 1px 2px #B8B8B8; display: block; height: 200px; margin-bottom: 10px; width: 200px; } #list_list a:hover .g_logo { background: none repeat scroll 0 0 rgba(0, 0, 0, 0.06); } #footer { background: blue; border-top: 1px solid #B8B8B8; box-shadow: 0 1px 0 0 #FBFBFB; font-size: 14px; height: 50px; /*margin: 22px auto 0;*/ } #copyr { color: #555555; padding-top: 15px; text-decoration: none; text-shadow: 0 1px #FFFFFF; } #footer_cont { height: 30px; margin: 0 auto; /*padding-left: 55px;*/ /*padding-right: 5px;*/ width: 790px; text-align: center; } </style> </head> <body> <div id="header"> </div> <div id="main_menu"> <ul> </ul> </div> <div id="middle"> <div id="left_panel"> <div id="left_panel_content"> </div> </div> <div id="user_menu"> <div id="user_menu_content"> </div> </div> <div id="content_index"> <div id="list_list"> </div> </div> </div> <div id="footer"> <div id="footer_cont"> <div id="copyr"> © 2012 SomeSite </div> </div> </div> </body> </html> Как оно должно выглядеть: На разных разрешениях естественно все плывет по причине отсутствия мозга у автора(т.е меня). Верстка говно - это есть факт. Это мои первые потуги связаные с версткой. Ранее с html и css знаком не был. Помогите привести в чувство эту верстку. Вообще по идее эта верстка должна выглядеть так же, как на скриншотах на любых разрешениях
  13. нужно сделать у ссылок вида <ul> <li><a href="/">Главная</a></li> ... </ul> которые находятся в панели при наведении мышью (hover) квадратный фон другого цвета(примерно так, как сделано у vk.com).
×
×
  • 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