Hello,

I recently got into Web Design and am trying to copy a website to practice and develop my skills.

I decided to use Weebly since I am somewhat familiar bloggging with it but I've never tried editing any of the HTML or CSS like I am now. I chose the standard theme and found a site which uses a much nicer theme and that is what I am trying to reproduce from scratch with just the standard theme.

What I am having trouble with is reproducing the following div found in this picture: What I Want below the content area and above the footer: What I Have

I tried making a new div under the content area div and gave the div CSS properties but with anything I try
I never see the new div I created.

Here is the HTML I have for that area:

<div id="content">
                {content}
                <div class="clear"></div>
                            </div>
                            </div>
                            <div id="bottom-content">
                            {area-name:content}
                            <div class="clear"></div>
                            </div>
                <div id="footer">
            {footer}
            <div class="clear"></div>

And the CSS:

#content {
    min-height: 600px;
    padding: 15px 25px 25px;
    background: #fff;

    background-image:url(contentbtm.jpg);
    background-position:initial initial;
    background-repeat:no-repeat no-repeat;
    position:relative;    
}

#bottom-content {
  background-color:#CAC3B9;
  border-bottom-color:#16130C;
  border-bottom-style:solid;
  border-bottom-width:1px;
  height:auto !important;
  min-height:50px;
  padding:10px 20px 30px;
  position:relative;
  width:940px;
}

If anyone can help me figure this out I'd be very greatful!

I can donate bitcoins to those who can!

You forgot to close the footer div.
You have this:

                <div id="footer">
            {footer}
            <div class="clear"></div>

It should look like this:

                <div id="footer">
            {footer}
            **</div>**
            <div class="clear"></div>

Oh, I did not copy all the remaining code by mistake, it is a nested div with code:

<div id="content">
                {content}
                <div class="clear"></div>
                            </div>
                            </div>
                            <div id="bottom-content">
                            {content}
                            <div class="clear"></div>
                            </div>
                <div id="footer">
            {footer}
            <div class="clear"></div>
        </div>
    </div>
</div>
</body>
</html>

Apparently it was a problem with the Weebly CMS. I changed the page layout to a blank one, insert the code, had the Home Page set to the new page layout, and now its working.

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.