Hallo zusammen,
ich habe auf meiner Seite zwei Elemente (Navileiste und Textslider). Ich bekomme es nicht hin, dass die CSS nur für das jeweilige Element gilt und nicht für die ganze Seite bzw. für das andere Element. Kann mir bitte jemand weiterhelfen?
Jedes Element soll jeweils unterschiedliche CSS Angaben haben und auch nur für das eine Element gelten. Ich finde leider keine Lösung.
Hier mein Code1:
<div id="navi"><ul> <nav> <a href="/text.html">START</a> <span></span> </nav> <nav> <a href="/text2.html">LEISTUNGEN</a> <span></span> </nav> <nav> <a href="/test3.html">REFERENZEN</a> <span></span> </nav> <nav> <a href="/test4.html">PREISE</a> <span></span> </nav><nav> <a href="/test5.html">KONTAKT</a> <span></span> </nav></ul></div>
<style>@import "compass/css3";#navi { list-style:none; font-family:opensanscondensed-bold; font-size:14px; text-align:right; margin-top:0px;letter-spacing:2px;}nav { position:relative; display:inline;}nav a { text-decoration:none; color:#FFFFFF; display:inline-block; padding:10px;}span { display:block; width:calc(100% - 23px); height:2px; background:transparent; position:absolute; left:10px; bottom:-10px;}nav a:hover { color:#0B468A;}nav a:hover ~ span { animation:ul 0.3s ease-out; background:#0B468A;}@keyframes ul { 0% { width:0;}100% { width:calc(100% - 23px);}}</style>
Code 2:
<div id="myPageContent" class="container-fluid"><section id="home"><div id="textSlider" class="row"> <div class="col-xs-12 col-sm-12 col-md-3 col-lg-4 iamCol"> <p>On</p> <p>Design</p> </div> <div class="col-xs-12 col-sm-12 col-md-7 col-lg-8 slideCol"> <div class="scroller"> <div class="inner"> <p>Text1</p> <p>Text2</p> <p>Text3</p> <p>Text4</p> </div> </div> </div> </div> </section></div>
<style>@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.…p.min.css);body { background: transparent; }
slider {font-family: opensanscondensed-bold;transition-duration: 0.4s; }
slider { font-family:opensanscondensed-bold !important; font-size: 13pt !important; font-weight: 300 !important;}
.container-fluid { padding-right: 0px !important; padding-left: 0px !important;}#myPageContent, section { height:100% !important; width:100% !important; }
/* Slider */#textSlider.row { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100% !important;}#textSlider div { color: #FFF; font-family: opensanscondensed-bold; text-transform: uppercase;}
.iamCol { text-align: right; float: left; font-weight: 300; font-size:30pt;}.iamCol p:nth-child(2) { margin-top: -20pt !important; }.slideCol { text-align: left; overflow: hidden; font-weight: 900; font-size:70pt; display: block; white-space: nowrap;}.slideCol p { margin: 0px !important; }
.scroller { height: 70pt; line-height: 70pt; overflow: hidden;}.scroller .inner { animation: 10s normal infinite running scroll; }@keyframes scroll { 0% {margin-top: 0px;} 15% {margin-top: 0px;}
25% {margin-top: -70pt;} 40% {margin-top: -70pt;} 50% {margin-top: -140pt;} 65% {margin-top: -140pt;}
75% {margin-top: -210pt;} 90% {margin-top: -210pt;}
100% {margin-top: 0px;}}
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */ @media only screen and (min-width : 320px) and (max-width : 479px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:20pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 25pt; text-align: center; margin-top: -20px; }}
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) and (max-width : 765px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:25pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 38pt; text-align: center; margin-top: -20px; }}
/* Small Devices, Tablets */@media only screen and (min-width : 768px) and (max-width : 992px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: center; font-size:30pt; } .iamCol p { display: inline !important; } .slideCol { font-size: 50pt; text-align: center; margin-top: 5px; }}
/* Medium Devices, Desktops */@media only screen and (min-width : 992px) and (max-width : 1200px) { #textSlider.row { margin-right: 0px !important; margin-left: 0px !important; } .iamCol { text-align: right; font-size:30pt; } .slideCol { font-size: 55pt; text-align: left; }}</style>