0
Ich habe eine feste Navigationsleiste und ein Bild auf meiner Webseite. Ich möchte ein anderes Bild auf der Oberseite dieses Bildes hinzufügen, aber wenn ich „position: relative“ und position: absolute“und ich blättern, die 2 Bilder gehen über meine NavigationsleisteHTML/CSS-Bild oben auf einem Bild mit einer finxed Navigationsleiste
Kann jemand helfen
.?ich kann Code schreiben, wenn nötig.
(menueBar.css)
#menu-bar {
\t font-family: Arial;
\t font-size: 20px;
\t }
#name {
\t color: #ccc;
\t margin-left: 15px;
\t margin-top: 15px;
}
#nav{ background-color: #222;
position: fixed;
width: 100%;
height: 133px;
top: 0;
left: 0;
}
#nav-wrapper{ width: 600px;
\t margin: 0px 0 0 50px;
\t text-align:left;
\t }
#nav ul{ list-style-type: none;
\t \t padding: 0 0 0 0;
\t \t
\t \t }
#nav ul li{ display: inline-block; }
#nav ul li:hover{ background-color: #333; }
#nav ul li a{ color: #CCC;
\t \t \t display: block;
\t \t padding: 15px ;
\t \t \t text-decoration: none;
\t \t \t }
------------------------------------------------------------------------------
(main.css)
body {
\t font-family:arial;
} \t
h1,h2{
\t margin-top: 0px;
\t color:blue;
\t
}
p {
\t background: #666;
\t color: white;
\t padding : 10px;
}
#header-footer {
\t margin: 66px 0 0 0;
\t
}
\t \t----------------------------------------------
(index.html)
<!doctype html>
<html>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t <head>
\t \t <link href="styles/main.css" rel="stylesheet" type="text/css" />
\t \t <link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
\t \t <title>My WebPage</title>
\t </head>
\t <div id="menu-bar">
\t <body>
\t \t <div id="nav">
\t \t \t <div id="nav-wrapper">
\t \t \t \t <div id="name" >
\t \t \t \t \t <p1 style="font-size:40px">Manish Saraf</p1>
\t \t \t \t </div>
\t \t \t \t <ul>
\t \t \t \t <li><a href="index.html"><u>Home</u></a></li>
\t \t \t \t <li><a href="page2.html">Resume</a></li>
\t \t \t \t <li><a href="page3.html">Projects</a></li>
\t \t \t \t <li><a href="page4.html">Contact me</a></li>
\t \t \t \t </ul>
\t \t </div>
\t \t </div>
\t </body>
\t </div>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ --> \t
\t <!--Header-footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t <div id ="header-footer" >
\t \t <img src="images/header-footer.jpg" id="header-footer" style="width:100%;height:100%;">
\t \t <img src="images/me.jpg" id="me" style="width:100px; height:100px; ">
\t </div>
\t <!--header-footer~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t \t <h1>My Website</h1>
\t \t <h2>This is my homepage</h2>
\t \t <p>And all my homepage Content</p>
</html>
--------------------------------------------------
(page2.html)(resume)
<!doctype html>
<html>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t <head>
\t \t <link href="styles/main.css" rel="stylesheet" type="text/css" />
\t \t <link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
\t \t <title>Resume</title>
\t </head>
\t <div id="menu-bar">
\t <body>
\t \t <div id="nav">
\t \t \t <div id="nav-wrapper">
\t \t \t \t <div id="name" >
\t \t \t \t \t <p1 style="font-size:40px">Manish Saraf</p1>
\t \t \t \t </div>
\t \t \t \t <ul>
\t \t \t <li><a href="index.html">Home</a></li>
\t \t \t <li><a href="page2.html"><u>Resume</u></a></li>
\t \t \t \t \t \t <li><a href="page3.html">Projects</a></li>
\t \t \t <li><a href="page4.html">Contact me</a></li>
\t \t \t \t </ul>
\t \t </div>
\t \t </div>
\t </body>
\t </div>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t \t <h1>Page 2</h1>
\t \t <h2>This is my page 2</h2>
\t \t <p>And all my page 2 Content</p>
\t </body>
</html>
---------------------------------------------------------------
(page3.html)(projects)
<!doctype html>
<html>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t <head>
\t \t <link href="styles/main.css" rel="stylesheet" type="text/css" />
\t \t <link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
\t \t <title>Projects</title>
\t </head>
\t <div id="menu-bar">
\t <body>
\t \t <div id="nav">
\t \t \t <div id="nav-wrapper">
\t \t \t \t <div id="name" >
\t \t \t \t \t <p1 style="font-size:40px">Manish Saraf</p1>
\t \t \t \t </div>
\t \t \t \t <ul>
\t \t \t <li><a href="index.html">Home</a></li>
\t \t \t <li><a href="page2.html">Resume</a></li>
\t \t \t \t \t \t <li><a href="page3.html"><u>Projects</u></a></li>
\t \t \t <li><a href="page4.html">Contact me</a></li>
\t \t \t \t </ul>
\t \t </div>
\t \t </div>
\t </body>
\t </div>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t \t <h1>Page 3</h1>
\t \t <h2>This is my page 3</h2>
\t \t <p>And all my page 3 Content</p>
\t </body>
</html>
----------------------------------------------------------------------------
(page4.html)(contact me)
<!doctype html>
<html>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t <head>
\t \t <link href="styles/main.css" rel="stylesheet" type="text/css" />
\t \t <link href="styles/menuBar.css" rel="stylesheet" type="text/css" />
\t \t <title>Contact Me</title>
\t </head>
\t <div id="menu-bar">
\t <body>
\t \t <div id="nav">
\t \t \t <div id="nav-wrapper">
\t \t \t \t <div id="name" >
\t \t \t \t \t <p1 style="font-size:40px">Manish Saraf</p1>
\t \t \t \t </div>
\t \t \t \t <ul>
\t \t \t <li><a href="index.html">Home</a></li>
\t \t \t <li><a href="page2.html">Resume</a></li>
\t \t \t \t \t \t <li><a href="page3.html">Projects</a></li>
\t \t \t <li><a href="page4.html"><u>Contact me</u></a></li>
\t \t \t \t </ul>
\t \t </div>
\t \t </div>
\t </body>
\t </div>
\t <!--global~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
\t \t <h1>Page 4</h1>
\t \t <h2>This is my page 4</h2>
\t \t <p>And all my page 4 Content</p>
\t </body>
</html>
---------------------------------------------------------------------------------
Sie müssen nur noch hinzufügen, '# Menüleiste {z-index: 10;}' – LoicTheAztec