All geek questions in one place

Overlay Nav strip on background image

I create a website in a weird way

The site designer created a background image with a title and buttons for the navigation bar embedded in the image, and would like me to make them accessible using HTML.

This is actually not a problem when I can create it for a specific permission, as shown below. image overlay navigation bar

However, when a website change changes, the position of the navigation bar shifts to another area, making it useless.

changing the position of the navigation bar, which makes it useless

I need my navigation bar to align and scale to the background image.

HTML:

<!DOCTYPE html>
<head>
    <title>
        Patrick Walsh 3D
    </title>
    <link rel="stylesheet" type="text/css" href="theme.css">
</head>
<body>
    <div id="nav">
        <a href="index.html">
            <div id="homeButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="resume.html">
            <div id="resumeButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="tutorial.html">
            <div id="tutorialButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
        <a href="contact.html">
            <div id="contactButton">
                <!--This is an empty div, used to define a portion of the screen that is clickable-->
            </div>
        </a>
    </div>
</body>

CSS

<style>

#buffer{}


body{
    background-image:url(Background.png);
    background-size: cover;
    background-repeat: no-repeat;
}

#nav{
    background-color:white;
    opacity:.5;
    width:58%;
    height:50px;
    position:absolute;
    top:25%;
    left:21%;
}

#nav a{
    clear:left;
    float:left;
}

/*Divs that overlay buttons on background image*/
#homeButton{
    background-color:green;
    width:13%;
    height:80%;
    position: absolute;
    left:1%;
    top:2px;
}

#resumeButton{
    background-color:red;
    width:16%;
    height:80%;
    position: absolute;
    left:26%;
    top:2px;
}

#tutorialButton{
    background-color:blue;
    width:17%;
    height:80%;
    position: absolute;
    left:52%;
    top:2px;
}

#contactButton{
    background-color:orange;
    width:17%;
    height:80%;
    position: absolute;
    left:78%;
    top:2px;
}

</style>
+4
2

, ops .

+1

Source: https://habr.com/ru/post/1625673/

More articles:


All Articles