CODEWITHSUNDEEP
htmlcss
Miguel Machado
Miguel Machado

Reputation: 298

css div class inside id

i'm having problems using my css page, where it should be a almost white background it doesnt show in my class. my code:

<div id="content">
<?php
$query="SELECT * FROM softwares ORDER BY Idsoft DESC LIMIT 5";
$result=mysqli_query($ligabd,$query);
while ($rows=mysqli_fetch_array($result))
{

$id=$rows["Idsoft"];
$a1=$rows["nome"];
$a2=$rows["marca"];
$a3=$rows["preco"];
$a4=$rows["stock"];
$a5=$rows["img"];
?>
<div class="img">

<a href="productprofile.php?id=<?php echo $id; ?>">

  <img src="<?php echo $a5;?>"  width="110" height="90">
  <div class="desc"><?php echo "".$a2." - ".$a1.""?></div>

</a>
</div>

<?php
}

?>
</div>

and here my css:

 #content
{
    width: 500px;
width: 80%;
height:1000;
margin: 0 auto 0 auto;
background-color:#999
overflow:hidden;
background-size:1980px 1080px;
}

and for the image tiles:

   div.img
   {
   margin:5px;
   padding: 5px;
   border:1px solid #0000ff;
   height:auto;
   width:auto;
   float:left;
   text-align:center;
   }
   div.img img
   {
   display:inline;
   margin:5px;
   border:1px solid #ffffff;
   }
   div.img a:hover img
   {
   border:1px solid #0000ff;
   }
   div.desc
   {
   text-align:center;
   font-weight:normal;
   width:120px;
   margin:5px;
   }

my problem is that the background in the content should appear under the class, but i cant make it work, already tried to instead of using a class using an id but i cant format. i'll be appreciated by who helped me!

Upvotes: 0

Views: 128

Answers (2)

K K
K K

Reputation: 18109

Your CSS:

#content {
    width: 500px;
    width: 80%; //Why multiple declaration?
    height:1000; //Forgot unit i.e px or %
    margin: 0 auto 0 auto;
    background-color:#999 //Missed semicolon
    overflow:hidden;
    background-size:1980px 1080px; //Consider removing it if you aren't using background image.
}
div.img {
    margin:5px;
    padding: 5px;
    border:1px solid #0000ff;
    height:auto;
    width:auto;
    float:left;
    text-align:center;
}
div.img img {
    display:inline;
    margin:5px; // this will not be of any effect. Margin is ignored for inline elements
    border:1px solid #ffffff;
}
div.img a:hover img {
    border:1px solid #0000ff;
}
div.desc {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:5px;
}

Corrected CSS:

#content {
    width: 500px; // Or 80%
    height:1000px;
    margin: 0 auto 0 auto;
    background-color:#999;
    overflow:hidden;
}
div.img {
    margin:5px;
    padding: 5px;
    border:1px solid #0000ff;
    height:auto;
    width:auto;
    float:left;
    text-align:center;
}
div.img img {
    display:inline;
    border:1px solid #ffffff;
}
div.img a:hover img {
    border:1px solid #0000ff;
}
div.desc {
    text-align:center;
    font-weight:normal;
    width:120px;
    margin:5px;
}

Upvotes: 1

Nicklas
Nicklas

Reputation: 1

Okay, it seems like you have some errors in the CSS. In the first CSS code block (#content {}) you are:

  • Missing a semi-colon after background-color:#999, this is the reason why it isn't working as expected.
  • Using two width properties
  • Setting a height value without specifying the unit (px, %, etc.).
  • Using background-size without using a background image, it won't work on a background color.

Also remember that you can shorten margin: 0 auto 0 auto; to margin: 0 auto;

Working JSFiddle example.

Upvotes: 0

Related Questions