There are 2 lines shown below the breadcrumbs on all category pages. The border-bottom CSS is set to
border-bottom: 1px solid #color
Making any changes to margin, padding or the border width makes no changes to the border bottom to just 1 line. Need to know how to make it one line.
Site url: http://www.catholic-collectibles.com/blroandpasa.html
If you can't remove the outer .breadcrumbs div, the simplest way is to just use
.breadcrumbs .breadcrumbs { border: none }
Guaranteed you won't have any extra lines no matter how many other .breadcrumbs you have inside the outer .breadcrumbs div.
The style you described is set for .breadcrumbs, and you have two nested divs with this class, so the style is applied to both. Either remove the class from one of those elements, or change the style definition to only apply to the correct element.
<div class="breadcrumbs">
<div class="breadcrumbs">
Home
Shop By Brand
Bliss
</div>
</div>
You need to delete one div or add this css (this css removes the border on the inner .breadcrumb):
.breadcrumbs > .breadcrumbs {
border: none;
}
if you can't change the second .breadcrumbs class you can do this:
.breadcrumbs .breadcrumbs:nth-child(1) {
border: none;
}
Related
When displaying a div on hover, how can you target a specific div?
I need to display a hidden div from a link is on top of the page, and I can't figure out how.
When i tested, if the link and the div are one after the other, it displays corectly. but if i add another link before the first one, it does not work anymore.
From my testing using this CSS:
.expandable{
display: none;
}
.expand:hover+.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
And this HTML:
<div class="expand">expand</div> <!--this does not do anithing-->
<div class="expand">expand</div> <!--this works-->
<div class="expandable">expandable</div>
Try the below one
.expandable{
display: none;
}
.expand:hover ~.expandable{
display:inline !important;
}
.expandable:hover{
display:inline !important;
}
Only the hover on the second div works because of the behaviour of the '+' selector
https://www.w3schools.com/cssref/sel_element_pluss.asp
What W3C says :
Select and style every p element that are placed immediately after div elements:
div + p {
background-color: yellow;
}
you can hide div by id using : jQuery :
<div id=“div”>
</div>
<script>
$(“#div”).hide("slow"); // you can change "hide" to "show"
</script>
I have following css and display is set to none if there are no records. However, it displays a red line at the top. You can verify it here http://jsfiddle.net/3agn58u4. Any idea what is causing this?
CSS:
<style>
body {
font-family:Calibri;
}
#customTaskNotification {
position:relative;
}
.TasksCount {
position:absolute;
top: -.1px;
right:-.1px;
padding:1px 2px 1px 2px;
background-color:#ff0000; /* orange #ef8913* dark-pink #d06079 */
color:white;
font-weight:bold;
font-size:1.05em;
width:50%;
text-align: center;
border-radius:50%!important;
box-shadow:1px 1px 1px gray;
}
div.TasksCount:empty {
display: none;
}
</style>
The problem is that you're trying to set CSS styling on a property based on it being empty but that div is not actually empty.
You can see in the snippet provided that the :empty selector is not going to apply to a <div> element that isn't actually empty (even if you can't see its contents).
.testDiv {
background-color:#ff0000;
height: 30px;
width: 40px;
margin: 5px;
}
.testDiv:empty {
background-color: blue;
}
<div class="testDiv">
</div>
<div class="testDiv"></div>
<div class="testDiv">
</div>
You may need Javascript to check actual content of a div before applying styles if this case is going to be prevalent in your solution.
You can change the padding of your <div> and yes, that will hide it from your view when the contents of the div aren't visible, but you're also removing the padding from your <div> so it's likely going to look bad (or not as desired) when there are actual links inside the div.
The :empty pseudo selector will select elements that
contain nothing
or every element that has no children (including text nodes).
or matches element that is empty but has only html comments.
Example:
<p></p><!-- empty element -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><!-- test --></p><!-- empty element with comment -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p><a></a></p><!-- element has no text,but has child nodes,hence not empty -->
<p>A paragraph.</p><!-- contains text,hence not an empty element -->
<p> </p><!-- element has space ,hence not empty -->
please see the fiddle:EMPTY ELEMENT
This is the reason why your display none is not working.
According to w3school:
The :empty selector matches every element that has no children
(including text nodes).
TasksCount is not empty because it has a child(a element) so display:none; does not effect. By css, it is not possible to check the child where is empty or not and then select parent.
Solution: use Javascript or Jquery.
if($('.TasksCount').find('a').html() == ''){
//Or you can add class or add style $('.TasksCount').css('display','none');
$('.TasksCount').hide();
}
That's because TasksCount background color is set to red. You can set the padding:0 if you want to keep the same color. Or,
.TasksCount {
background-color: #fff;
box-shadow: none;
}
EDIT
This answer has been downvoted multiple times because it does not answer the real question :
Why the :empty property is not taking effect.
As others pointed out, this CSS property matches only elements that have no children. This is the correct answer to this question.
The OP asked
"However, it displays a red line at the top. You can verify it here
... Any idea what is causing this?"
I missed the point about the empty property and did suggested first to remove the padding which partially solves the 'red line' when the DIV and its children are empty. However, this will also strip the padding from the element when it has content.
If you think you have a more complete answer to this question , please leave a comment below and I will update it accordingly.
i have taken this h1 and i have given it a class and applied border bottom to it so that i can give a nice underline effect.
I can use text-decoration property but giving bold underline effect gives me the ability to have width of underline line.
When i give h1 an underline, the border goes to 100% full width of the container.
please tell me how to fix it.
thanks.
Use display: inline the reason why the H1 is showing the border all the way across is because it is a displaying block by default. Hope this helps!
Because h1 is a block level element and by default this element take a 100% width. so make it a inline element.
here is the CSS to build the h1 as a inline element.
h1{border-bottom:1px solid red;display:inline-block;}
here is the HTML
<h1>My First Heading</h1>
Here is a Demo.. http://jsbin.com/voyuluyo/1/edit
HTML
<h1 class="headings"> hi this is SO </h1>
<h1 class="headings1"> hi this is SO </h1>
CSS
.headings
{
border-bottom:10px solid black;
}
.headings1
{
display:inline-block;
border-bottom:10px solid red;
}
Fiddle
Working Demo
Output:
As RaySinlao said, display:block will make it expand all the way. If you want to make the next element go to the next line, display:inline won't work. Use display:table. Table will shrink-wrap (to fit contents) or expand (to fix weird bugs) or clearfix. Come to think of it, table does a lot of stuff.
For setting a border line between elements, I use border on one side for each child, except the last one. For example
<div class="parent">
<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
</div>
with CSS
.parent div{
display:block;
padding:5px;
border-bottom:dashed 1px #000}
.parent div:last-child{
border-bottom:dashed 0 #000
}
Is there a way to set the border between children from parent's CSS style? without using last-child. In other words, in one single statement from parent rule.
No, the border is a property of the child element, and thus can only be specified on them. You can use a single rule for this, but it requires advanced CSS3 selector support:
.parent > div:not(:last-child){
border-bottom: dashed 1px #000;
}
I just know a workaround: use jQuery and iterate through those child elements(each: http://api.jquery.com/each/) and set your css class if next(next: http://api.jquery.com/?s=next) element is also child...
I think another way, just using css does not exist, but I'm not sure, if you find a solution with css only, please post it ;)
Greetings
I have a menu, based on nested, unordered lists. All styling and display is done via css.
The menu is wrapped in a fixed-width div. For some top-level items, the submenu contains too many items for one line and these wrap onto a second or even third line, expanding the div height. This works fine.
What I am trying to do is to add a horizontal line/divider/border between the rows of submenu items, irrespective of the number of rows, and equal in width to either the row below or above (preferably below). Obviously, no line will be present if there is only one row of items.
I tried to add a background along the top of the entire <ul id="submenu"> and then remove it from just the first line using ul#submenu:first-line{}, then realised that this cannot be done (headslap).
I then altered the structure of the menu to use <p> elements nested in divs, again using div#submenu:first-line{}, but testing this gives me strange results. For example, a background colour will show in the first line, but only half the height of the submenu items; background images appear halfway up the submenu items. Sometimes nothing shows until I click on the current top level menu item.
I even tried replacing the list structure with a single <p> element, containing a series of <a> elements, and got the same results.
The evidence suggests that I am not using the :first-line pseudo-element properly, but reading around the web suggests that this should work.
Any suggestions as to what I am doing wrong and how to get these horizontal lines, preferably with CSS and without JS?
Here's my code:
#subMenuContainer {
width:100%;
margin-top:20px;
}
#subMenu {
width:600px;
margin:0 auto;
text-align:center;
background:#ddd;
}
#sub {
border-top:2px solid green;
padding:0px;
line-height:30px;
}
#sub::first-line {
border-top:2px solid red; /* doesn't work */
background-color:pink; /* works */
color:yellow; /* doesn't work */
}
#sub p {
display:inline-block;
padding:0px;
}
#sub p a {
padding:0px 0px;
line-height:1em;
}
<div id="subMenuContainer">
<div id="subMenu">
<div id="sub" >
<p>MenuItem1</p>
<p>MenuItem2</p>
<p>MenuItem3</p>
<p>MenuItem4</p>
<p>MenuItem5</p>
<p>MenuItem6</p>
<p>MenuItem7</p>
<p>MenuItem8</p>
<p>MenuItem9</p>
<p>MenuItem10</p>
</div>
</div>
</div>
And the same in jsfiddle.
I think you should be using the :first-child rather than the :first-line pseudo class.
:first-line refers to the first line of a text element
:first-child refers to the first child element of a parent. e.g. the first li in your ul.
See http://www.w3schools.com/css/css_pseudo_classes.asp for more details.
If that doesn't sort you out, can you post your markup?
V.