При margin: 0 auto пропадает отступ

[vvsh]

здравствуйте.

есть html:

<div class="big"></div>
<div class="small"></div>

и css:

.big {
margin-bottom: 20px;
}
.small {
width: 500px;
margin: 0 auto;
}

между big и small нет отступа, почему?

и как применить к big и margin: 0 auto и margin-bottom: 20px;

спасибо

[psywalker]

здравствуйте.

есть html:

<div class="big"></div>
<div class="small"></div>

и css:

.big {
margin-bottom: 20px;
}
.small {
width: 500px;
margin: 0 auto;
}

между big и small нет отступа, почему?

и как применить к big и margin: 0 auto и margin-bottom: 20px;

спасибо

Не может быть, вроде всё делаешь правильно. Давай тестовую страницу, точнее ссылку.

[Serlutin]

между big и small нет отступа, почему?

Не указан doctype может быть? У меня отсуп есть. Однако стоит помнить про схлопывание полей. Если у вас будет такой код:

.big {
margin-bottom: 20px;
}
.small {
margin-top: 20px;
}

То margin всё-равно будет равен 20px. Читайте в самом конце про схлопывание.

и как применить к big и margin: 0 auto и margin-bottom: 20px;

margin: 0 auto 20px auto;

[psywalker]

margin: 0 auto 20px auto;

Последнее можно не писать

[vvsh]

да с этим разобрался, спасибо.

следующий вопрос.

нужно оформить галерею

http://www.dezinerfolio.com/dfgallery/index.html - есть такая

мне нужно так же дивами разделить страницу, снизу блок с миниютюрками, сверху больше фото. как сделать такое разделение, только так, чтобы миниатюрки были всегда внизу. спасибо.

Edited April 9, 2011 by vvsh

[Serlutin]

Последнее можно не писать

Точно

чтобы миниатюрки были всегда внизу. спасибо.

Ну похоже это знаменитый прижатый подвал.

Edited April 9, 2011 by Serlutin

[vvsh]

да. спасибо. еще

<div id="small"></div>
<div class="switch">
	<div onclick="gallery.move('prev')" class="s1"><img src="images/left.gif" /></div>
	<div onclick="gallery.move('next')" class="s2"><img src="images/right.gif" /></div>
</div>

css:

.switch {  }
.s1 { float: left; margin: 20px 0 0 20px; }
.s2 { float: right; margin: 20px 20px 0 0; }

это сам подвал в small подгружаются миниатюрки, как сделать, чтобы высота блоков с этими картинками были высотой с миниатюрки в small.

Edited April 10, 2011 by vvsh

[psywalker]

да. спасибо. еще

<div id="small"></div>
<div class="switch">
	<div onclick="gallery.move('prev')" class="s1"><img src="images/left.gif" /></div>
	<div onclick="gallery.move('next')" class="s2"><img src="images/right.gif" /></div>
</div>

css:

.switch {  }
.s1 { float: left; margin: 20px 0 0 20px; }
.s2 { float: right; margin: 20px 20px 0 0; }

это сам подвал в small подгружаются миниатюрки, как сделать, чтобы высота блоков с этими картинками были высотой с миниатюрки в small.

А ты как их подгружаешь? Вот так же динамически и меняй высоту.

[vvsh]

подгружаю js'ом.

еще вопрос:

<div class="main">
	<div class="content">
		<img src="1.jpg" />
	</div>

	<div class="footer">

	</div>
</div>

css:

html, body {
	margin:0;
	padding:0;
	width:100%;
	height:100%;
}
.main {
	width:100%;
	min-height:100%;
	position:relative;
}

.footer {
	padding-top: 0px;
	position:absolute;
	display: block;
	margin: 0 auto;
	bottom:0;
	width: 100%;
}
.content {
	padding: 13% 0 85px 0; /* оступ для картинки, а нужно по центу */
}

как сделать картинку внутри content по середине по вертикали?

спасибо

[psywalker]

display: table; display: table-cell; - рули в эти стороны.

[vvsh]

да, получилось. спасибо.

еще

http://www.dezinerfolio.com/dfgallery/index.html

вот тут при наведении на миниатюрку появляется чуть увеличенное изображение, как свертать такой блок со стрелкой?

спасибо