Member Avatar for emulman

The following little page shows 5 DIVs in the same page, everyone with it background-image, but nothing is shown!!! Why? (the images are in the correct path)

<!DOCTYPE  html>
<head>
  <title>Test</title>
  <link rel="stylesheet" type="text/css" href="../css/divs.css" />
  <meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
  <div id="container">
    <div class="erba"></div>
    <div class="cordolo"></div>
    <div id="asfalto">
    
    </div> 
    <div class="cordolo"></div>
    <div class="erba"></div>
  </div>
</body>
</html>

/* divs.css */
html, body, #container, .erba, .cordolo, #asfalto {
  top: 0px;
  min-height: 100%;
  height: auto !important;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

html, body, #container {
  width: 100%;
   font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: small;
}

.erba {
  float: left;
  background-image:  url(../images/site/erba.jpg);
  background-repeat: repeat;
  width: 2%;
}

.cordolo {
  float: left;
  background-image: url(../images/site/cordolo.jpg);
  background-repeat: repeat-y;
  width: 1%;
}

#asfalto {
  float: left;
  background-image: url(../images/site/asfalto.jpg);
  background-repeat: repeat;
  text-align: center;
  vertical-align: top;
  width: 94%;
}
  • 4 Contributors
  • 5 Replies
  • 151 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Skorpio07
Member Avatar for selvaganapathy

Starting html tag is missing, Is that typo mistake ??

Anyway, Set the height of the 5 DIV tags or it should contain something inside to show

Member Avatar for selvaganapathy

Starting html tag is missing, Is that typo mistake ??

Anyway, Set the height of the 5 DIV tags or it should contain something inside to show

Member Avatar for emulman

the doctype correct is xhtml 1.1

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

the height as you can see is put in the CSS style sheet in a common description for all classes or ids and it's dynamic because of the total height of the page can be greater than 100%

Member Avatar for Louilly

You haven't set a height for anything as far as I can see

Member Avatar for Skorpio07

try this:

<body>  
<div id="container">    
<div class="erba" style="height:20%;"></div>    
<div class="cordolo" style="height:20%;"></div>    
<div id="asfalto" style="height:20%;">     
</div>     
<div class="cordolo" style="height:20%;"></div>    
<div class="erba" style="height:20%;"></div>  
</div>
</body>
</html>

that ought to get you further down the line...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.