In a page I use a tabstrip with its own stylesheets. This tabstrip writen with divs and anchors.
I add some other divs into tabs but they inherit stylesheet from the outer tabstrip. This new divs has their own css classes.
Here is my question, are there a way to break this inheritance without changing the structure of css ?
Tabs' CSS Styles :
div.tabs {
padding: .5em;
}
div.tabs div.tabs {
padding: 0;
}
div.tabs div.tabs div {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
New added divs use this classes :
.graphTextItem{ font-family:sans-serif; font-size:12px; border: solid 1px #78ACFF; text-align:center; width:150px; }
.graphImageItem{ border-left: solid 1px #78ACFF; border-right: solid 1px #78ACFF; text-align:center; height:70px; }
You could always try using different elements for each nested level instead of all divs:
<div>
<ul>
<li></li>
</ul>
</div>
In the above example you can style the div, ul and li anyway you want and you can target them individually to apply style rules. Inheritance won't be a problem.
Override each element you need to not inherit in your most specific classes.
e.g. in .graphTextItem, override height and padding.
Not really. Inheritance is part of CSS. If you want a specific value then specify it.
By removing div from this stylesheet solved my problem :
div.tabs div.tabs {
clear: left;
height: 4em;
padding: .5em;
border: 1px solid #003366;
}
But I still wonder whether there is a way ?
Related
I have a div that wraps around my <footer> tag. In the div is an <hr>, which needs to be in the div to have the positioning properties applied. However, it also carries over the coloring of the links in my footer. I don't want the <hr> to be the same color as the links. Is there any way to "escape" this or change the property.
I tried <hr style="color: black;"> but that didn't change anything. If you have any input on how to change the properties despite the set CSS in the div, I would greatly appreciate it.
JS Fiddle: http://jsfiddle.net/o6vmz7t5/1/
HTML
<div id="footer_style">
<hr>
<footer>
Contact
Privacy Policy
Create Account
</footer>
</div>
CSS
#footer_style {
margin: 0 auto;
position: fixed;
bottom:0;
width: 100%;
padding: 20px;
}
#footer_style a {
color: #f2f0e1;
}
#footer_style a:hover {
color: black;
}
hr tags simply have a border-top applied on them
override the hr as below
#footer_style hr {
border-top: 1px solid black;
}
#footer_style hr {
background-color: black;
height:1px;
}
JSFiddle
Whoa, it had me struggling for a minute. Apparently since the hr has no height and you cant see its internal "fill", affecting the color does nothing.
What you actually see is the border, so using border-color did it for me.
Please try below code I have try this code. Using this code solve your problem.
border-color: red;
Instead Using the color: black;
Try using in this way
border: 1px solid #000;
border-width: 1px 0px 0px 0px;
Try it
I am trying to apply a css style to the first children of an element. So say I have a div, with two divs, which are the children, and within each child is their own child, which are the grandchildren.
This JSFiddle, I hope is what I've done: http://jsfiddle.net/o8xhba9u/
#parent {
border: 1px solid;
padding: 10px;
}
#child-one {
text-indent: 5px;
padding: 10px;
}
#child-two {
text-indent: 5px;
padding: 10px;
}
#parent * {
border-top: 1px solid red;
}
My goal is to only have the children (child-one and child-two) to only be the ones with the red border-top. The paragraph elements (grandchildren) shouldn't have the red outline. I am trying to accomplish this dynamically, as if I were to have different elements, and add new ones later and have the effect applied without having to edit the css. How can I accomplish that?
You are looking for the direct child combinator, >.
Example Here
#parent > * {
border-top: 1px solid red;
}
I create an empty span with css border: 1px solid #333 but didn't see any working separator. I think there must be something inside the span? how to create a border with empty tag? a hr tag is too ugly.
You must give it a size, and display it as a block. Try this.
span.separator {
border-top: 1px solid #333;
width: 100%;
height: 1px;
display: block;
}
JSFiddle
hr tag is not ugly if you use border: 0; and than use border-top: 1px solid #000;, the 3d style of hr is just applied by browser, you can alter it the way I suggested.
hr {
border: 0;
border-top: 1px solid #000;
margin: 10px auto; /* For vertical spacing */
}
Demo
I would suggest you to use <hr /> as semantic goes, it will give a meaning to your page and will also save you few characters in the source.
Secondly about the span tag, it's an inline tag, to span it 100% you need to make it display: block;.
span.separator {
border-top: 1px solid #000;
display: block;
margin: 10px auto; /* For vertical spacing */
}
For more information on inline span you can refer my answer here.
A span is not a block element, in order to get what you want, you would have to give it a height and set it as display:block or inline-block.
If you want the border to be only on one side you can use border-right or border-left;
test <span style="display:inline-block;height:13px;border:1px solid black;"></span> test
Here is an example
http://jsfiddle.net/Cm5fK/
Essentially i have a pricing table with the class of .priceblock, and i have a border-bottom on my <li> tags, i simply want it to change color when i hover on the priceblock. The code to me seems correct but nothing changes.
Heres the initial li tag:
ul.pricingtable .priceblock .contents li {
font-family: 'OpenSans';
font-size: 13px;
width: 81.904762%;
height: 35px;
margin:0 auto;
padding: 10px 0;
border-bottom: 1px solid rgba(221,221,221,1);
}
And here hover state css code, this hover class works for he coloring of texts, but i can't change the border color.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
Any ideas?
I think you might need to change the hover state from.
.priceblock:hover .contents li {
border-color: rgba(255,117,109,1);
}
To:
.contents li:hover {
border-bottom: 1px solid rgba(255,117,109,1);
}
HTML may be able to read it better.
The css attributes need to be equals.
for example:
If in the first style block you write "ul.pricingtable" then you need to do that in the second block two.
And in the content of block, they need to be same.
for example:
border-bottom: 1px solid rgba(221,221,221,1);
and
border-bottom: 1px solid rgba(255,117,109,1);
You cann'ot use once with "border-bottom" and then with "border-color" only...
What is the modern way of making a line half way across the screen? I saw this in a tutorial and it looks a bit old fashioned now.
Like:
<hr size="6" width="50%">
How would you do something similar if you were making a webpage now?
You can continue to use <hr />, but I would suggest omitting the inline attributes. It is just another element, and you can move your styling information to css:
hr {
width:50%;
}
You can use CSS to style the line
hr{
width:50%;
}
HTML:
<hr />
CSS:
hr { width: 50%; }
This should be controlled in CSS using something like:
hr {
width: 50%;
}
You can change borders etc too. Just make sure you reset the borders and backgrounds as different browsers use different methods to style it
Using a <div> and some styling:
#line {
width: 50%;
margin: 0 auto; /* Centered */
height: 4px; /* The border adds to height */
border: 1px solid #888888;
border-bottom: 1px solid #E9E9E9;
border-right: 1px solid #E9E9E9;
}