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