Hi everybody!

I'm new to web development, photography being my thing and I've just created my self a website.
I used photoshop cs3 to design most of the pages and a "simpleview" code for the slideshows.
When doing the designs i used my native screen resolution: 1920x1080 and it works fine for my screen but doh! Not for any smaller screens...

Is there any way i can add a code that would adapt the page to the users screen resolution?
I had a look round the internet and seems to me that there are two ways:

-Using floating elements which I think would'nt work with the way i designed everything, or:
-Setting page sizes to a percentage and not a fixed pixel size, which sounds like the way to go in my case.

But my knowledge in coding is next to none, I can just about add a return button or change a text color, but thats it.
Would anyone here be able to give me a hand? It would be greatly appreciated!

The website is: http://www.finnscott.fr

And here is the code for the index.html page:

<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (Home.psd) -->
<table id="Table_01" width="1920" height="969" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="7">
            <img src="images/background.gif" width="1920" height="826" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="images/background-02.gif" width="721" height="143" alt=""></td>
        <td rowspan="2">
            <a href="http://finnscott.fr/galeries/galeries.html">
                <img src="images/Galeries.jpg" width="123" height="59" border="0" alt=""></a></td>
        <td colspan="5">
            <img src="images/background-04.gif" width="1076" height="1" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/background-05.gif" width="87" height="142" alt=""></td>
        <td>
            <a href="http://finnscott.fr/bio/bio.html">
                <img src="images/Bio.jpg" width="39" height="58" border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="images/background-07.gif" width="91" height="142" alt=""></td>
        <td>
            <a href="http://finnscott.fr/contact/contact.html">
                <img src="images/contact.jpg" width="119" height="58" border="0" alt=""></a></td>
        <td rowspan="2">
            <img src="images/background-09.gif" width="740" height="142" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/background-10.gif" width="123" height="84" alt=""></td>
        <td>
            <img src="images/background-11.gif" width="39" height="84" alt=""></td>
        <td>
            <img src="images/background-12.gif" width="119" height="84" alt=""></td>
    </tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html>

Best wishes from (currently) cold France.

Member Avatar for LastMitch

Is there any way i can add a code that would adapt the page to the users screen resolution?

It's usually set 100% width in the div container.

Regardless of how the page is the design if you slice the buttons correctly and other things and also set the width in the div container.

I don't see any issue from there.

You must of made some changes after you posted this. I checked out the site on a smaller resolution and it appears to look okay to me except for sometimes a little tiny bit of a picture will be out of the view. I see the images are resizing as well.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.