DIV position is not right

Discussion in 'HTML & Website Design' started by lespaul00, Nov 25, 2007.

  1. #1
    Hello,

    I created a DIV for advertising code on my website. In dreamweaver 8, I created a layer on the right side of my webpage, and placed the html code within this layer's div tags.

    When I publish my site, the ad does not show up in the area where I placed the layer in dreamweaver. Instead, it shows up on the left side of my page, over all my content!

    Is there a way to MAKE SURE the div layer I created stays over on the right side of my page?
     
    lespaul00, Nov 25, 2007 IP
  2. mikeyd

    mikeyd Peon

    Messages:
    39
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    you can try

    float:right;

    in the css for that div, if you add your code to your post it makes it easier
     
    mikeyd, Nov 25, 2007 IP
  3. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Here is the code...

    
    <div id="Layer8">
    
    advertising code...
    
    </div>
    Code (markup):
    I want this div to be placed 1000px from the left side of the page, and 200px from the top.

    L: 1000px
    T: 200px

    Is there an easy way to define this is the div tag code?
     
    lespaul00, Nov 25, 2007 IP
  4. bsklep

    bsklep Well-Known Member

    Messages:
    2,122
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    165
    #4
    margin-left: 1000px;
    margin-top: 200px;

    Cheers
     
    bsklep, Nov 25, 2007 IP
  5. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #5
    If you follow bsklep's advice, chances are the rest of your page will break. I can already tell the markup isn't fine because you're relying on Dreamweaver. The dirty solution to this would probably be

    This wouldn't screw anything up. Of course it would help to see the rest of the page. If you run into problems in IE where this whole element is disappearing or just some weird position, set position:relative on the parent element.
     
    soulscratch, Nov 25, 2007 IP
  6. bsklep

    bsklep Well-Known Member

    Messages:
    2,122
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    165
    #6
    You should try my way.. but add a little knowladge about divs... because when you use position:absolute etc... your site will propably crush on IE etc..
     
    bsklep, Nov 25, 2007 IP
  7. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #7
    Chances are he has other shit on his page, not a lone div which you probably thought of. Using margins would probably break it since it keeps it in the normal flow. He would have to re-adjust his whole site.

    I would ask him to give us a screenshot of what he wants the end result to look, or at least what he has currently.

    And how would it "crush" IE? Other than it not being in the normal flow (which is horrible but I bet his code isn't that great)? Or are you referring to the page breaks YOU received when you didn't apply position:relative on the parent element when you messed around with position:absolute.
     
    soulscratch, Nov 25, 2007 IP
  8. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #8
    I tried bsklep's idea, and i ran into a few problems.

    If I apply the code to one page, it works. However, if I apply it to a dreamweaver template file (which is what I want, so it cascades through my entire site), it does not work. It places the ads in the top left portion of my website, covering the content.

    Sure, I can provide screenshots:

    Here is a shot of my template file. It looks the way I'd like it:
    Noname2.jpg

    Here is an image of my index.cfm. This is a page that was created from my template file. So, it SHOULD have the ads placed the same as in the template image:
    Noname.jpg

    I will try soulscratch's suggestion, and report back. Thanks.
     
    lespaul00, Nov 25, 2007 IP
  9. bsklep

    bsklep Well-Known Member

    Messages:
    2,122
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    165
    #9
    In that case you should use position: absolute. It will be fastes way to do that.

    Thanks
     
    bsklep, Nov 25, 2007 IP
  10. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    I tried this (copied it in my div tag). I am still faced with the same issue. Any other ideas?

    Thanks!
     
    lespaul00, Nov 25, 2007 IP
  11. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #11
    Did you change the selector? Change "#selector" to whatever you've assigned whether it was a class or ID.
     
    soulscratch, Nov 25, 2007 IP
  12. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Still not working :(

    Here is what is in my CSS file:

    layer8 {
    position:absolute;
    left:1000px; top:117px;
    } 
    
    layer9 {
    position:absolute;
    left:1000px; top:435px;
    } 
    Code (markup):
    Here is what my dreamweaver template file looks like (the divs):

    <div id="Layer8">
    
    ad code...
    
    </div>
    <div id="Layer9">
    
    ad code...
    
    </div>
    Code (markup):
     
    lespaul00, Nov 25, 2007 IP
  13. bsklep

    bsklep Well-Known Member

    Messages:
    2,122
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    165
    #13
    Give us your full code.
     
    bsklep, Nov 25, 2007 IP
  14. lespaul00

    lespaul00 Peon

    Messages:
    283
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #14
    I got it to work. I noticed only my index.cfm file wasn't updating correctly (I had it open when I updated the template file). This must've been why it did not apply to my index.

    I re-created another index.cfm from my template. It now works. Thanks!!!!
     
    lespaul00, Nov 25, 2007 IP
  15. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #15
    You need to add the # character to the beginning of those IDs in your stylesheet for the style rule to be applied.

    in other words, layer8 becomes #layer8 (for instance).
     
    Dan Schulz, Nov 25, 2007 IP
  16. bsklep

    bsklep Well-Known Member

    Messages:
    2,122
    Likes Received:
    60
    Best Answers:
    0
    Trophy Points:
    165
    #16
    
    #layer8 {
    position:absolute;
    left:1000px; top:117px;
    } 
    
    #layer9 {
    position:absolute;
    left:1000px; top:435px;
    }
    
    Code (markup):

    
    <div id="layer8">
    
    ad code...
    
    </div>
    <div id="layer9">
    
    ad code...
    
    </div>
    
    
    Code (markup):
    Cheers
     
    bsklep, Nov 26, 2007 IP