Блог

Главная - Вопросы по программированию - Цвет фона боковых панелей, HTML, CSS

Цвет фона боковых панелей, HTML, CSS

#html #css #colors #background

#HTML #css #Цвет #фон

Вопрос:

Я хотел бы спросить вас о том, что беспокоит меня уже некоторое время. В настоящее время я изучаю HTML и CSS, и мы получили это домашнее задание, в котором мы должны создать блог, в котором одна статья посередине и две боковые панели справа, цвет фона сайта должен быть серым. проблема в том, что основная статья и две боковые панели должны иметь белый цвет фона, поэтому, когда я меняю цвет фона статьи на белый, он автоматически получает контроль над 75% веб-сайта, даже за пределами статьи. вот скриншот.

Что я пытаюсь сделать https://f.v1.n0.cdn.getcloudapp.com/items/0k300n0O0J0c1l1B3K2J/blog-1.png

Что я получаю, когда меняю цвет фона боковых панелей на белый https://ctrlv.sk/WF4e

 .main-image {
    height: 260px;
    width: 670px;
}
.main {
    text-align: center;
    padding: 40px;
    margin-top: -10px;
}
.main2 {
    background-color: white;
}
body {
    background-color: rgb(243, 243, 243)
}
.line {
    margin-top: 50px;
}
hr {
    margin-top: -20px;
}
.back {
    background-color: white;
}
.box-post {
    background: white;
    margin-left: 70px;
}
.sideimage {
    float: right;
    margin-top: -340px;
    width: 350px;
    margin-right: 100px;
    display: block;
}
.sidetext {
    text-align: right;
    margin-top: -180px;
    margin-right: 160px;
    
} 
 <title>Blog</title>
    <link rel="stylesheet" href="styles.css">
<header>
    <div class="main2">
    <h1 class="main">
        <strong>Dopetrope</strong>
    </h1>
    </div>
    <hr>
</header>
<section id="main">
    <article class="box-post">
        <img class="main-image" src="pic01.jpg" alt="obrazocek">
        <header>
            
            <h1>Right sidebar</h1>
            <h3>Lorem ipsum dolor sit amet feugiat</h3>
            <div>
        </div></header>
        <p>
</p><section class="box">
    <img class="sideimage" src="pic09.jpg">
    <h1 class="sidetext2">Sed etiam lorem nulla</h1>
    <p class="sidetext">
        Lorem ipsum dolor sit amet sit veroeros <br>
        sed amet blandit consequat veroeros <br>
        lorem blandit adipiscing et feugiat <br>
        phasellus tempus dolore ipsum lorem <br>
        dolore.
    </p>
</section>
            <p>
            Vestibulum scelerisque ultricies libero id hendrerit. Vivamus malesuada quam faucibus ante <br>
            dignissim auctor hendrerit libero placerat. Nulla facilisi. Proin aliquam felis non arcu molestie at <br>
            accumsan turpis commodo. Proin elementum, nibh non egestas sodales, augue quam aliquet est, <br>
            id egestas diam justo adipiscing ante. Pellentesque tempus nulla non urna eleifend ut ultrices nisi <br>
            faucibus. <br><br><br>
            Praesent a dolor leo. Duis in felis in tortor lobortis volutpat et pretium tellus. Vestibulum ac ante <br>
            nisl, a elementum odio. Duis semper risus et lectus commodo fringilla. Maecenas sagittis convallis <br>
            justo vel mattis. placerat, nunc diam iaculis massa, et aliquet nibh leo non nisl vitae porta lobortis, <br>
            enim neque fringilla nunc, eget faucibus lacus sem quis nunc suspendisse, nec lectus sit amet <br>
            augue rutrum vulputate ut ut mi. Aenean elementum, mi sit amet portittor lorem ipsum dolor sit <br>
            amet, consecteur adipiscing elit. Lorem ipsum dolor sir amet nullam consequat feugiat dolore <br>
            tempus.
            
            </p>
    </article>
</section>

Есть идеи, как это изменить? Я надеюсь, вы понимаете, чего я пытаюсь достичь здесь. Также, пожалуйста, не обращайте особого внимания на код, если он неправильный, я все еще новичок в этом: D

Ответ №1:

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

 .main {
    text-align: center;
    padding: 40px;
    margin-top: -10px;
    border-bottom:1px solid #DDDDDD;
}
.main2 {
    background-color: white;
}
body {
    background-color: rgb(243, 243, 243);
    margin:0;
}

.container {
width:100%;
padding:20px;
}

.leftbox {
width:68%;
float:left;
background:#FFFFFF;
}

.image1 {
padding:0px;
background-image:url("https://i.stack.imgur.com/nhPHk.jpg");
height:160px;"
}

.image2 {
padding:0px;
background-image:url("https://i.stack.imgur.com/Vqklg.jpg");
height:50px;
}

   

.leftboxcontent {
padding:20px;
}

.middlespace {
width:3%;
float:left;
}


.rightbox {
width:25%;
float:left;
}

.rightboxcontent1 {
background-color:#FFFFFF;
width:100%;
}

.rightboxcontent1a {
padding:20px;
}

.rightboxcontent2 {
background-color:#FFFFFF;
width:100%;
}

.rightboxcontent2a {
padding:20px;
} 
   <title>Blog</title>

 <body>

 <div class="main2">
     <h1 class="main">
         <strong>Dopetrope</strong>
     </h1>
 </div>



 <div class=container>

     <div class=leftbox>

         <div class=image1>amp;nbsp;</div>

         <div class=leftboxcontent>

             <h1>Right sidebar</h1>
             <h3>Lorem ipsum dolor sit amet feugiat</h3>

             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
             <h4>Lorem ipsum dolor sit amet feugiat</h4>
         </div>
         <div>amp;nbsp;</div>
     </div>


     <div class=middlespace>amp;nbsp;</div>

     <div class=rightbox>

         <div>
             <div class=image2>amp;nbsp;</div>

             <div class=rightboxcontent1>

                 <div class=rightboxcontent1a>

                     TESTTEST<BR>TESTTEST<BR>
                     TESTTEST<BR>TESTTEST<BR>
                     TESTTEST<BR>TESTTEST<BR>
                     TESTTEST<BR>TESTTEST<BR>
                     TESTTEST<BR>TESTTEST<BR>
                     TESTTEST<BR>TESTTEST<BR>

                 </div>

             </div>
         </div>


         <br><br>

         <div>


             <div class=rightboxcontent2>
                 <div class=rightboxcontent2a>

                     TESTTEST2<BR>TESTTEST2<BR>
                     TESTTEST2<BR>TESTTEST2<BR>

                 </div>
             </div>
         </div>

         

     </div>

 </div>

 </body>

Ответ №2:

Рекомендуется начинать со строгой структуры, прежде чем заполнять ее контентом. Если у вас хорошая структура, то у вас меньше отладки. Что-то вроде шаблона ниже.

Совет. Отображение: flex является более гибким, чем float:left

 * {
  margin: 0;
  box-sizing: border-box;
}
#header {
  width: 100%;
}
#main {
  float: left;
  width: 70%;
}
#aside {
  float: left;
  width: 30%;
}
#footer {
  clear: both;
  width: 100%;
}
/* for test purpose only */
.test {
  height: 80px;
  border: 1px solid orange;
} 
 <header id="header" class="test">
</header>
   
<section id="main" class="test">
  <article>
  </article>
</section>
   
<aside id="aside" class="test">
</aside>
   
<footer id="footer" class="test">
</footer>

Метки: , ,