Skip navigation
Stratusphere_14
Currently Being Moderated

How do I put a div on top of another?

Mar 13, 2013 7:40 PM

Tags: #cs5 #background #image #div #dreamweaver #button #window #tag

I have one div tag for my header, and one for my body. Now I want to put buttons over them, how do I do it?

 

Any way that I can find leaves the buttons floating out in space, not anchored to the header. So they move around when the window is resized.

 

Help!

 
Replies
  • Currently Being Moderated
    Mar 14, 2013 5:06 AM   in reply to Stratusphere_14

    Put the buttons *in* the div tag. Make the header image a background image.  Locate the buttons within the header container by using margins on the buttons container or padding on the header container.

     

    Questions like this are best asked with a link to the page or a copy of the code involved - that way we don't have to guess about what you might have in your code.

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2013 5:21 AM   in reply to Stratusphere_14

    And do not use AP divs to try to do that.

     

    For the underlying div (assuming you have a background image) your CSS should be:

     

    .underlyingDiv {

         background-image: url("/images/myimage.jpg");

    }

    .divThatSitsOnTop {

         margin: (some margin code that places the div where you want it);

    }

     

    Your html will be:

     

    <div class="underlyingDiv">

    <div class="divThatSitsOnTop">This sits on top

    </div><!-- This ends  divThatSitsOnTop-->

    </div><!-- This ends underlyingDiv -->

     

    Now, I have used "Classes" here, not "IDs." Anything that occurs only once in a given web page may be an ID and not a class. Anything that is used several times in a web page must be a Class. Classes are defined in CSS with a dot before them, IDs with a hash (#).

     
    |
    Mark as:
  • Currently Being Moderated
    Mar 14, 2013 11:06 AM   in reply to Stratusphere_14

    You could save some time & start your project with one of the pre-built CSS layouts that comes with DW?

     

    Go to File > New > Blank page > HTML > Layouts. 

    Choose a layout from the 3rd panel  -- I recommend  "1 column fixed, centered, header and footer."

    Hit Create button.

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points