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

How to set default page dimension in CSS? – Photoshop

I’m trying converting my Photoshop design into a web site, manually writing HTML and CSS. It’s my first time doing this type of exercise, so I’m having a little problem from the get-go with page dimensions.

I did my PS design using a 1920px page width, this is the fullscreen result. Writing CSS, I set header width to 1920px and logo width to 150px (as in the PS file). But I obtain this (don’t worry about logo position).

As you can see, the page is very “zoomed in” and the scrollbar appears down below. I want to display the whole page without a scrollbar, just as in PS, keeping the same ratio between elements.

This is my HTML & CSS code for the header:

#logo img {
  float: left;
  width: 150px;
  height: 150px;
}

#header {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 1920px;
  /* I also tried width: 100% */
  height: 100px;
  background: #000000;
}
<div id="header">
  <div id="logo">
    <img src="..codiceexportlogo.png" alt="logo">
  </div>
</div>

As shown in the code, I also tried setting the header’s width to 100% but this way the logo proportion (150 px / 1920 px) was not respected.

How can I write in CSS: “1920 should be your 100% when visualizing the page with the browser”?

I’m sorry if this is a silly question but it’s my first time working with these tools.

Tags:

2

Answers


  1. 0

    I made this jsfiddle

    You can check with a fluid width: 100% you should not have this horizontally scrollbar

    Then i added a header_content div with a fixed width of 520px (then you can see it is centered and well placed. but you will need to change that value according to your photoshop header width.

    Note : css margin:0 auto makes your div centered horizontally.

    enter image description here

    Login or Signup to reply.
  2. 0

    Some additional HTML and CSS may solve the problem for you! And I’m considering you have to add the menu which you not yet done. Here is my solution. I put some helpful comment that you help you to understand the code properly. You can have same code at my codepen example.

    body {
  padding-top: 150px;
  /* if you don't add  this your code will be hidden under the #heade */
}

#logo img {
  float: left;
  width: 150px;
  height: 150px;
}

#header {
  position: absolute;
  top: 0;
  /*No need to add 'px' when the value is 0 */
  left: 0;
  /* I also tried width: 100% */
  right: 0;
  /*Thsi will cover the right side. So no need to declear a width*/
  /* logo has some space at to so we are adding a padding at top*/
  padding-top: 25px;
  height: 75px;
  /* reduce to 75px so header will be just half of the logo image*/
  background: #000000;
}

.container {
  width: 1170px;
  /* hae to make this responsive for smallar devices*/
  box-sizing: border-box;
  margin: 0 auto;
}

.navigation {
  float: right
}


/*Eacaping the  proper code for the navigation so here is some face code */

.navigation {
  color: #fff;
}
    <div id="header">
  <div class="container">
    <div id="logo">
      <img src="http://www.logospng.com/images/22/itunes-12-logopng-wikimedia-commons-22786.png" alt="logo">
    </div>
    <nav class="navigation">
      Home Link1 link2 ecc
      <!-- I escaping the coding of nav here -->
    </nav>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search