Skip navigation
lucasbuck2
lucasbuck2 Calculating status...
Currently Being Moderated

Newbie problem with overlapping areas

Jun 19, 2012 8:42 PM

Tags: #overlap

Sorry, I'm new and learning Dreamweaver and web design. I'm having an issue and can't track down what I'm doing wrong. I'm using a built in template and trying to figure out how things work. I have a sidebar with a jpg in it (which I'm going to use for my menu). Beside it is content (the text that comes in the template). I've tried different settings for width by pixel and percent, but in the preview window when I narrow it at a certain point the text in 'content' will spill over onto the jpg in 'sidebar'. Hope I explained that right. Any suggestions what I'm missing?

640 Views   7 Replies   Latest reply: lucasbuck2, Jun 21, 2012 6:24 AM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Jun 19, 2012 10:35 PM   in reply to lucasbuck2
    Report

    You are missing a link to your site which will enable us, along with you, to observe this creation.

     

    Gramps

     
    |
    Mark as:
  • lucasbuck2
    Currently Being Moderated
    2. lucasbuck2,
    Jun 20, 2012 6:13 AM   in reply to Ben Pleysier
    Report

    Actually, I don't have a site setup yet. but thank you for the reply. I was testing it in preview. I think it's because the jpg in the sidebar doesn't scale, so when the content does, it overlaps. I guess it can't be avoided.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    3. Ben Pleysier,
    Jun 20, 2012 6:20 AM   in reply to lucasbuck2
    Report

    Do not apply a width in the image tag. set your css to max-width:100%; max-height:100%;

    Also, read this http://unstoppablerobotninja.com/entry/fluid-images

     

    Gramps

     
    |
    Mark as:
  • lucasbuck2
    Currently Being Moderated
    4. lucasbuck2,
    Jun 20, 2012 9:53 AM   in reply to Ben Pleysier
    Report

    That worked, but now when I shrink the browser window (make it more narrow) the text in 'content' disappears at a certain point. But maybe that's normal. I also notice if you preview it or load it from a device (my phone) it puts all the text down underneath everything, below the sidebar. If you could look I threw it up (sorry, it's still ugly) at www.adventureeducational.com

     

    Feel free to point out anything else compatibility wise I'm doing wrong. I'm just a teacher trying to migrate from Frontpage. Thanks for the help!

     
    |
    Mark as:
  • Nancy O.
    Currently Being Moderated
    5. Nancy O.,
    Jun 20, 2012 11:21 AM   in reply to lucasbuck2
    Report

    Liquid layouts are very tricky to work with.  To better control your layout, change your CSS to this:

     

    .container {

    max-width: 1256px;

    min-width: 1000px;

    background: #FFF;

    margin: 0 auto; /**with width, this is centered**/

    }

     

     

     

    Nancy O.

     
    |
    Mark as:
  • noviceconnie
    Currently Being Moderated
    6. noviceconnie,
    Jun 20, 2012 9:38 PM   in reply to Nancy O.
    Report

    I asked a question yesterday about sidebar over=run and this suggestion to change the CSS for container solved my problem.  Thanks.

     
    |
    Mark as:
  • lucasbuck2
    Currently Being Moderated
    7. lucasbuck2,
    Jun 21, 2012 6:24 AM   in reply to lucasbuck2
    Report

    Thanks for the help!

     
    |
    Mark as:
Actions

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