mercredi 8 mai 2019

How to set default page dimension in CSS?

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 code for the header:

<div id="header">
        <div id="logo">
            <img src="..\codice\export\logo.png" alt="logo">
        </div>
</div>

And this is my 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;
}

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.

Aucun commentaire:

Enregistrer un commentaire