CSS nur für ein Element

check

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>

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>

/* 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>

Sailor

Sorry, aber mit dem Code, den du hier eingefügt hast, komme ich überhaupt nicht klar - ginge das auch in einem lesbaren und übersichtlich formatiertem Text?
Aber aufgefallen ist mir schon mal folgendes! Anscheinen sind deine <styles>...</style> Formate irgendwie in den Code eingefügt... möglicherweise sogar so, dass sie gar nicht wirksam werden, weil das zu formatierende Element schon davor im Code steht.
Generell gehören <style> Anweisungen in den <head>... </head> ... vielleicht löst das schon dein Problem.

check

Danke für den Hinweis mit dem Head. Kleiner Fehler, große Wirkung. Nachdem ich den <style>-Bereich in den Head gesetzt habe, funktioniert es reibungslos. Vielen Dank.

Tags