Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Как разместить блок произвольной ширины в центре другого блока?

Как разместить блок произвольной ширины в центре другого блока?


Ведь, если ширина не фиксирована, маргин 0 авто не работает



Способ


не работает, если вместо текста в контейнер помещать дивы. А мне нужно поместить именно их...


Помогите, уже 2й день голову ломаю.
Ответ:
.. но появляется другая проблема, пока зеленые блоки помещаются в одну строку, то блок с border: red = ширине входящих блоков, но как только они перестают помещаться (ну допустим их 20 шт с шириной каждого в 100 px), то при переносе их на другую строку блок с border: red становиться во всю ширину, а не по ширине содержимого. между зелеными блоками и красной рамкой справа если менять ширину окна - меняется, а слева - все прибито к левому краю.

Как сделать чтобы красная рамка была по щирине зеленых блоков ?
Вопрос: Отступы одного элемента по ширине двух других

Доброго времени суток)
Помогите с кодом,пожалуйста. Есть 3 блока. Два выровнены по двум сторонам (float:right и float:left).Их широты равна их контенту(то-есть не известны)Есть 3 блок,он находиться по средине(между двух других)
Нужно сделать ему ширину и отступы по ширине двух других блоков...(все они по горизонтали выровнены)
Очень нужна помощь...Заранее благодарю)
Ответ: Это же арифметика. Суммируй, вычитай, присваивай.
Вопрос: Не получается разместить блоки с помощью float. Помогите пожалуйста

Не получается разместить блоки с помощью float. Помогите пожалуйста.
нужно , чтобы серые блоки шли слева направо. Если я ставлю и float:left, то у меня пропадает белый задний фон.


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
<div id="white-shape">
<!-- MENU -->
<div class="wraper">
<div><a href="#" class="act_menu">main</a></div>
<div><a href="#">about us</a></div>
<div><a href="#">services</a></div>
<div><a href="#">products</a></div>
<div><a href="#">partners</a></div>
<div><a href="#">contacts</a></div>
</div>
<div class="clear"></div>
<!-- LOGOTYPE -->
<div class="logo">
<p><a href="/"><img src="img/logo.png" alt="logo"></a></p>
<p>THE BEST QUALITY PRODUCTS</p>
</div>
<p class="central_img"><img src="img/central.jpg" alt="central image"></p>
<!-- CONTENT (3 blocks) -->
<div class="content">
<div>
<p><img src="img/page1_img_01.png" alt=""></p>
<p><h4><span>PROGRESSIVE</span> METHODS</h4></p>
<p class="text1">
<a href="#">Koleacene anritma haseseralety.</a> Cumaser kertyaseocis ntoquas caaslecenas stricies phaledatyfena nec sit amm easerment. Utdolor dapegementum velursus ifend elineanctor wisiet urliquam. Berat vpaiast rtyase fertasbe.
</p>
<p class="button1"><a href="#"></a></p>
</div>
<div>
<p><img src="img/page1_img_01.png" alt=""></p>
<p><h4><span>PROGRESSIVE</span> METHODS</h4></p>
<p class="text1">
<a href="#">Koleacene anritma haseseralety.</a> Cumaser kertyaseocis ntoquas caaslecenas stricies phaledatyfena nec sit amm easerment. Utdolor dapegementum velursus ifend elineanctor wisiet urliquam. Berat vpaiast rtyase fertasbe.
</p>
<p class="button1"><a href="#"></a></p>
</div>
</div>



</div>


</body>
</html>


@charset "utf-8";
/* CSS Document */

body{
margin:0px;
padding:0px;
background:url(img/bg-body.jpg);
padding-top:60px;
}
#white-shape{
background:#FFF;
width:1100px;
margin:0px auto;
}
.wraper{
margin:0px auto;
width:570px;
}
.wraper div{
float:left;
width:95px;
font-size:18px;
font-family: 'Comic Sans MS', cursive;
}
.wraper a{
padding-top:64px;
height:37px;
width:95px;
text-align:center;
margin:0px auto;
text-decoration:none;
color:#7d594d;
display:block;
}
.wraper div:hover{
background:#FDD330;
}
.wraper a:hover{
color:#FFF;
}
.act_menu{
background: #FDD330;
color:#FFF !important;
}
.clear{
clear:both;
}
.logo p{
text-align:center;
color: #c2ac83;
text-transform:uppercase;
font-size:14px;
font-family: 'Comic Sans MS', cursive;
}
.central_img{
text-align:center;
margin:25px auto 0px;

}
.content{
width:955px;
margin:20px auto;
border:1px solid #000;
}
.content div{
padding:20px 0px 20px 0px;
background:url(img/block-1_shape.jpg);
width:300px;
text-align:center;
margin-left:7px;
float:left;
}
.content div h4{
color: #754f44;
}
.content div h4 span{
color: #fdd330;
}
.text1{
color: #9a9785;
text-align:left;
font-size: 15px;
margin-left:50px;
margin-right:33px;
margin-bottom:40px;
}
.text1 a{
color:#6d6a57;
text-decoration:none;
}
.text1 a:hover{
text-decoration:underline;
}
.button1 a{
display:block;
width:100px;
height:33px;
background:url(img/button1.jpg) no-repeat;
margin:0px auto;
}
.button1 a:hover{
background:url(img/button2.jpg);
}

Ответ:
Пропишите для контейнера где находиться белый фон:
overflow: hidden;
Вопрос: Разместить блок за пределами родителя

Всем привет.
Возможно ли разместить блок за пределами его родителя так, чтобы его было видно?
При этом свойства родителя должны оставаться неизменными:
Код CSS
1
position: relative; overflow: hidden
Ответ: Да это я загнался чего то
Вопрос: Canvas html5, как разместить черный пискель в центре canvas'a?

как разместить черный пискель в центре canvas'a?
Ответ:
Код Javascript
1
2
context.fillStyle = 'black'
context.fillRect(canvas.width/2,canvas.height/2,1,1)
Вопрос: Разместить блок div по центру

Доброго всем времени суток. Ковыряю стандартный код joomla virtuemart. Никак не могу победить- разместить кнопку с количеством и "купить" по центру внешнего Diva.


Подскажите пожалуйста
Ответ:
Сообщение от webstaruz
если сайт не адаптивный как можно сделат адаптивную кнопку. Это мне кажеться не возможно !
А причём тут вообще адаптивность?

kupidon, у кнопок стоит свойство float:left вот они и торчат по левому краю... По коду вроде прописано внутренним стилем, но скорее всего оно генерируется скриптом... Уберите его и всё будет гуд, только надо будет заменить на display:inline-block
Вопрос: Разместить пункты верхнего меню по центру | bitrix:horizontal:multilevel

Здравствуйте! В битриксе есть шаблон выпадающего меню. Но не получается разместить все пункты по центру, они оказываются слева. Помогите пожалуйста! Прилагаю код CSS и код PHP файла, где используются стили. Или можно скачать в архиве.
CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
/**Top menu**/
#horizontal-multilevel-menu,#horizontal-multilevel-menu ul
{   
    margin:0; padding:0;
    position: relative;
    /*left:20%;*/
    background:#1974C2 repeat-x;
    min-height:27px;
    width:100%;
    list-style:none;
    font-size:11px;
    /*text-align:center;*/
    float:left;
    /*font-size:90%*/
}
 
#horizontal-multilevel-menu
{
 
}
 
/*Links*/
#horizontal-multilevel-menu a
{
    display:block;
    padding:5px 10px;
    /*padding:0.3em 0.8em;*/
    text-decoration:none;
    text-align:center;
}
 
#horizontal-multilevel-menu li
{
    float:left;
}
 
/*Root items*/
#horizontal-multilevel-menu li a.root-item
{
    color:#fff;
    font-weight:bold;
    padding:7px 12px;
}
 
/*Root menu selected*/
#horizontal-multilevel-menu li a.root-item-selected
{
    background:#fc8d3d;
    color:#fff;
    font-weight:bold;
    padding:7px 12px;
}
 
/*Root items: hover*/
#horizontal-multilevel-menu li:hover a.root-item, #horizontal-multilevel-menu li.jshover a.root-item
{
    background:#e26336;
    color:#fff;
}
 
/*Item-parents*/
#horizontal-multilevel-menu a.parent
{
    background: url(images/arrow.gif) center right no-repeat;
}
 
/*Denied items*/
#horizontal-multilevel-menu a.denied
{
    background: url(images/lock.gif) center right no-repeat;
}
 
/*Child-items: hover*/
#horizontal-multilevel-menu li:hover, #horizontal-multilevel-menu li.jshover
{
    background:#D6D6D6;
    color:#fff;
}
 
/*Child-items selected*/
#horizontal-multilevel-menu li.item-selected
{
    background:#D6D6D6;
    color:#fff;
}
 
/*Sub-menu box*/
#horizontal-multilevel-menu li ul
{
    position:absolute;
    /*top:-999em;*/
    top:auto;
    display:none;
    z-index:500;
 
    height:auto;
    /*width:12em;*/
    width:135px;
    background:#F5F5F5;
    border:1px solid #C1C1C1;
}
 
/*Sub-menu item box*/
#horizontal-multilevel-menu li li
{
    width:100%;
    border-bottom:1px solid #DEDEDE;
}
 
/*Item link*/
#horizontal-multilevel-menu li ul a
{
    text-align:left;
}
 
/*Items text color & size */
#horizontal-multilevel-menu li a,
#horizontal-multilevel-menu li:hover li a,
#horizontal-multilevel-menu li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li a
{
    color:#4F4F4F;
    font-weight:bold;
}
 
/*Items text color & size: hover*/
#horizontal-multilevel-menu li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover a,
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover a
#horizontal-multilevel-menu li:hover li:hover li:hover li:hover li:hover li:hover a,
#horizontal-multilevel-menu li.jshover li.jshover li.jshover li.jshover li.jshover li.jshover a
{
    color:#4F4F4F;
}
 
#horizontal-multilevel-menu li ul ul
{
    margin:-27px 0 0 132px;
    /*margin:-1.93em 0 0 11.6em;*/
}
 
#horizontal-multilevel-menu li:hover ul ul,
#horizontal-multilevel-menu li.jshover ul ul,
#horizontal-multilevel-menu li:hover ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul,
#horizontal-multilevel-menu li:hover ul ul ul ul ul,
#horizontal-multilevel-menu li.jshover ul ul ul ul ul
{
    /*top:-999em;*/
    display:none;
}
 
#horizontal-multilevel-menu li:hover ul,
#horizontal-multilevel-menu li.jshover ul,
#horizontal-multilevel-menu li li:hover ul,
#horizontal-multilevel-menu li li.jshover ul,
#horizontal-multilevel-menu li li li:hover ul,
#horizontal-multilevel-menu li li li.jshover ul,
#horizontal-multilevel-menu li li li li:hover ul,
#horizontal-multilevel-menu li li li li.jshover ul,
#horizontal-multilevel-menu li li li li li:hover ul,
#horizontal-multilevel-menu li li li li li.jshover ul
{
    /*z-index:1000;
    top:auto;*/
    display:block;
}
 
div.menu-clear-left
{
    clear:left;
}
PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<?if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED!==true)die();?>
 
<?if (!empty($arResult)):?>
<ul id="horizontal-multilevel-menu">
 
<?
$previousLevel = 0;
foreach($arResult as $arItem):?>
 
    <?if ($previousLevel && $arItem["DEPTH_LEVEL"] < $previousLevel):?>
        <?=str_repeat("</ul></li>", ($previousLevel - $arItem["DEPTH_LEVEL"]));?>
    <?endif?>
 
    <?if ($arItem["IS_PARENT"]):?>
 
        <?if ($arItem["DEPTH_LEVEL"] == 1):?>
            <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a>
                <ul>
        <?else:?>
            <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>" class="parent"><?=$arItem["TEXT"]?></a>
                <ul>
        <?endif?>
 
    <?else:?>
 
        <?if ($arItem["PERMISSION"] > "D"):?>
 
            <?if ($arItem["DEPTH_LEVEL"] == 1):?>
                <li><a href="<?=$arItem["LINK"]?>" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>"><?=$arItem["TEXT"]?></a></li>
            <?else:?>
                <li<?if ($arItem["SELECTED"]):?> class="item-selected"<?endif?>><a href="<?=$arItem["LINK"]?>"><?=$arItem["TEXT"]?></a></li>
            <?endif?>
 
        <?else:?>
 
            <?if ($arItem["DEPTH_LEVEL"] == 1):?>
                <li><a href="" class="<?if ($arItem["SELECTED"]):?>root-item-selected<?else:?>root-item<?endif?>" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
            <?else:?>
                <li><a href="" class="denied" title="<?=GetMessage("MENU_ITEM_ACCESS_DENIED")?>"><?=$arItem["TEXT"]?></a></li>
            <?endif?>
 
        <?endif?>
 
    <?endif?>
 
    <?$previousLevel = $arItem["DEPTH_LEVEL"];?>
 
<?endforeach?>
 
<?if ($previousLevel > 1)://close last item tags?>
    <?=str_repeat("</ul></li>", ($previousLevel-1) );?>
<?endif?>
 
</ul>
<div class="menu-clear-left"></div>
<?endif?>
Ответ:
Сообщение от Petrouch
Если не трудно, скажите пожалуйста как сделать резиновые внутренние отступы?
Всё как обычно только вместо пикселей используйте проценты... К примеру: padding:0 2.5%... Проценты высчитываются с учётом ширины родителя...
Вопрос: Размещение блоков с помощью bootstrap 3

Добрый день!
Подскажите пожалуйста как разместить блоки, так как на картинке в bootstrap3.
Спасибо!
Ответ: Сделайте две колонки col-md-4 и col-md-8 в col-md-4 (блок слева) положите два блока как у вас на картинке.
Вопрос: Разместить блоки на случайных координатах экрана.

Здравствуйте.
Развиваю "пазл". В результате работы моей программы, получаю длинную линейку с блоками изображений. Хочу расположить их на случайных координатах окна браузера. Проблемы с кодом ниже:
function getXPositionOfElement() {//Получить случайные координаты x окна браузера.
        var x_position = Math.floor(Math.random() * window.innerWidth);
	    return x_position;
    }
	
	function getYPositionOfElement() {//Получить случайные координаты y окна браузера.
        var y_position = Math.floor(Math.random() * window.innerHeight);
	    return y_position;
    }
	
	function putPazzleInRandomXYCoordinats(){//Поместить в случайные координаты (см. функция getXPositionOfElement()) элементы массива в цикле.
	    for(var k=0; k<100; k++){
			getXPositionOfElement();
			getYPositionOfElement();
			$("div.block"+k).offset({ top: y_position, left: x_position });
			alert(y_position);//не работает даже с getXPositionOfElement()
		}
	}

Ссылка на остальной код

P.S. Я вовремя не проверила, как правильно писать слово "puzzle", поэтому, теперь в именах всех переменных ошибка. В редакторе заменить не получается (код перестаёт работать). Приношу свои извинения.
Ответ: рони, спасибо. Работает.
Вопрос: Как разместить блок с текстом под другим?

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

Если весь текст внести под h2, то бок будет по правому краю своего div, но выравниваться сам по себе слева.

А хочу получить вот такой результат:

Подскажите, как правильно сделать.

Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Chooce Travel</title>
<meta name="" content="" charset="UTF-8"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
<link rel="shortcut icon" type="image/x-icon" href="http://www.cyberforum.ru/images/0_92438_f5bc33c8_orig.png">
</head>
<body>
<div class="main">
    <div class="head">
        <a href="index.html"><span>C</span>hooce <span>T</span>ravel</a>
        <h2>Выбери своё<br/>  Путешествие</h2>
    </div>
 
    <div class="contant-main">
        <ul class="menu">
            <li><a href="#">Главная</a></li>
            <li><a href="#">Автор</a></li>
            <li><a href="#">Контакты</a></li>
        </ul>
    </div>
</div>
</body>
</html>
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
*{
    padding 0; margin: 0;
}
body{
    background: #e2e0cd url(images/bg-body.jpg) center top no-repeat;
}
.main{
    width: 970px; margin: 0 auto;
}
    .head{
        height: 250px;
    }
        .head a{
            font: 26px "Century Gothic"; color: #5d4956; text-decoration: none; float: right;  margin-top: 7px;
        }
        .head h2{
            font: 24px "Century Gothic"; color: #3f2d39;  float: right;
        }
        .head a span{
            color: #842f00;
        }
    .contant-main{
}
    .menu{
        list-style: none; background: #4b3338;
        overflow: hidden;
}
        .menu li{
            float: left; background:url('images/bg-menu.jpg') left center no-repeat; padding: 15px 35px ;
        }
            .menu li a{
                font: 18px "Century Gothic"; color: #fff; text-decoration: none;
            }
            .menu li a:hover{
                font: 18px "Century Gothic"; color: #fff; text-decoration: underline;
            }
Ответ: О, спасибо за подсказки.