0
Внутри div Я хочу полный цвет фона и центр содержимого внутри. Я прочитал в некоторых других сообщениях, что ему нужен внешний div, чтобы установить фоновый цвет там, а затем внутренний div с шириной моего содержимого и margin:0 auto;. Я пробовал это, но он не работает. Я попробовал оставить мой контент слева, и это тоже не сработало.содержание центра с полным фоном
Вот мой код. Проблема заключается в div class="themeDesign", где я устанавливаю цвет фона. В div class="themeDesignicons", когда я положил width:1000px, один из элементов li простирается на следующую строку, но с width:1300px они отображаются на одной и той же строке без центровки. Зачем? Это имеет значение с первым ребенком? Я не могу продолжить. Заранее спасибо
*{
\t margin:0px;
\t padding:0px; \t
}
body{
\t width:100%;
}
header{
\t background-color:#088da5;
\t overflow:hidden;
\t padding:15px 0;
}
.main-header{
\t width:1300px;
\t margin:0 auto;
}
.main-header .left-mainheader{
\t float:left;
\t margin-right:400px; \t
}
.main-header .left-mainheader ul li{
\t display:inline-block;
\t margin-right:26px;
}
.main-header .left-mainheader li a{
\t text-decoration:none;
\t color:white;
}
.main-header .right-mainheader{
\t float:left;
}
.main-header .right-mainheader ul li{
\t display:inline-block;
\t margin-right:15px;
}
.main-header .right-mainheader ul li a{
\t text-decoration:none;
\t color:white;
}
.left-mainheader img{
\t padding-right:8px;
}
header .header h1{
\t background-image:url(images/logoheader.png);
\t width:440px;
\t height:84px;
\t margin:60px auto;
\t overflow:hidden;
\t clear:both;
}
.header ul{
\t margin:25px auto;
\t width:440px;
}
.header li {
\t display:inline-block;
\t margin:0 15px 0 0;
}
.header li a{
\t color:black;
\t text-decoration:none;
\t font-size:15px;
\t font-family: tahoma;
}
header li a:hover{
\t text-decoration:underline;
}
.header .headermesa{
\t border-top:1px solid #666633;
}
.slider{
\t background-color:#f7f8fa;
}
.slidermesa{
\t margin:0 auto;
\t width:1200px;
\t height:421px;
}
.slide img{
\t border-top:1px solid #666633;
\t width:1200px;
\t height:421px;
}
.themeDesign{
\t background-color:#f7f8fa;
}
.themedesignheadings{
\t margin:0 auto;
\t width:1000px;
\t padding:35px 0;
\t border-bottom:1px dashed #877676;
}
.themeDesignicons{
\t width:1000px;
\t margin:0 auto;
}
.themeDesignicons ul li{
\t display:inline-block;
\t width:250px;
}<!DOCTYPE html>
<html>
<head>
<title>-Tutorial for psd-revenant</title>
<meta charset="utf-8">
</head>
<body>
\t <header>
\t \t <div class="main-header">
\t \t \t <div class="left-mainheader">
\t \t \t \t <ul>
\t \t \t \t \t <li>
\t \t \t \t \t \t <a href="#"><img src="images/phoneIcon-header.png"/> +565 975 658</a>
\t \t \t \t \t </li>
\t \t \t \t \t <li> \t
\t \t \t \t \t \t <a href="#"><img src="images/emailheader3.png"/>[email protected]</a>
\t \t \t \t \t </li> \t
\t \t \t \t \t <li> \t
\t \t \t \t \t \t <a href="#"><img src="images/timeheader2_03.png"/>Monday-Friday : 8.00-20.00</a> \t \t
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t \t <div class="right-mainheader"> \t
\t \t \t \t <ul>
\t \t \t \t \t <li><a href="#">Latest News</a></li>
\t \t \t \t \t <li><a href="#">Login</a></li>
\t \t \t \t \t <li><a href="#">Register</a></li>
\t \t \t \t \t <li><a href="#">About Us</a></li>
\t \t \t </div>
\t \t </div>
\t \t <div class="header">
\t \t \t <h1></h1>
\t \t <div class="headermesa"> \t
\t \t \t <ul>
\t \t \t \t <li><a href="#">Home</a></li>
\t \t \t \t <li><a href="#">Apparel</a></li>
\t \t \t \t <li><a href="#">Fashion</a></li>
\t \t \t \t <li><a href="#">News</a></li>
\t \t \t \t <li><a href="#">Portfolio</a></li>
\t \t \t \t <li><a href="#">Contact</a></li>
\t \t \t </ul>
\t \t </div> \t
\t \t </div>
\t </header>
\t <div class="slider">
\t \t <div class="slidermesa">
\t \t \t <div class="slide">
\t \t \t \t <img src="images/mainslide.png"/>
\t \t \t </div>
\t \t </div>
\t </div>
\t \t <div class="themeDesign">
\t \t \t <div class="themedesignheadings">
\t \t \t \t <h2>Check our latest Wordpress Theme which implements a Page Builder and a Revolution Slider</h2>
\t \t \t \t <p>Learn how to build Wordpress Themes with ease with a premium Page Builder which allows you to add new Pages in seconds!</p>
\t \t \t </div> \t
\t \t \t <div class="themeDesignicons">
\t \t \t \t <ul>
\t \t \t \t \t <li>
\t \t \t \t \t \t <div class="disc-cam">
\t \t \t \t \t \t \t <div class="icon cam2"></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="disc-text">
\t \t \t \t \t \t \t <h3>Responsive Design</h3>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, co
\t \t \t \t \t \t \t ctetuer adipiscing elit, sed di
\t \t \t \t \t \t \t nonummy nibh euismod te.</p>
\t \t \t \t \t \t \t <a href="#">Read More<img src="images/arrow.png"/></a>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <div class="disc-cam">
\t \t \t \t \t \t \t <div class="icon cam2"></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="disc-text">
\t \t \t \t \t \t \t <h3>Responsive Design</h3>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, co
\t \t \t \t \t \t \t ctetuer adipiscing elit, sed di
\t \t \t \t \t \t \t nonummy nibh euismod te.</p>
\t \t \t \t \t \t \t <a href="#">Read More<img src="images/arrow.png"></a>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <div class="disc-cam">
\t \t \t \t \t \t \t <div class="icon cam2"></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="disc-text">
\t \t \t \t \t \t \t <h3>Responsive Design</h3>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, co
\t \t \t \t \t \t \t ctetuer adipiscing elit, sed di
\t \t \t \t \t \t \t nonummy nibh euismod te.</p>
\t \t \t \t \t \t \t <a href="#">Read More<img src="images/arrow.png"></a>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t \t <li>
\t \t \t \t \t \t <div class="disc-cam">
\t \t \t \t \t \t \t <div class="icon cam2"></div>
\t \t \t \t \t \t </div>
\t \t \t \t \t \t <div class="disc-text">
\t \t \t \t \t \t \t <h3>Responsive Design</h3>
\t \t \t \t \t \t \t <p>Lorem ipsum dolor sit amet, co
\t \t \t \t \t \t \t ctetuer adipiscing elit, sed di
\t \t \t \t \t \t \t nonummy nibh euismod te.</p>
\t \t \t \t \t \t \t <a href="#">Read More<img src="images/arrow.png"></a>
\t \t \t \t \t \t </div>
\t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </div>
\t \t </div>
ваш HTML сломана в нескольких местах, вам не хватает закрывающие теги везде. Можете ли вы исправить и обновить свой код. –
На этой странице есть хороший пример: http://molty.no/ (норвежский) (проверьте .center в CSS) – TRGWII