Menü soll sich an Hintergrund anpassen

Gruene_Fee

Moin moin zusammen!

Ich habe die letzten Tage gefühlte 100 Foreneinträge gelesen, jedoch keine spezielle Problemlösung gefunden.

Mein Problem ist folgendes:
Ich habe ein Hingergrundbild, welches ich mittels BG-Strechter an die Bildschirmauflösung anpasse. Das funktioniert auch recht gut.
Dazu habe ich eine Menüleiste, als Klasse. Diese ist ( auf meinem Bildschirm ) auch perfekt ausgerichtet. ( so solls aussehen : https://www.dropbox.com/s/yfznd1igcq6wmu8/Untitled.png )
http://www.kienersebastianphotography.de
Wenn ich jetzt den Browser verkleinere, bleibt die Menüleiste allerdings fix auf ihrem platz. Obwohl ich im css alles auf "relative" gesetzt habe.
Ich habe auch versucht, mich ein wenig in responsive design reinzulesen, aber um das alles zu verstehen, fehlt mir einfach leider die Zeit.
Gibt es eine Möglichkeit diese Menüleiste, genauso wie den Hintergrund, an die Auflösung, bzw. Größe des Browsers anzupassen?
Ich habe auch schon probiert, das ganze Menü in einen container zu packen, aber das hat leider nichts geholfen....

Hier mal mein html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="drop down/maincss.css"/>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-bgstretcher-3.0.1.min.js"></script>
<link rel="stylesheet" href="bgstretcher.css" />
<link rel="stylesheet" href="drop down/maincss.css"/>
<title>SebastianKiener</title>
<link href="index css.css" type="text/css" rel="stylesheet" />
</head>

<body>
<script type="text/javascript">
jQuery(function($){
$("body").bgStretcher({
images: [ 'Photos/Hintergrund-1.jpg'
],
slideShow: false,
transitionEffect: "fade",
resizeProportionally: false,
imageWidth: 5000,
imageHeight: 3334,

});
});
</script>

<ul class="menu">

<li><a href="#s1">Menu</a>

<ul class="submenu">

<li><a href="Event.html">Concerts</a></li>

<li><a href="#">People/Portrait</a></li>

<li><a href="#">Fashion</a></li>

<li><a href="#">Landscapes</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Contact</a></li>

<li><a href="#">Impressium</a></li>

<li><a href="#">Submenu h</a></li>

</ul>

</li>

</ul>

</body>
</html>

Und das css:

@charset "utf-8";
/* CSS Document */

.menu, .menu ul {

list-style: none;

padding: 0;

margin: 0;

}

.menu {
height: 58px;
position: relative;
}

.menu li {

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525');

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#292929', endColorstr='#252525')";

position: relative;

min-width: 20px;
max-width: 182px;

}

.menu > li {
float: left;
position: relative;
top: 85px;
bottom: auto;
}

.menu > li:first-child {

border-radius: 5px 0 0;

}

.menu a {
border-left: 3px solid rgba(0, 0, 0, 0);
color: #CCCCCC;
font-family: "HelveticaNeueLT Std", "HelveticaNeueLT Std Blk Cn";
font-size: 14px;
line-height: 40px;
padding: 0 25px;
text-transform: uppercase;
text-decoration: none;
background-color: #000;
display: block;
position: relative;
}
.menu li:hover {

background-color: #1c1c1c;

background: -moz-linear-gradient(#1c1c1c, #1b1b1b);

background: -ms-linear-gradient(#1c1c1c, #1b1b1b);

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1c1c1c), color-stop(100%, #1b1b1b));

background: -webkit-linear-gradient(#1c1c1c, #1b1b1b);

background: -o-linear-gradient(#1c1c1c, #1b1b1b);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b');

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#1c1c1c', endColorstr='#1b1b1b')";

background: linear-gradient(#1c1c1c, #1b1b1b);

border-bottom: 2px solid #222222;

border-top: 2px solid #1B1B1B;

}

.menu li:hover > a {

border-radius: 5px 0 0 0;

border-left: 3px solid #C4302B;

color: #C4302B;

}
.submenu {
left: 0;
max-height: 110;
position: relative;
top: 100%;
z-index: 0;
-webkit-perspective: 400px;
-moz-perspective: 400px;
-ms-perspective: 400px;
-o-perspective: 400px;
perspective: 400px;
height: auto;
width: 200px;
clear: left;
}

.submenu li {

opacity: 0;

-webkit-transform: rotateY(90deg);

-moz-transform: rotateY(90deg);

-ms-transform: rotateY(90deg);

-o-transform: rotateY(90deg);

transform: rotateY(90deg);

-webkit-transition: opacity .4s, -webkit-transform .5s;

-moz-transition: opacity .4s, -moz-transform .5s;

-ms-transition: opacity .4s, -ms-transform .5s;

-o-transition: opacity .4s, -o-transform .5s;

transition: opacity .4s, transform .5s;

}

.menu .submenu li:hover a {

border-left: 3px solid #454545;

border-radius: 0;

color: #ffffff;

}

.menu > li:hover .submenu, .menu > li:focus .submenu {

max-height: 2000px;

z-index: 10;

}

.menu > li:hover .submenu li, .menu > li:focus .submenu li {

opacity: 1;

-webkit-transform: none;

-moz-transform: none;

-ms-transform: none;

-o-transform: none;

transform: none;

}

.menu li:hover .submenu li:nth-child(1) {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-o-transition-delay: 0s;

transition-delay: 0s;

}

.menu li:hover .submenu li:nth-child(2) {

-webkit-transition-delay: 50ms;

-moz-transition-delay: 50ms;

-ms-transition-delay: 50ms;

-o-transition-delay: 50ms;

transition-delay: 50ms;

}

.menu li:hover .submenu li:nth-child(3) {

-webkit-transition-delay: 100ms;

-moz-transition-delay: 100ms;

-ms-transition-delay: 100ms;

-o-transition-delay: 100ms;

transition-delay: 100ms;

}

.menu li:hover .submenu li:nth-child(4) {

-webkit-transition-delay: 150ms;

-moz-transition-delay: 150ms;

-ms-transition-delay: 150ms;

-o-transition-delay: 150ms;

transition-delay: 150ms;

}

.menu li:hover .submenu li:nth-child(5) {

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-ms-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.menu li:hover .submenu li:nth-child(6) {

-webkit-transition-delay: 250ms;

-moz-transition-delay: 250ms;

-ms-transition-delay: 250ms;

-o-transition-delay: 250ms;

transition-delay: 250ms;

}

.menu li:hover .submenu li:nth-child(7) {

-webkit-transition-delay: 300ms;

-moz-transition-delay: 300ms;

-ms-transition-delay: 300ms;

-o-transition-delay: 300ms;

transition-delay: 300ms;

}

.menu li:hover .submenu li:nth-child(8) {

-webkit-transition-delay: 350ms;

-moz-transition-delay: 350ms;

-ms-transition-delay: 350ms;

-o-transition-delay: 350ms;

transition-delay: 350ms;

}

.submenu li:nth-child(1) {

-webkit-transition-delay: 350ms;

-moz-transition-delay: 350ms;

-ms-transition-delay: 350ms;

-o-transition-delay: 350ms;

transition-delay: 350ms;

}

.submenu li:nth-child(2) {

-webkit-transition-delay: 300ms;

-moz-transition-delay: 300ms;

-ms-transition-delay: 300ms;

-o-transition-delay: 300ms;

transition-delay: 300ms;

}

073.submenu li:nth-child(3) {

-webkit-transition-delay: 250ms;

-moz-transition-delay: 250ms;

-ms-transition-delay: 250ms;

-o-transition-delay: 250ms;

transition-delay: 250ms;

}

.submenu li:nth-child(4) {

-webkit-transition-delay: 200ms;

-moz-transition-delay: 200ms;

-ms-transition-delay: 200ms;

-o-transition-delay: 200ms;

transition-delay: 200ms;

}

.submenu li:nth-child(5) {

-webkit-transition-delay: 150ms;

-moz-transition-delay: 150ms;

-ms-transition-delay: 150ms;

-o-transition-delay: 150ms;

transition-delay: 150ms;

}

.submenu li:nth-child(6) {

-webkit-transition-delay: 100ms;

-moz-transition-delay: 100ms;

-ms-transition-delay: 100ms;

-o-transition-delay: 100ms;

transition-delay: 100ms;

}

.submenu li:nth-child(7) {

-webkit-transition-delay: 50ms;

-moz-transition-delay: 50ms;

-ms-transition-delay: 50ms;

-o-transition-delay: 50ms;

transition-delay: 50ms;

}

.submenu li:nth-child(8) {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

-ms-transition-delay: 0s;

-o-transition-delay: 0s;

transition-delay: 0s;

}

Falls es dafür eine Lösung gibt, wäre ich sehr, sehr dankbar!!!

Liebe Grüße,
Sebastian

explanator

Na Super.

100 Beiträge gelesen und nicht einmal bemerkt, dass Code nicht wild in den Beitrag hinein kopiert wird sondern in einem extra Kasten landet, den man durch den Schalter im Editor Code einfügen findet?
dort gibt es zudem auch Code Schalter für HTML und PHP, bitte nutze diese Möglichkeit, da sich kein Mensch durch deinen Beitrag durchwühlen wird.

Besser ist in deinem Fall wohl auch alles online zu stellen, zur Not bei einem Freehoster, und uns den Link zu geben.

Im übrigen ist es nicht sinnvoll CSS3 mit XHTML zu verwenden. Nutze HTML5 dafür.

Tags