Search code examples
csshtmlscale

The menu isn't scaling with the site and on smaller monitors the video / photos are off to the right

I asked for help earlier which was amazing and I am grateful for it, but I'm in need of your guys' expert assistance.

http://www.mrandmrsmagic.com is the site I'm working on and after simplifying the code and not having the positioning be an absolute, the menu bar for some odd reason isn't scaling with the site. Also the testimonials tab is cut off, which I'm guessing is due to the width not being long enough?

Also, on smaller monitors (15 inches+), they're saying that the video gallery and photo gallery are off to the right three inches, is there a way I can add padding or a margin to make them stick to the middle like they do with a larger screen? Any and all help would be appreciated.

Solution

  • Ok...

    Your Gallery is in a div that has been given a specified position.

    e.g

    #gallery {
    position: relative;
    left: 950px; /* This needs to be removed */
    top: -560px; /* This needs to be removed */
}

    That will always force the div off to the side.

    What I think you want and correct me if I'm wrong is two columns.

    That's actually quite easy to do and I've set up an example here to get you going.

    In my example the two columns are floated left and right to give them space in the middle and the two divs with the class .placeholder provide the hight and width.

    If you create something similar replacing each .placeholder with your image and gallery respectively then you should be able to keep videos within the main content.

    Hopefully this helps.

    Edit

    I'll try my best to explain everything properly.

    The content div in the example I linked was just there to wrap around the floated columns in that example. You do not need to duplicate it.

    The columns are floated left and right to separate the content and place it side-by-side. Adding a float simply means that they are to position themselves as far in the given direction as possible within their parent container.

    Floating content breaks the flow of the page though so the parent needs to have the class .clearfix added to prevent any content below the column from being disrupted. It also allows the parent to have height.

    Positioning the gallery differently for different monitor widths will only work with browsers that understand media blocks within css which ie7 and ie8 do not. You are much, much better off with a two column layout.