Home/ Questions/Q 8841569
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-14T10:45:04+00:00

Now, I’m a real beginner, just starting, figuring out things, testing and trying html

  • 0

Now, I’m a real beginner, just starting, figuring out things, testing and trying html and css. I want to make something more or less like this (see picture). I want it to fully scale to fit the browser/resolution preserving aspect ratio.

my layout

My html and css code is below. The background image scales fine but now I want my navigation to scale the same way. How to do it? What to change? I also want to have a dotted line under the solid one (above the navigation). Any advice? 🙂 Just starting/learning/making mistakes 🙂

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>My Layout</title>
        <link rel="stylesheet" type="text/css" href="style.css"/>
        </head>
        <body>
        <div id="navigation">
        <ul>
            <li> <a href="#"> HOME </a></li>
            <li> <a href="#"> O MNIE </a></li>
            <li> <a href="#"> PORTFOLIO </a></li>
            <li> <a href="#"> OFERTA </a></li>
            <li> <a href="#"> STREFA ŚLUBNA </a></li>
            <li> <a href="#"> PUBLIKACJE </a></li>
            <li> <a href="#"> WSPOŁPRACA </a></li>
            <li> <a href="#"> BACKSTAGE </a></li>
            <li> <a href="#"> KONTAKT </a></li>
    </ul>
    </div>
    </body>
</html>

And css:

html 
{ 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}
#navigation
{
    width: 100%;
    height: 60px;
    background-color: black;
    margin-left: auto;
    margin-right: auto;
    padding: 0 0 0 0;
    position: absolute;
    bottom: 0px;
    border-top-style: solid;
    border-color: white;
    border-width: thin;
}
#navigation ul
{
    list-style-type: none;
    float: right;
    margin-left: auto;
    margin-right: auto;
}
#navigation ul li
{
    float: left;
    list-style: none;
    margin-left: 18px;
    margin-right: 18px;
}
#navigation li a
{
    color: #FFF; 
    text-decoration:none;
    font-family: "Calibri";
    text-transform:uppercase;
}

#navigation li a:hover
{
    text-decoration:none;
    color: #F69;
}
#navigation li a:active
{
    color: #F69;
}
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You need to set any widths, heights, margins and paddings of the navigation elements to a percentage value. Maybe also set a percentage value to font-size. Just play around with numbers to see how thats affects your layout. In short, don’t use fixed pixel values for the layout. You may use them to style individual buttons or similar elements in the layout.

    BTW: Browser Support for background-size values contain and cover:

    • Chrome 3.0
    • Firefox (Gecko) 3.6 (1.9.2)
    • Internet Explorer 9.0
    • Opera 10.0
    • Safari (WebKit) 4.1 (532)

    (as stated at https://developer.mozilla.org/en-US/docs/CSS/background-size)

    To your dotted border: you could use a horizontally repeated background image for such a layout or you set a solid border to a wrapper-element and a dotted border to the inner navigation-element.

    • 0