当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Why? Div which contains other divs is working only while I declare same class and id together in css

问题描述:

I made simple div which contains other divs, and when I set its size and background in class nothing happened, same thing when I set it on id, but when I set same class and id, it worked. Why?

html

css

.baza{

width: 1000px;

height: 900px;

background-color: grey;

margin-left: auto;

margin-right: auto;

border-width: 1px;

border-style: dotted;

}

#baza {

width: 1000px;

height: 900px;

background-color: grey;

margin-left: auto;

margin-right: auto;

border-width: 1px;

border-style: dotted;

}

.baner {

height: 150px;

}

html

 <!doctype html>

<html>

<head>

<meta charset="utf-8">

<link rel="Stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="baza" id="baza">

<div class="baner">

</div>

<div class="pasek">

<marquee><i> Strona internetowa koła fizycznego</i></marquee>

</div>

<div class="menu">

<ul>

<li> Strona główna</li>

<li>Terminy spotkań</li>

<li> Kontakt</li>

</ul>

</div>

<div class="tresc">

</div>

<div class="stopka">

</div>

</div>

</body>

<footer>

</footer>

</html>

网友答案:

The code works as it should:

Using class name only: JS Fiddle 1

.baza{
    width: 1000px;
    height: 900px;
    background-color: grey;
    margin-left: auto;
    margin-right: auto;
    border-width: 1px;
    border-style: dotted;
}
<div class="baza">
  <div class="baner">
  </div>
  <div class="pasek">
    <marquee><i> Strona internetowa koła fizycznego</i></marquee>
  </div>
  <div class="menu">
    <ul>
      <li> Strona główna</li>
      <li>Terminy spotkań</li>
      <li> Kontakt</li>
    </ul>
  </div>
  <div class="tresc">
  </div>
  <div class="stopka">
  </div>
</div>
网友答案:

Here a simple div which contains other divs. No problem here with the CSS class or id. Check out this fiddle.

HTML

<div class="container">
  <div class="first">
    Hello World!
  </div>
  <div id="second">
   The pink champagne on ice
  </div>
</div>

CSS

.container {width: 300px; height: 60px; background-color: grey; padding: 8px; }
.first {background-color: #d1d1d1;}
#second {color: #fff;}

Try to post your code.

UPDATE

Your code works correctly here.

网友答案:

the problem that no thing happen it means the CSS and html not working together since we know its connected right . so the problem one of the following

problem in the CSS

  1. missing ; or }
  2. the properties is over written by other selectors

problem in the html

  1. the </div> tags not closed properly
  2. problem in the name ( capital small lettters )

one last note

in your code

    .baza{
        width: 1000px;
        height: 900px;
        background-color: grey;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
        border-style: dotted;
     }
    #baza {
        width: 1000px;
        height: 900px;
        background-color: grey;
        margin-left: auto;
        margin-right: auto;
        border-width: 1px;
        border-style: dotted;
    }

this is not use class and ID ... the ID come after the class so it will override it ...

so your issue is one of the points I mentioned before

分享给朋友:
您可能感兴趣的文章:
随机阅读: