homepage images format goes wrong on smaller screen size

[saunders1989]

my problem im having is when i view my website on a latptop my homepage layout doesnt look right. it has 2 images at the top and then each one underneath it. obviously this isnt what i want. on my screen i can see what it normally looks like. you can see it at www.bleanphotos.co.uk

i have attached the image of how it looks when you view the website on a laptop. could someone please help me on what i would need to do as im not too great at this. i have also attached a txt file of my css (that corosponds to my home page) so you can see what the problems are.

thanks for reading

[traq]

read here - I suspect it's a matter of screen resolution, your laptop screen is too small to show all the images with their margins, so some images are "wrapped" to the next line.

If you let them float with inline-block (as described in the linked article) -and- leave off the static margins, you'll be able to allow them to rearrange themselves to fit the screen size smoothly.

[saunders1989]

thanks for that. when i do this:

#menu_images {
	width:auto;
	padding: 0 0 20px;
	margin-left:-100px;
	margin-top:-40px;
	display:inline-block;
}

it works on the screen. but if i get rid of the fixed margins it goes funny again.

[traq]

sorry, I meant get rid of the individual margins, such as

#miscellany
{
	height:195px;
	width:280px;
	float:left;
	margin-left:-585px;
	margin-top:265px;
}

Just give everything a smaller margin (say, 10px) for spacing between items, instead of for positioning.

In fact, you should probably eliminate all of those #id entries completely - the width and height are already defined in the <img> tag, the float is unnecessary (and potentially problematic), and the margins (also problematic) will be handled in the new css (below).

Try this model:

<div id="menu_images">
    <ul>
        <li class="inline">
            <div id="buildings" class="menu">
                <a href="Buildings.php">
                    <img src="Menu_Images/Buildings.png" width="280" height="195" alt="Buildings" />
                </a>
            </div>
        </li>
        <li>
            <!-- other image div -->
        </li>
        <!-- etc. -->
    </ul>
</div> 

with this css:

    li.inline {
		display: -moz-inline-stack;
		display: inline-block;
		vertical-align: top;
		margin: 10px;
		zoom: 1;
		*display: inline;
    }

Looks pretty good from early testing (try resizing the browser window to see what happens)

[saunders1989]

thanks for the code. i couldnt seem to get it to work for some reason. ive gone down a different route.

ive changed my css to this:

/*nav
#menu_images {
	width:auto;
	padding: 0 0 20px;
	margin-left:-100px;
	margin-top:-40px;
	display:inline-block;
}
*/

#buildings {
	height:195px;
	width:280px;
	float:left;
/*margin-left:155px;*/
	margin-top:45px;
}

the only problem now is if you look at my website at www.bleanphotos.co.uk the images are over to the left. i want them to go into the centre of the wrapper. any ideas?

thanks

EDIT: Ive tried marging it but that just made it look worse. so i dont know how i would sort it out

[traq]

You might try wrapping all of your images in a div with text-align: center.

I haven't looked through all your css, but there seem to be some overlapping classes/ids/definitions, so there may be a conflict somewhere that's preventing something else from working properly. I'd suggest cleaning it all up, if just to prevent future problems.

Let me know if you'd like to try and figure out the inline-block solution.

[saunders1989]

what ive done is the text-align:centre and that seemed to be working. what is the difference between the inline-block version? is that considered better practice?

[traq]

inline-block would be another solution for your floats (centering is a separate issue). The floats should work fine - your images are all exactly the same size, so they shouldn't jumble each other up. You might have problems in IE / older versions of IE if you ever have a left margin along with a left float, so I would personally consider inline-block a better solution. But if your version does what you want, then that means it works fine.

[saunders1989]

oh okay thanks for that. i wanna learn what i can so i can understand different methods on how to do stuff. ohhh i used to do float:left and then have a left margin but ive started doing float:left and then margin:0 10px 0 0; which is i think better