I would like to insert the following plane css code in my BEM structure. But for some reason the before psuedo class isnt appearing in the DOM tree.
Anyone know how to apply this CSS code into BEM?
CSS:
li + li:before {
height: 22px;
line-height: 22px;
.icon(#unicode: '\f105'; #iconset: 'FontAwesome');
font-size: 22px;
opacity: 0.2;
position: relative;
top: 2px;
padding: 0 15px;
}
HTML:
<li class="mod-breadcrumbContainer__item">
<a class="mod-breadcrumbContainer__link" href="#" title="text">
<span class="mod-breadcrumbContainer__text">link1</span>
</a>
</li>
<li class="mod-breadcrumbContainer__item">
<a class="mod-breadcrumbContainer__link" href="#" title="text">
<span class="mod-breadcrumbContainer__text">link2</span>
</a>
</li>
Related
I cannot seem to override a specifity, would you please help me figure it out?
I even tried to use !important as a desperate move which did't work...
Conclusion, I am missing something fundamental and my old friend google isn't helping much.
The element targeted in the full code below is :
<li id="mid-el"><a id="mid-a" href="#">Contact</a></li>
The color of all elements is set to white.
The targeted el needs to be : rgb(25,2,80) :
nav.nav-bar ul.group-one li.mid-el a#mid-a {
color: rgb(25,2,80);
}
A detailed explaination would be much appreciated.
Thank you for your time.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
nav.nav-bar {
background-color: rgb(25, 2, 80);
padding: 25px;
}
.nav-bar ul {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
li, a {
margin-top: 8px;
text-decoration: none;
color: white;
}
li:nth-child(6) {
margin: 0px 120px 0px 0px;
padding: 10px 20px;
border-radius: 20px;
background-color: white;
}
nav.nav-bar ul.group-one li#mid-el a {
color: rgb(25,2,80);
}
<body>
<header>
<nav class="nav-bar">
<ul class="group-one">
<li><a href="/">
<div>
<img class="logo-img" src="#" alt="Logo-B&D">
</div>
</a></li>
<li>Groupe</li>
<li>Expertise</li>
<li>Référence</li>
<li>Actualités</li>
<li id="mid-el"><a id="mid-a" href="#">Contact</a></li>
<li class="right-group">Rejoignez-nous</li>
<li class="right-group">Blog</li>
<li class="right-group">Finance</li>
<li class="right-group"><a href="#">
<div class="sm-icon">
<img src="" class="t-icon" alt="Twitter">
<img src="" class="i-icon" alt="Insta">
<img src="" class="f-icon" alt="Facebook">
<img src="" class="y-icon" alt="Youtube">
</div>
</a></li>
</ul>
</nav>
</header>
</body>
Change your CSS:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
.nav-bar {
background-color: rgb(25, 2, 80);
padding: 25px;
}
.group-one {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
list-style: none;
}
li a {
margin-top: 8px;
text-decoration: none;
color: white;
}
li:nth-child(6) {
margin: 0px 120px 0px 0px;
padding: 10px 20px;
border-radius: 20px;
background-color: white;
}
.group-one #mid-el a {
color: rgb(25, 2, 80);
}
Also HTML has some ending tags problems
<nav className="nav-bar">
<ul className="group-one">
<li>
<a href="/">
<div>
<img className="logo-img" src="#" alt="Logo-B&D" />
</div>
</a>
</li>
<li>
Groupe
</li>
<li>
Expertise
</li>
<li>
Référence
</li>
<li>
Actualités
</li>
<li id="mid-el">
<a id="mid-a" href="#">
Contact
</a>
</li>
<li className="right-group">
Rejoignez-nous
</li>
<li className="right-group">
Blog
</li>
<li className="right-group">
Finance
</li>
<li className="right-group">
<a href="#">
<div className="sm-icon">
<img src="" className="t-icon" alt="Twitter" />
<img src="" className="i-icon" alt="Insta" />
<img src="" className="f-icon" alt="Facebook" />
<img src="" className="y-icon" alt="Youtube" />
</div>
</a>
</li>
</ul>
</nav>
you are not using CSS selectors right, if are using a class name in a selector than dont use the tag name with it like you wrote: nav.nav-bar and nav.nav-bar ul.group-one li.mid-el a plus you gave your <li> tag an id not a class so id in css selector is used by a # not a . thus, the css selector should be written as .group-one #mid-el a
The problem comes from your selector nav.nav-bar ul.group-one li.mid-el a#mid-a {}.
Specifically there is no li element with a class of "mid-el". Instead it has an ID of "mid-el". Simply change the period in the selector to a #.
nav.nav-bar ul.group-one li#mid-el a#mid-a {color: rgb(25,2,80); }
I have been asked to "fix" a client's old website which was written in 2011, by a design team that was clearly struggling to understand the then-new HTML5+CSS. There is a lot wrong with this code, and most of it I've been able to fix, stuff like using
<p> </p>
for line breaks. I'm not even kidding.
Anyway, one of the things I have been asked to do is extend the website's text container and menu, and stretch out the menu's actual text to fit the new width, which has gone fine. However, I'm having some trouble with padding out the menu text. I did a search through the forums for some advice, and tried out the style code suggested, but it seems to move the menu text out of the area of menu.jpg where it needs to be.
CSS (this is the client's, so yell at them)
#header_menu_container
/* This is verbatim from the code I am working with. I seriously have NO IDEA why this selector even exists. */
{
}
#header_menu
{
margin: 0;
display: inline-block;
list-style: none;
font-size: 15px;
}
/* header menu colour */
#header_menu li a {
color: #516a82;
}
/* menu hover colour */
#header_menu li a:hover{
color: #b55239;
text-decoration: none;
}
.no_submenu, .has_submenu
{
display: block;
float: left;
position: relative;
}
.no_submenu a, .has_submenu span{
display: block;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
}
.no_submenu a:hover, .has_submenu span:hover{
color: #b55239;
}
.has_submenu span{
cursor: pointer;
_cursor: hand;
}
.is_submenu{
position: absolute;
left: -10px;
top: 32px;
background: #dfd7c5;
margin: 0;
padding: 0;
list-style: none;
z-index: 9999;
}
.is_submenu li a{
display: block;
text-align: left;
padding-left: 10px;
width: 122px;
padding-right: 10px;
font-size: 15px;
font-family: "Times New Roman", Times, serif;
color: #516a82;
text-decoration: none;
pading-top: 10px;
padding-bottom: 10px;
line-height: 18px;
}
.is_submenu li a:hover{
color: #b55239;
}
HTML (based on client's, with a bit of my modification)
<ul id="header_menu">
<li class="no_submenu" style="width: 63px;">
<b>Home</b>
</li>
<li class="has_submenu" id="who-we-are">
<b><span style="width: 103px;">Who We Are</span></b>
<ul class="is_submenu" style="display: none;">
<li>
<b>Janyce Lastman</b>
</li>
<li>
<b>Ziny Kirshenbaum</b>
</li>
<li>
<b>Tutors</b>
</li>
</ul>
</li>
<li class="has_submenu" id="services"><span style="width: 73px;"><b>Services</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Consultant To Schools</b>
</li>
<li>
<b>Education Consulting And Case Management</b>
</li>
<li>
<b>Educational Assessments</b>
</li>
<li>
<b>School Placement Consultation</b>
</li>
<li>
<b>Seminars And Workshops</b>
</li>
<li>
<b>Test Tips Support</b>
</li>
<li>
<b>Tutoring</b>
</li>
</ul>
</li>
<li class="has_submenu" id="media-and-press">
<span style="width: 113px;"><b>Media & Press</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>In the Press</b>
</li>
<li>
<b>Book Reviews</b>
</li>
<li>
<b>Selected Articles</b>
</li>
<li>
<b>Interesting Links</b>
</li>
</ul>
</li>
<li class="no_submenu" style="width: 53px;">
<b>FAQ</b>
</li>
<li class="has_submenu" id="testimonials"><span style="width: 103px;"><b>Testimonials</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Testimonials for TTG Tutors</b>
</li>
<li>
<b>Testimonials for Janyce Lastman</b>
</li>
</ul>
</li>
<li class="has_submenu" id="contact-us">
<span style="width: 70px;"><b>Contact</b></span>
<ul class="is_submenu" style="display: none;">
<li>
<b>Contact Info</b>
</li>
<li>
<b>Employment Opportunities</b>
</li>
</ul>
</li>
</ul>
</div>
There's a display call inside a class selector, which is likely part of the issue, but my gut feeling tells me that this needs someone with more expertise to dissect everything wrong with it.
It's one thing to figure out what's wrong with your own code, and another to try and analyze what's wrong with someone else's. Any advice would be greatly appreciated :)
So looking back over the code again, I think I've figured out the problem.
Instead of putting padding in the CSS, the original authors put a numerical width in a style tag in the HTML for every single menu, e.g.
<span style="width: 73px;"><b>Services</b></span>
Idiots.
I'm going to try and write something similar into the stylesheet properly.
I am using the Simple Side Nav: http://startbootstrap.com/template-overviews/simple-sidebar/
I want to attach a button next to side of this Nav, on the Right Side which I will be using to hide and show the Nav Bar.
I have created a JSFiddle: https://jsfiddle.net/4q08khy1/
This button is the position i want it to be, as you can see in the image:
But it is hiding behind the Content Part of the page, is there a way to fix this?
my Left Nav:
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
<a href="#">
Start Bootstrap
</a>
</li>
<li>
Dashboard
</li>
<li>
Shortcuts
</li>
<li>
Overview
</li>
<li>
Events
</li>
<li>
About
</li>
<li>
Services
</li>
<li>
Contact
</li>
</ul>
<span> << </span>
</div>
and Style on toggle
<style>
.toggle {
background: #1ABC9C;
color: #eee;
position: absolute;
width: 50px;
height: 50px;
line-height: 50px;
text-align: center;
right: -50px;
top: 18px;
box-shadow: 5px 0 0 rgba(0,0,0,0.1);
z-index: 5000;
}
</style>
Try adding following CSS to your code:
a#menu-toggle {
margin: -25px 0 0 -36px;
}
I am having problems getting text-overflow to work. I also cant get normal overflow:hidden to work either. Any ideas or suggestions?
Here is the css code without either. (Please note it is written in OOCSS / BEM syntax).
/* Base
=====================================================*/
/* Nav
=================================================*/
/* B
---------------------------------------------*/
.nav
{
margin-bottom: 24px;
margin-left: 0;
padding-left: 0;
list-style: none;
}
/* E
---------------------------------------------*/
.nav__item
{
float: left;
position: relative;
}
.nav__link
{
display: block;
color: inherit;
text-decoration: none;
}
and the HTML
<ul class="pivot nav" style="font-size:24px">
<li class="nav__item nav__item--active">
<a class="nav__link" href="#">
List Item 1
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 2
</a>
</li>
<li class="nav__item">
<a class="nav__link" href="#">
List Item 3
</a>
</li>
</ul>
I also tried wrapping it in a parent div and applies text-overflow / overflow to that..no luck.
I'm guessing that the lines wrap before any overflow rule kicks into action. You will need to do this to prevent line breaks:
.nav__item {
white-space: nowrap;
}
I'm not sure which element you want to hide the overflow on, so I created this fiddle: http://jsfiddle.net/bACQD/. Feel free to modify it to clear up any confusions.
adding display: inline-block; *display: inline; zoom: 1;
allows nowrap to work. It does not work on display:block;
I am creating these icons as an image wrapped with a CSS circle behind it. Yet, this random bit of hair looks like it is stemming from the CSS.
Any explanations why? Sorry the CSS is all inline - this is for an html email:
<div style="width: 180px; text-align: center;margin: 0 auto;">
<a href="http://pinterest.com/houseplansdan/">
<li style="list-style: none; background-color: #505050;width: 40px;height: 40px;border-radius: 20px; display: inline-block;margin-right: 10px;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_pinterest.png" href="http://pinterest.com/houseplansdan/">
</li>
</a>
<a href="http://www.facebook.com/pages/Houseplans/91152065546">
<li style="background-color: #505050;width: 40px;height: 40px;border-radius: 20px; display: inline-block; margin-right: 10px;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_facebook.png">
</li>
</a>
<a href="http://twitter.com/houseplans_">
<li style="list-style: none; background-color: #505050; width: 40px;height: 40px;border-radius: 20px; display: inline-block;">
<img style="padding-top: 5px;"src="http://homeplan.com/newsletter/October/img/icons/32x32_twitter.png">
</li>
</a>
</div>
Fiddle version here.
That's not hair, it's text-decoration - the default style for links. Apply this to any links you don't want to have it:
a { text-decoration:none; }
You should have no issues doing this inline for your email, although it may be tedious.
There cannot be an LI inside an A. Please correct it, if possible.
Also, this CSS will fix:
a { text-decoration: none; }
Updated Fiddle: http://jsfiddle.net/pHksF/2/