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

Пожалуйста, помогите, мне нужно свободное пространство на правой панели и положение основного содержимого, расположенного в середине страницы.Как сделать основной контент посередине страницы и удалить белые пробелы?

Что мне делать? Любое предложение?

Это мой сайт: http://www.plebonline.co.uk

ul { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #333; 
 
} 
 

 
li { 
 
    float: left; 
 
} 
 

 
li a { 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 18px; 
 
    text-decoration: none; 
 
} 
 

 
li a:hover:not(.active) { 
 
    background-color: #111; 
 
} 
 

 
.active { 
 
    background-color: #ea730b; 
 
} 
 

 
.clock { 
 
    color: white; 
 
    text-align: center; 
 
    padding: 16px 18px; 
 
    display: block; 
 
} 
 

 
.leftbar { 
 
    float: left; 
 
    background-color: #333; 
 
    width: 10%; 
 
    margin: 0; 
 
    padding: 1em; 
 
    margin-bottom: -5000px; 
 
    padding-bottom: 5000px; 
 
    overflow: hidden; 
 
} 
 

 
.rightbar { 
 
    float: right; 
 
    background-color: #333; 
 
    width: 10%; 
 
    margin: 0; 
 
    padding: 1em; 
 
    margin-bottom: -5000px; 
 
    padding-bottom: 5000px; 
 
    overflow: hidden; 
 
} 
 

 
.maincontent { 
 
    padding: 0; 
 
    float:left; 
 
    margin-left: 10%; 
 
    margin-right: 10%; 
 
    background-color: #ff00ff; 
 
    width: 80%; 
 
}

<ul> 
 
    <li><a class="active" href="index.html">Home</a></li> 
 
    <li><a href="wip.html">Projects</a></li> 
 
    <li><a href="wip.html">Notes</a></li> 
 
    <li><a href="wip.html">About</a></li> 
 
    <li><a href="wip.html">Contact</a></li> 
 
    <li style="float:right" class="clock" id="clock"></li> 
 
    <script> 
 
    var today = new Date(); 
 
    document.getElementById('clock').innerHTML=today; 
 
    </script> 
 
</ul> 
 

 
<div class="leftbar"></div> 
 

 
<div class="maincontent"></div> 
 

 
<div class="rightbar"></div>

источник

2017-01-20 Todd Owen

Что белое пространство? Контент кажется посередине, и у вас, похоже, нет пробела между левой полосой, контентом и правой панелью. –

Основной контент, похоже, перекрывается с правой панелью. @AlexandruSeverin –

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

Лучше добавить контейнер для хранения всего вашего элемента. Как вы видите, заголовок и maincontent находятся внутри класса div .container.

Надеюсь, что эта помощь.

html,body { 
    margin:0; 
    padding:0; 
    height: 100%; 

/* 
* The container which hold the header and the main content 
*/ 
.container { 
    width:100%; 
    position: absolute; 
    height:1200px; 
    background:#333; 
    } 

/* 
* Header which contain your menu and date 
*/ 
.header { 
    width:100%; 
    } 

/* 
* The main content of your site 
*/ 
.maincontent { 
    width:80%; 
    max-width:1000px; 
    background-color: #fff; 
    float:left; 
    left:50%; 
    height:100%; 
    margin-left:-500px; 
    position: absolute; 
    } 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #333; 
    } 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: white; 
    text-align: center; 
    padding: 16px 18px; 
    text-decoration: none; 
} 

li a:hover:not(.active) { 
    background-color: #111; 
} 

.active { 
    background-color: #ea730b; 
} 

.clock { 
    color: white; 
    text-align: center; 
    padding: 16px 18px; 
    display: block; 
} 

</style> 

<body> 
<div class="container"> 
<div class="header"> 
<ul> 
    <li><a class="active" href="index.html">Home</a></li> 
    <li><a href="wip.html">Projects</a></li> 
    <li><a href="wip.html">Notes</a></li> 
    <li><a href="wip.html">About</a></li> 
    <li><a href="wip.html">Contact</a></li> 
    <li style="float:right" class="clock" id="clock"></li> 
    <script> 
    var today = new Date(); 
    document.getElementById('clock').innerHTML=today; 
    </script> 
</ul> 
</div> 

<div class="container"> 
<div class="maincontent"> 
<h1>This is the content</h1> 
</div> 
</div> 
</body>

источник

2017-01-20 08:07:46

Как я могу сделать так, чтобы основное содержимое заполнялось между столбцами. подумал, что я спрошу, как вы мастер css –

Существует DIV тег близко, не открывая, что может быть причиной проблемы.

Изменение:

<div class="leftbar"></div> 

<div class="maincontent"></div> 

</div> 
<div class="rightbar"></div>

To:

<div class="leftbar"></div> 

    <div class="maincontent"></div> 

    <div class="rightbar"></div>

источник

2017-01-20 08:22:04 user5195185

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

ответ

Смежные вопросы