Перецентрировать веб-страницу в CSS / HTML

Question

Перецентрировать веб-страницу в CSS / HTML

0

У меня есть пользовательский CSS, но я больше не контактирую с создателем. Я хотел сделать div (#rightcolumn) больше на 55 пикселей. Я сделал это, сделав iframe в div больше, и он автоматически расширился для меня. Однако баннер (#topsection) стал немного коротким, поэтому мне пришлось добавить 55 пикселей к нему, чтобы сделать его шириной 1255 пикселей.

Теперь страница выключена. Когда я пытаюсь редактировать другие команды float для исправления, div заканчивается. Я пробовал несколько дней. Если бы кто-нибудь мог помочь сейчас с повторным центрированием этого. Я бы очень признателен.

Тестовая страница: серьезный спорт Bigger Ссылка на css: ссылка CSS New Css

body {
    margin:0;
    padding:0;
    line-height:1.5em;
    background:#C0C0C0;
}
b {
    font-size:110%;
}
em {
    color:red;
}
#maincontainer {
    width:1200px;
    margin:0 auto;
}
#topsection {
    background:#191919;
    height:90px;
    width:1255px
}
#contentwrapper {
    float:left;
    width:100%;
}
#contentcolumn {
    margin:0 360px 0 180px;
    color:#F1F1F1;
}
#leftcolumn {
    float:left;
    width:180px;
    margin-left:-1200px;
    background:#C8FC98;
}
#rightcolumn {
    float:left;
    width:355px;
    margin-left:-355px;
    background:#E5E5E5;
}
#footer {
    clear:left;
    width:100%;
    background:#191919;
    color:#FFF;
    text-align:center;
    padding:4px 0;
}
#footer a {
    color:#62C301;
}
.innertube {
    margin:10px;
    margin-top:0;
}
.arrowgreen {
    width:180px;
    border-style:solid solid none solid;
    border-color:#94AA74;
    border-size:1px;
    border-width:1px;
}
.arrowgreen ul {
    list-style-type:none;
    margin:0;
    padding:0;
}
.arrowgreen li a {
    font:bold 12px Verdana, Arial, Helvetica, sans-serif;
    display:block;
    background:transparent url(http://i39.tinypic.com/2r2rhnc.gif) 100% 0;
    height:24px;
    padding:4px 0 4px 10px;
    line-height:24px;
    text-decoration:none;
}
.arrowgreen li a:link, .arrowgreen li a:visited {
    color:#5E7830;
}
.arrowgreen li a:hover {
    color:#26370A;
    background-position:100% -32px;
}
.arrowgreen li a.selected {
    color:#26370A;
    background-position:100% -64px;
}

user2797543 20 сен. 2013, в 03:49

Источник

Теги:

html

css

4 ответа

3

Вы также должны изменить DOCTYPE на

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

andorx 19 сен. 2013, в 22:59

1

#maincontainer - всего 1200px; , ваше содержимое переполнено. Решение:

#maincontainer{
  width:1255px; margin:0 auto;
}

PHPglue 20 сен. 2013, в 00:08

1

Попытайтесь добавить это:

body {
    margin : 0 auto;
}

user2793383 19 сен. 2013, в 23:27

Ещё вопросы

Josh Crozier · Accepted Answer · 2013-09-19T23-00-00.000Z

Все CSS применяются дважды, вам нужно будет изучить это.

Просто примените следующий CSS:

#maincontainer {
    width: 1255px;
    margin: 0 auto;
}

#contentwrapper {
    float: left;
    width: 1200px;
}

Хм, кажется, добавив, что я не получаю такие же результаты, как вы. Не могли бы вы проверить тестовую страницу сейчас? Большое спасибо за Вашу помощь. Я не настоящий веб-разработчик, просто парень, пытающийся помочь другим. Спасибо! :)