Photoshop Question posted in
The official user guide can be found here.

Width of website to always fit 100% of browser page width – Photoshop

I am a 3D artist by profession, however I have recently been trying to create a website for myself from scratch. My needs are very simple – a widescreen website which consists of a background image and thumbnails which once clicked load a overlay pop up showing further information on that particular content. The pop-up overlay is not the issue here.

My current problem is that I need my page to always be 100% of the browser width, so that means it must scale – along with all the content (thumbnails) in it. I created my first attempt on a screen which is 1920×1080 and the result was perfect, however – when I loaded it on my laptop which has a 1366 screen, it resulted in only showing me a slice of the full page, and gave me scroll bars to view the rest.

I am placing the thumbnails via px as I have got the values from Photoshop but I understand that my needs can only be accomplished via % – how can i overcome this?

Here is a visual of my setup http://i.imgur.com/ZdgTRYk.jpg

Grey is browser window
Red is background
Green is content

Everything should scale at the SAME rate.

Here is my HTML

<body>

<div id="background">
<img src="images/background.png">
<div id="box3thumb">
img src="images/box3thumb.png">
</div>
</div>

</body>

and my CSS

#background {
position:relative;
left:0px;
}
#box3thumb {
position:absolute;
left:514px;
top:117px;
width:92px;
height:200px;
}

I really appreciate any help I might recieve on this.

Thanksm

Elliott

Tags:

3

Answers


  1. 0

    ok, for your #background, you can use this css to scale the browser:

    #background{
    width: 100%;
    background: red;
}

    and for your thumbnails, I don’t understand very well how you want them placed, but according to your image, you’ll need to put them inline:

    #thumbnails{
    display: inline-block;
    margin-left: 15%;
}

    The % of the margin may vary depending on what you want.

    Login or Signup to reply.
  2. 0

    If you set the body and html elements of your page to

    CSS:

    html, body 
{
    position: relative;
    height: 100%;
    width: 100%;
    overflow: hidden;
}

    This will prevent scrollbars from appearing, while maintaining the full width and height of the screen, regardless of resolution. As for your thumbnails, if you have a set number of thumbnails then you can set the widths of your thumbnails to say, 10% width and height with a margin: 1%;, this will allow you to fit roughly 64 thumbnails, but they will get small if the user has a shitty resolution.

    .thumbnail
{
    position: relative;
    display: inline-block;
    width: 10%;
    height: 10%;
    margin: 1%;
}

    EDIT ——————

    With large thumbnails like that you could make it more like this:

    .thumbnail
{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 20%;
    margin: 5%%;
}
    Login or Signup to reply.
  3. 0

    Use in style.css

    #background{
    width: 90%;
    background: red;
}

/*thumbnails*/

#thumbnails{
    display: inline-block;
    margin-left: 10%;
    vertical-align:text-bottom;
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search