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