Помогите выровнять подвал?!

Статус
Закрыто для дальнейших ответов.

Mr_Diza

Новичок
Регистрация
24.06.2011
Сообщения
4
гляньте на код

Код:
/*-- Подвал --*/
footer {
	width: 100%;
	height: 150px;
	background-color: #000000;
	color: #ffffff;
	overflow: hidden;
	text-align: center;
}

footer section {
	float:left;
	margin: 15px 30px;
	background-color: #00FF00
}

footer ul {
	list-style: none
}
мне очень необходимо выровнять всё, что находится внутри этого подвала, по центру.
может кто дополнит код, или новый кинет? я изнемог уже :( весь контент что внутри порвала, выравнивается согласно обтиканию FLOAT:LEFT, а мне необходимо чтобы все теги <section> шли с лева на право, а расположены они были по центру в подвале. Помогите пожалуйста. Вот даже код html, для наглядности

Код:
			<footer>
				<section>
					<h1>Логин</h1>
					<ul>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
					</ul>
				</section>
				
				<section>
					<h1>Логин</h1>
					<ul>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
					</ul>
				</section>
				
				<section>
					<h1>Логин</h1>
					<ul>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
					</ul>
				</section>
			</footer>
Перепробовал (наверное) всё! Особенно margin: 0 auto куда тока не пробовал ставить
 

motek

злой как @
Регистрация
13.04.2010
Сообщения
730
не совсем понятно,как это должно выглядеть в конечном итоге...можно картинку? и еще один момент - новые теги <footer> и <section> некорректно отображаются некоторыми браузерами,попробуйте прописать им id или class...(как-то сталкивался с этим)


Код:
    <footer id="myfooter">
                                <section class="mysection">
                                        <h1>Логин</h1>
                                        <ul>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                        </ul>
                                </section>
                                
                                <section class="mysection">
                                        <h1>Логин</h1>
                                        <ul>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                        </ul>
                                </section>
                                
                                <section class="mysection">
                                        <h1>Логин</h1>
                                        <ul>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                                <li><a href=#>Ссылка</a></li>
                                        </ul>
                                </section>
                        </footer>
ну и соответственно css-ка:

Код:
    #myfooter {
        width: 100%;
        height: 150px;
        background-color: #000000;
        color: #ffffff;
        overflow: hidden;
        text-align: center;
}

.mysection {
        float:left;
        margin: 15px 30px;
        background-color: #00FF00
}
.....
 

tigra60

Спасатель
Регистрация
10.12.2009
Сообщения
1 990
Оберните свои секции блоком и присвойте этому блоку стиль:
Код:
display: table;
margin: 0 auto;
ЗЫ. Нашел решение в гугле, что с проверкой заняло 5 мин.
 

Mr_Diza

Новичок
Регистрация
24.06.2011
Сообщения
4
Оберните свои секции блоком и присвойте этому блоку стиль:
Код:
display: table;
margin: 0 auto;
ЗЫ. Нашел решение в гугле, что с проверкой заняло 5 мин.
И так я пробовал. :( Я говорю что всевозможные манипуляции с параметром margin я перепробовал.

Может что из вне мне мешает? Вот полный код. Гляньте, можт кто найдёт какой подвох в моём документе? Яж новичёк в вёрстке, я должен знать Все свои ошибки в лицо.

Код:
<!DOCTYPE html>
<html>
	<head>
		<meta HTTP-EQUIV=Content-Type CONTENT=text/html charset=utf-8 />
		<title>Не резиновый</title>
		<link rel=stylesheet href=main.css type=text/css />
		<script language=JavaScript src=1.js type=text/jscript></script>
	</head>
	<body>
		<div id=main>
			<header>
				<div id=header-up>
					<div id=logo>Логотип</div>
					<div id=header-navbar>
						<ul>
							<li><a href=#>Главная страница</a></li>
							<li><a href=#>Новости</a></li>
							<li><a href=#>Медиа</a></li>
							<li><a href=#>Форум</a></li>
							<li><a href=#>Обратная связь</a></li>
						</ul>
					</div>
				</div>
				
				<div id=header-body>
					<div id=slideshow>
						<a href=#><img src=3.jpg alt=Изображение /></a>
					</div>
					
					<div id=slide-nav class=transp><a href=#>(*)</a> <a href=#>(*)</a> <a href=#>(*)</a></div>
				</div>
				
				<div id=header-down>
					<div id=whoo>Строка определения местонахождения</div>
				</div>
			</header>
			
			<article>
				<div id=content>
					<h1>Заголовок материала</h1>
					<p>
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
					</p>
					
					<h1>Заголовок материала</h1>
					<p>
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
					</p>
					
					<h1>Заголовок материала</h1>
					<p>
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
						Материал. Материал. Материал. Материал. Материал. Материал. Материал.
					</p>
				</div>
				
				>><div id=>>>>>right-block<<<<<><<
					>>>>><div class=cent><<<<<
					<section>
						<h1>Логин</h1>
						<ul>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
						</ul>
					</section>
					
					<section>
						<h1>Меню</h1>
						<ul>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
						</ul>
					</section>
					
					<section>
						<h1>Ссылки</h1>
						<ul>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
							<li><a href=#>Ссылка</a></li>
						</ul>
					</section>
					>>>>>>>>>></div> <<<<<<<<<<<
			</article>
			
			<footer>
				<section>
					<h1>Логин</h1>
					<ul>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
					</ul>
				</section>
				
				<section>
					<h1>Логин</h1>
					<ul>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
					</ul>
				</section>
				
				<section>
					<h1>Логин</h1>
					<ul>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
						<li><a href=#>Ссылка</a></li>
					</ul>
				</section>
			</footer>
		</div>
	</body>
</html>
CCS

Код:
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	background-color: #FFCC66
}
a {
	color: #FF3300;
	text-decoration: none
}
a:hover {
	color: #EE6D4D
}
/*-- Форма сайта --*/
#main {
	width: 800px;
	height: auto;
	min-height: 500px;
	overflow: hidden;
	margin: 70px auto;
	background-color: #FFFFFB
}

/*-- Шапка --*/
header {
	
}

/*-- Шапка - Голова --*/
#header-up {
	color: #999980;
	background-color: #1A1A15;
	height: 50px
}

/*-- Шапка - Голова - Логотип --*/
#logo {
	float: left
}

/*-- Шапка - Голова - Навигация --*/
#header-navbar {
	float: right
}

#header-navbar ul {
	list-style: none
}

#header-navbar ul li {
	float: left;
	margin: 0 10px
}


/*-- Шапка - Торс --*/
#header-body {
	
}

/*-- Шапка - Торс - Слайдшоу --*/
#slideshow {
	height: 400px
}

#slideshow a {
	
}

#slideshow a img {
	width: 800px;
	height: 400px
}

/*-- Шапка - Торс - Слайдшоу - Навигация --*/
#slide-nav {
	height: 40px;
	margin-top: -41px;
	background-color: #000000;
	opacity: 0.5;
	border-top: 1px solid #ffffff;
	text-align: center;
	color: #ffffff;
	position: relative
}

#slide-nav a {
	color: #FFFFEA;
	text-decoration: underline;
	position:relative;
}

#slide-nav a:hover {
	color: #FFFFDA;
	text-decoration: none
}

/*-- Шапка - Ноги --*/
#header-down {
	background-color: #000000;
	color: #ffffff;
	height: 25px;
	font-family: Tahoma, serif;
	font-size: 9px
}

/*-- Тело --*/
article {
	margin: 20px
}

/*-- Тело - Контент --*/
#content {
	width: 300px;
	height: auto;
	background-color: #000000;
	color: #ffffff;
	float: left;
	margin-right: 20px;
	margin-bottom: 20px
}

/*-- Тело - Правый блок --*/
#right-block {
	width: 200px;
	background-color: #000000;
	color: #ffffff;
	float: right;
	margin-bottom: 20px
}

/*-- Подвал --*/
footer {
	width: 100%;
	height: 150px;
	background-color: #000000;
	color: #ffffff;
	overflow: hidden;
	text-align: center;
}

footer section {
	float:left;
	margin: 15px 30px;
	background-color: #00FF00
}

footer ul {
	list-style: none
}

.cent {
	display: table;
	margin: 0 auto;
}
Тока заметил прокол-прикол :unsure: :laugh:

Ради прикола всётаки отправлю. Почитайте и по смейтесь со мной за компанию :laugh: :laugh: :biggrin:
Я даже щас как нибудь выделю КАК Я ПРОБОВАЛ (на маленькой, отведённой части экрана, я этого не замечал) :laugh:
 
Статус
Закрыто для дальнейших ответов.
Верх Низ