rtl_one
-
Posts
13 -
Joined
-
Last visited
Content Type
Profiles
Forums
Calendar
Store
Posts posted by rtl_one
-
-
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 мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?
-
Как бы сделать так, чтобы 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).
хочу понять позиционирование
in HTML Coding
Posted
live:
Дублирую:
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 мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?