SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    override css style with another rule

    I have created some rukles for a div but let´s make it short.

    if I have

    Code CSS:
    div {
    background-color:red;
    }
    .somestyle {
    background-color:blue;
    }

    Then I have this

    Code HTML4Strict:
    <div>some content x</div>
    <div>some content y</div>
    <div>some content z</div>
    <div>some content a</div>
    <div>some content b</div>

    That would create 5 divs with each having a red background right?

    now on windows load one of those divs is added the class name somestyle but the background color is not changing to blue it stays red.

    how can I force it to use the background color in that css rule?

    after javascript is executed

    Code HTML4Strict:
    <div class="somestyle" >some content x</div>
    <div>some content y</div>
    <div>some content z</div>
    <div>some content a</div>
    <div>some content b</div>

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I would check the .js, as your CSS is fine. It is possible that you THINK the class is beign added but it's not ( or it's being added with a typo... which for all intents and purposes it is NOT being added).

    to test this OUTPUT STRAIGHT HTML/CSS and you will see your lass rule DOES OVERRIDE your tag rule.Have faith in CSS

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>test</title>
    		<style type="text/css">
    		div {
    background-color:red;
    }
    .somestyle {
    background-color:blue;
    }
    		</style>
    	</head>
    	<body>
    	<div class="somestyle" >some content x</div>
    <div>some content y</div>
    <div>some content z</div>
    <div>some content a</div>
    <div>some content b</div>
    	</body>
    </html>

  3. #3
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I would check the .js, as your CSS is fine. It is possible that you THINK the class is beign added but it's not ( or it's being added with a typo... which for all intents and purposes it is NOT being added).

    to test this OUTPUT STRAIGHT HTML/CSS and you will see your lass rule DOES OVERRIDE your tag rule.Have faith in CSS

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<title>test</title>
    		<style type="text/css">
    		div {
    background-color:red;
    }
    .somestyle {
    background-color:blue;
    }
    		</style>
    	</head>
    	<body>
    	<div class="somestyle" >some content x</div>
    <div>some content y</div>
    <div>some content z</div>
    <div>some content a</div>
    <div>some content b</div>
    	</body>
    </html>
    The javascript works, I checked in firebug and the class name is added and the typo also was checked but the style will not change, here is the full code

    Code HTML4Strict:
    <style type="text/css" >
    @import url([url]http://fonts.googleapis.com/css?family=Zeyada&v1);[/url]
    @import url(yolo.css);
    </style>
    <div id="container_main">
    <div id="left_bar">
    <p id="menu_titulo" >PRIMERO DE SECUNDARIA</p>
    <div id="menu_box_1">
    <p><a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24272 " ><img src="http://proyectos.udavinci.edu.mx/demo/moodle17/file.php/252/chat.png" class="yolo_icono" width="120" height="55" alt="ANGLO - CHAT" border="0" /></a></br><a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24273 " ><img src="http://proyectos.udavinci.edu.mx/demo/moodle17/file.php/252/blog.png" class="yolo_icono" width="120" height="100" alt="ANGLO - BLOG" border="0" /></a></br></p>
    <div id="temario_"><a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=23735" >TEMARIO COMPLETO</a></div>
    <div id="menu_box_1_1">
    <ul>
    <a href="file:///C:/Documents%20and%20Settings/Administrador/Escritorio/menu_yolo/menu/de%20que%20me.html" ><li>Introducción</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24107" ><li>Sonidos</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=23769" ><li>Unidad 1</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24109" ><li>Unidad 2</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24110" ><li>Unidad 3</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24111" ><li>Unidad 4</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24112" ><li>Unidad 5</li></a>
    </ul>
    </div>
    </div>
    <div id="menu_box_1_2">
    <ul>
    <a href="file:///C:/Documents%20and%20Settings/Administrador/Escritorio/menu_yolo/menu/de%20que%20me.html" ><li>BIBLIOGRAFÍA</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24184" ><li>LIGAS SUGERIDAS</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24185" ><li>REFERENCIAS DEL CURSO</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24176" ><li>LISTA DE VERBOS</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24169" ><li>VOCABULARIO</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24158" ><li>LECTURAS</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24177" ><li>FESTIVIDADES</li></a>
    <a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24538" ><li>JUEGOS</li></a>
    </ul>
    </div>
    <p><img src="http://proyectos.udavinci.edu.mx/demo/moodle17/file.php/252/Introduccion/Imagenes/banner1.jpg" width="165" height="10" complete="true" /></p> 
    <p><a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24256" >¿Cómo me van a calificar?</a></p> 
    <p><a href="http://proyectos.udavinci.edu.mx/demo/moodle17/mod/resource/view.php?id=24270" ><img src="http://proyectos.udavinci.edu.mx/demo/moodle17/file.php/252/Introduccion/Imagenes/calificaciones.jpg" width="124" height="124" complete="true" /></a></p>
    </div>
    <div id="main_content">
    <div class="banner" ><span class="alinearvertical" >Temario Completo</span></div>
    <p>LENGUA EXTRANJERA I “Inglés”</br></br></br>Introducción</br>1.0. 	  Introducción al estudio del idioma Inglés</br>1.1. 	  La cultura mexicana</br>1.2. 	  La cultura de habla inglesa</br>1.3. 	  Comparación de culturas</br>1.3.1. 	  Comprendiendo las diferencias culturales</br></br>Unidad 1. </br>2.0.       Conocimientos básicos</br>2.1.       Sonidos del Inglés</br>2.1.1.	  Alfabeto fonético</br>2.1.2.	  Aprendiendo a usar el diccionario</br>2.2. 	  Alfabeto</br>2.3. 	  Nombres propios y comunes</br>2.4. 	  Artículos</br>2.4.1. 	  Artículos definidos</br>2.4.2. 	  Artículos indefinidos</br>2.5.	  Demostrativos</br>2.6.	  Determinantes </br>2.6.1	  Determinantes posesivos</br>2.6.2.	  Otros determinantes</br>2.7. 	  Preposiciones</br>2.7.1.	  Las preposiciones y su importancia</br></br>Unidad 2. </br>3.0.      Expresándose en Inglés</br>3.1.	  Pronombres personales</br>3.2. 	  Infinitivo y conjugaciones</br>3.3. 	  Tiempo presente</br>3.4. 	  Verbo  ser o estar “to be” </br>3.5. 	  Saludos y despedidas</br>3.5.1.	  Uso formal</br>3.5.2.	  Uso informal</br>3.6. 	  Me presento a mí y otros</br>3.6.1.	  Entablar una comunicación sencilla</br>3.6.1.1. Preguntas de datos personales, proveniencia y profesión </br>3.7. 	  Imperativo</br>3.7.1. 	  Órdenes</br>3.7.2. 	  Instrucciones</br></br>Unidad 3. </br>4.0.       Acciones (verbos) </br>4.1. 	  Conjugación y uso del verbo poder “can” </br>4.2. 	  Conjugación en presente de verbos que no son “to be” ni “can” </br>4.2.1.	  Reglas para conjugación de la tercera persona del singular </br>4.3. 	  Verbo  – Auxiliar “to do” </br>4.4. 	  Deletreo </br>4.5. 	  Números</br>4.5.1. 	  Cardinales</br>4.5.2. 	  Ordinales</br>4.6.	  Introducción a los verbos compuestos (Phrasal verbs) </br></br>Unidad 4. </br>5.0.       Aprendiendo a escribir</br>5.1.	  Estructura de las oraciones en tiempo presente</br>5.1.1.	   Oraciones afirmativas</br>5.1.2. 	  Oraciones negativas</br>5.1.3.	   Oraciones interrogativas</br>5.1.4.	  Adverbios de tiempo utilizados en presente</br>5.2.	   Sustantivos </br>5.2.1. 	   Sustantivos contables</br>5.2.1.1.  Unidades de medida definidas</br>5.2.2.	   Sustantivos incontables</br>5.2.2.1.  Unidades de medida indefinidas</br>5.2.3. 	   Singular y plural</br>5.2.3.1.  Formar e identificar en textos los plurales y singulares</br>5.3. 	   Adjetivos</br>5.3.1.	   Comparativos</br>5.3.2.	   Superlativos</br>5.4. 	   Adverbios</br>5.4.1. 	   Adverbios de tiempo</br>5.4.2. 	   Adverbios de frecuencia</br>5.4.3.     Comparativos</br>5.4.4.     Superlativos</br>5.4. 	   Haciendo oraciones </br></br>Unidad 5. </br>6.0.      Describiendo seres vivos, objetos inanimados y lugares</br>6.1.	  La fecha y hora</br>6.1.1. 	  Pedir la hora </br>6.1.2.	  Dar la hora </br>6.2 	  Verbo gustar “to like” </br>6.2.1.	  Preguntar sobre gustos, disgustos y hobbies</br>6.2.2.	  Expresar gustos, disgustos y hobbies</br>6.3 	  Descripciones</br>6.3.1.	  Uso ordenado de los adjetivos calificativos al describir</br>6.3.2.	  Describir personas</br>6.3.2.1. Describir su forma de ser y carácter</br>6.3.2.2. Describir apariencia física</br>6.3.3.	  Describir objetos</br>6.3.3.1. Describir su funcionamiento básico</br>6.3.3.2. Describir su aspecto físico</br>6.3.4.	  Describir animales</br>6.3.4.1. Describir su comportamiento</br>6.3.4.2. Describir su aspecto físico</br>6.3.5.	  Describir lugares</br>6.4. 	  Gerundio</br>6.4.1.	  Uso del sufijo “-ing” </br>6.4.2.	  Adverbios de tiempo utilizados en gerundio</br>6.5.	  Futuro Idiomático “going to” </br>6.5.1.	  Adverbios de tiempo utilizados en futuro idiomático</br></p></br>
    </div>
    </div>
    <script type="text/javascript" >
    function get_active_link(myul, myclass){
    var menu_unidades_yolo = document.getElementById(myul);
    menu_unidades_yolo = menu_unidades_yolo.getElementsByTagName('a');
    var current_url = document.location;
    for (var i in menu_unidades_yolo){
    if (menu_unidades_yolo[i].href == current_url){
    menu_unidades_yolo[i].className = myclass;
    }
    }
    }
    get_active_link('menu_box_1_1', 'yolo_liga_activa_principal');
    get_active_link('menu_box_1_2', 'yolo_liga_activa_submenu');
    </script>

    and here is the referenced css

    Code CSS:
    .yolo_icono {
    margin-left:auto;
    margin-right:auto;
    margin-bottom:30px;
    }
    .list_abc {
    list-style-type:lower-alpha;
    }
    .list_arabigo {
    list-style-type:decimal;
    }
    .list_romano{
    list-style-type:upper-roman;
    }
    .list_square {
    list-style-type:square;
    }
    .list_circle {
    list-style-type:circle;
    }
    .banner {
    width:100%;
    height:100px;
    background-color:#00FFFF;
    margin:6px 0 16px 0;
    text-align:center;
    font-size:50px;
    color:#170B3B;
    background-image:url('http://proyectos.udavinci.edu.mx/demo/moodle17/file.php/252/2.jpg');
    }
    .alinearvertical {
    position:relative;
    top:20px;
    font-family:"Zeyada";
    }
    div#container_main {
    width:940px;
    float:left;
    overflow:visible;
    background:#3B0B0B;
    }
    div#container_main div#left_bar{
    width:200px;
    float:left;
    overflow:visible;
    height:auto;
    background-color:beige;
    color:black;
    text-decoration:none;
    padding:2px;
    border-right:5px solid #CC9966;
    }
    div#container_main div#left_bar p{
    text-align:center;
    }
    div#container_main div#left_bar div#menu_box_1{
    text-align:left;
    width:100%;
    overflow:visible;
    padding:2px;
    }
    div#container_main div#left_bar div#menu_box_1_1{
    list-style:none;
    text-align:center;
    margin-left:-40px;
    }
    div#container_main div#left_bar div#menu_box_1_2{
    list-style:none;
    text-align:center;
    margin-left:-40px;
    }
    div#container_main div#main_content{
    width:700px;
    float:left;
    overflow:visible;
    margin:10px 0 10px 16px;
    text-align:justify;
    color:white;
    }
    /*menu unidades*/
    div#menu_box_1_1 ul a, a:hover, a:link, a:active, a:visited{
    text-decoration:none;
    }
    div#menu_box_1_1 ul a li{
    width:120px;
    height:30px;
    border-right:#99CCCC 10px solid;
    background-color:#990099;
    margin-bottom:3px;
    margin-left:auto;
    margin-right:auto;
    padding-top:3px;
    text-align:center;
    font-weight:bold;
    color:white;
    }
    div#menu_box_1_1 ul a:active li{
    background-color:red;
    }
    div#menu_box_1_1 ul a:hover li{
    background-color:orange;
    }
    /*menu unidades fin*/
    /*menu unidades temas*/
    div#menu_box_1_2 ul a li{
    list-style:none;
    width:160px;
    min-height:30px;
    border-left:orange 6px solid;
    border-right:yellow 6px solid;
    background-color:#33CC99;
    margin-bottom:3px;
    margin-top:3px;
    margin-left:auto;
    margin-right:auto;
    padding-top:3px;
    text-align:center;
    color:black;
    }
    div#menu_box_1_2 ul a:active li{
    background-color:red;
    }
    div#menu_box_1_2 ul a:hover li{
    background-color:#3399FF;
    border-right:orange 6px solid;
    border-left:yellow 6px solid;
    }
    /*menu unidades temas fin*/
    p#menu_titulo {
    width:100%;
    height:auto;
    background:lightblue;
    font-weight:bold;
    }
    div#temario_ {
    width:100%;
    text-decoration:none;
    font-weight:bold;
    text-align:center;
    }
    .yolo_liga_activa_principal {
    pointer-events: none;
    cursor: default;
    }
    .yolo_liga_activa_principal li {
    background-color:red;
    }
    .yolo_liga_activa_submenu {
    pointer-events: none;
    cursor: default;
    }
    .yolo_liga_activa_submenu li {
    background-color:red;
    }

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I really have to look at this further but I have to tell you your code is FULL of errors ( I have counted 128 so far...) this is not including the fact that you are using <BR> for what should be either a set of list or a nested list.

    so things to fix before dealing with the CSS:
    you cant wrap <A>'s around block elements such as <LI>s OR <P>s...

    so change things like this:
    Code:
    <a href="file:///C:/Documents%20and%20Settings/Administrador/Escritorio/menu_yolo/menu/de%20que%20me.html" ><li>Introducción</li></a>
    to something like this:
    Code:
    <li><a href="file:///C:/Documents%20and%20Settings/Administrador/Escritorio/menu_yolo/menu/de%20que%20me.html" >Introducción</a></li>
    aditionally,

    you dont need to wrap UL's in DIVs
    or use a tag to precede and ID ( since an ID is unique)
    example: div#someID is really over kill, this will do: #someID

    am I correct in assuming that you JS function is : get_active_link

    and your class names in question : "yolo_liga_activa_principal", "yolo_liga_activa_submenu"?

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    OK...BAD mark up aside I think I have a clue why your script "isn't" working.


    remember all those unnecessary selectors in the CSS... they are causing specifiably problems. That is, "div#menu_box_1_2 ul a:hover li{
    background-color:#3399FF; } is more SPECIFIC than ".yolo_liga_activa_submenu li{background:red;}

    so, aside from going back and steramling your code.. what you could do is add the precedents to the classes that you are switching with JS. Example:

    div#menu_box_1_2 ul a.yolo_liga_activa_principal li{background:red;}

    whew! That's the quick fix. I still recommend that you streamline and make your code proper, if nothing else but because it may prevent cross browser issues.

  6. #6
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    OK...BAD mark up aside I think I have a clue why your script "isn't" working.


    remember all those unnecessary selectors in the CSS... they are causing specifiably problems. That is, "div#menu_box_1_2 ul a:hover li{
    background-color:#3399FF; } is more SPECIFIC than ".yolo_liga_activa_submenu li{background:red;}

    so, aside from going back and steramling your code.. what you could do is add the precedents to the classes that you are switching with JS. Example:

    div#menu_box_1_2 ul a.yolo_liga_activa_principal li{background:red;}

    whew! That's the quick fix. I still recommend that you streamline and make your code proper, if nothing else but because it may prevent cross browser issues.
    I will look into it, why can´t li be wrapped by a?

  7. #7
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    The Anchor element is inline. The LI element flow (list item) is a typically a direct descendant of either a UL or OL and hence why anchor isn't allowed to wrap them.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    To be brutally frank, you should do a lot more than "look into it" -- with the number of errors in that code you do not even have HTML - you have GIBBERISH. I'm not sure where you learned HTML or from what source, but it seems that you missed most of the syntax rules in regards to which tags can go inside which and the distinction between inline-level and block-level elements.

    LI is block-level, anchors are inline-level... inline-level CANNOT wrap block-level. LIST tags (UL, OL, and the deprecated DIR and MENU) can only have LI as their direct descendants -- so you cannot put ANY other tag between <ul><li>, between </li><li> or between </li></ul>

    From there you are using <style> with @import like it's still 1998 and we care about nyetscape 4, paragraph tags on elements that semantically look like they should be numbered headings, and I'm not sure what that script is supposed to accomplish... but I suspect that should be handled SERVER side, not with a client side script.

    Without seeing it live someplace with the COMPLETE code it's hard to say, but I suspect that about two thirds of your DIV, most of your classes, and the majority of the long URL's aren't even necessary.

    Oh, and those local file links are a hoot too -- just what WYSIWYG is producing this code? I ask because the 'tell tales' of drag and drop coding are all there... and that's NOT a good thing.

  9. #9
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    I could take or leave the @import rules, but I don't think even a WYSIWYG editor would wrap anchors around block elements.

    My deduction is that he is trying to make the code IE6 compatible... and saw that the :hover only worked around <A>s.

    QUICK TIP for OP: when faced with this situation , especially when there is only anonymous text, remember you can use CSS to display the anchor as a block ( a{display:block;}. The point is As around LIs is not only BAD CODE, it's not even har to circumvent.

  10. #10
    SitePoint Addict tlacaelelrl's Avatar
    Join Date
    Apr 2011
    Location
    Mexico city, Mexico
    Posts
    353
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    I could take or leave the @import rules, but I don't think even a WYSIWYG editor would wrap anchors around block elements.

    My deduction is that he is trying to make the code IE6 compatible... and saw that the :hover only worked around <A>s.

    QUICK TIP for OP: when faced with this situation , especially when there is only anonymous text, remember you can use CSS to display the anchor as a block ( a{display:block;}. The point is As around LIs is not only BAD CODE, it's not even har to circumvent.
    That is my problem, when in IE the hover only works over the text, I will do the display:block.

    I know my HTML looks like crap I am just learning but I just jumped into doing code and haven´t read any rules I guess I will have to do that.

    Thank you all for your input

  11. #11
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    B]QUICK TIP for OP:[/B] when faced with this situation , especially when there is only anonymous text, remember you can use CSS to display the anchor as a block ( a{display:block;}. The point is As around LIs is not only BAD CODE, it's not even har to circumvent.
    Which is NOT to say declaring display:block makes a inline-level element block-level.

    CSS "display" and HTML "level" are NOT the same thing -- though in most cases the default CSS display state is it's level they do not mean the same thing.

    (just clarifying)


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •