CODEWITHSUNDEEP
csshtml
user1340052
user1340052

Reputation: 1417

Disappearing DIVs on runtime?

In DreamWeaver everything is compiled okay and looks normal on the design tab, but when I switch over to localhost my contented DIVs only show text on the left side, when they should be in the middle.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/css/style.css" type="text/css">       
    <title>Title</title>
  </head>
  <body>

    <img src="images/barColor.jpg" width="1" height="71" alt="barColor" />

    <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>   

    <div class="wrdLatest" id=1> content of id 1   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>              </div>                                                                     
<div class="wrdLatest" id=2> content of id 2   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=3> content of id 3   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>              </div>
<div class="wrdLatest" id=4> content of id 4   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=5> content of id 5   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=6> content of id 6   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=7> content of id 7   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=8> content of id 8   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=9> content of id 9   <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=10> content of id 10 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=11> content of id 11 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>
<div class="wrdLatest" id=12> content of id 12 <p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p> </div>

  </body>
</html>

And then the style.css

  #wrdLatest {
        background: url('../images/spacing.png') repeat-y;
        z-index: -1;
        padding: 20px;
        margin-left: auto;
        margin-top: auto;
        width: 75%;
        height: 100%;
        min-height: 25px;
        min-width: 25px;
        background-repeat: repeat-y;
        style="text-align: center;"
    }

1What I want 1What I am getting

Any help is much appreciated... and yes, I am new to HTML.

Upvotes: 0

Views: 112

Answers (2)

neo108
neo108

Reputation: 5246

Have modified the CSS to achieve a layout something like you wanted. Look at this jsFiddle.

Have used a border-left to show the left orange border. And also you have to use .wrdLatest instead of #wrdLatest for div class

The modifed version of the CSS...

.wrdLatest {
    background: url('../images/spacing.png') repeat-y;
    z-index: -1;
    padding: 5px 20px 70px 20px;
    margin-left: auto;
    margin-top: auto;
    width: 75%;
    height: 100%;
    min-height: 25px;
    min-width: 25px;
    background-repeat: repeat-y;
    text-align: left;
    border-left: 2px solid #FE642E;
}

And have removed all the extra empty <p>'s.

Hope this helps.

Upvotes: 0

The Alpha
The Alpha

Reputation: 146191

You have error in your code, you didn't close all of your divs with a closing tag </div> and also in your css style="text-align: center;" is not right, close all divs like

<div>Content</div>

and remove the line style="text-align: center;" from #wrdLatest or it should be

text-align: center;

wrdLatest is class in your HTML but you've used ID # in your css. A class should be as follows

.wrdLatest{
    background: url('../images/spacing.png') repeat-y;
    z-index: -1;
    padding: 20px;
    margin-left: auto;
    margin-top: auto;
    width: 75%;
    height: 100%;
    min-height: 25px;
    min-width: 25px;
    background-repeat: repeat-y;
}

Upvotes: 1

Related Questions