rtl_one
-
Posts
13 -
Joined
-
Last visited
rtl_one's Achievements
Explorer (1/14)
0
Reputation
-
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 мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
-
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 мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
-
http://jsfiddle.net/2R7RR/ Как бы сделать так, чтобы footer прибивался к низу экрана, но как только middle будет больше чем экран, то тогда футер уходил за пределы экрана ?
-
Как отцентровать 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>
-
Итак есть футер, текст которого я хочу выравнять по центру <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 по горизонтали и вертикали
-
#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; } С обычными кнопками без беграунда все ок, но происходит перекрытие кнопки с беграундом.
-
есть обьект 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 работает кроссбраузерно. Что я неправильно делаю ?
-
Здравствуйте. Делаю панель на всю ширину экрана: #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. А мне нужно рядом. Вообще как посоветуете строить всё это ?
-
мы разве в разделе комерц ?
-
в номере 1 появляются строки данных пользователь кликает на строке с данными в квадрате 1(данные должны динамически добавляться в нем) и кнопками >> или << перекидывает эти данные в квадрат 2 или 3
-
Перефразируйте свою мысль с помощью кода
-
<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 знаком не был. Помогите привести в чувство эту верстку. Вообще по идее эта верстка должна выглядеть так же, как на скриншотах на любых разрешениях
-
нужно сделать у ссылок вида <ul> <li><a href="/">Главная</a></li> ... </ul> которые находятся в панели при наведении мышью (hover) квадратный фон другого цвета(примерно так, как сделано у vk.com).