Ergebnis 1 bis 2 von 2

Thema: Menü soll sich an Hintergrund anpassen

  1. #1
    HTML Newbie
    Registriert seit
    07.07.2014
    Beiträge
    1
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Menü soll sich an Hintergrund anpassen

    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 )
    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: progidXImageTransform.Microsoft.gradient(startColorstr=' #292929', endColorstr='#252525');


    -ms-filter: "progidXImageTransform.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: progidXImageTransform.Microsoft.gradient(startColorstr=' #1c1c1c', endColorstr='#1b1b1b');


    -ms-filter: "progidXImageTransform.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( {


    -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( {


    -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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!
    Geändert von Gruene_Fee (07.07.2014 um 11:57 Uhr)

  2. #2
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Menü soll sich an Hintergrund anpassen

    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.

Ähnliche Themen

  1. Header soll sich Bildschirm anpassen
    Von Billbos im Forum HTML & CSS Forum
    Antworten: 24
    Letzter Beitrag: 23.05.2011, 00:33
  2. Divgröße soll sich dem Text anpassen
    Von micronix im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 10.05.2010, 20:34
  3. <div> Container soll sich anpassen!
    Von Martin279 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 18.04.2007, 16:11
  4. bild soll sich der auflösung anpassen
    Von Knüps im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 07.08.2005, 04:48
  5. IFRAME soll sich automatisch anpassen
    Von Micha im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 05.09.2004, 21:17

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •