I have read posts about css inheritance and i am still left a bit lot.
Is this possible to do in css?
.cv3-envaleur h1 {
background: none;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
I have also tried this.
div.cv3-envaleur h1 {
background: none;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
I am trying to give some style to the H1 heading inside the div called .cv3-envaleur but i can't seem to make it work.
Please help
Both of these are valid ways to do what you are after. There has to be something overriding these. You can check in Firebug as to what the current definitions are and what is overriding. You can also add the !important flag to force the style.
<div class="cv3-envaleur"><h1>Header</h1></div>
div.cv3-envaleur h1
{
background: none !important;
font-size: 23px;
line-height: 38px;
color: #fff;
margin: 0px 0 5px 0;
padding: 10px 0px 5px 0px;
}
When you say the div is "called" cv3-envaleur, do you mean that its ID attribute is cv3-envaleur? If so, then you need to use the # selector, like so:
div#cv3-envaleur h1{
...
}
Dot selectors are used for classes, not IDs.
Related
I can't seem to find how to remove the underline under the links...
.articles {
margin-left: auto;
margin-right: auto;
width: 625px;
text-decoration: none;
}
.articles-box {
width: 120px;
height: 40px;
-webkit-border-radius: 5px 5px 5px 5px;
-moz-border-radius: 5px 5px 5px 5px;
border-radius: 5px 5px 5px 5px;
background-color: #E3D41F;
-webkit-box-shadow: #B3B3B3 1px 1px 1px;
-moz-box-shadow: #B3B3B3 1px 1px 1px;
box-shadow: #B3B3B3 1px 1px 1px;
font-family: Optima,Segoe,"Segoe UI",Candara,Calibri,Arial,sans-serif;
font-size: 20px;
color: white;
line-height: 40px;
text-decoration: none;
text-align: center;
}
Set the text-decoration:none; on the <a>
Css:
a {text-decoration:none;}
Well, you appear to be setting the text-decoration property correctly, so I would say that either the styles aren't being applied to the elements that you expect them to be (e.g. the class names are spelled incorrectly), or they are being applied and something is overwriting that property at some point.
I would recommend using the browser tools to explore the HTML for the page, find the element that incorrectly has an underline, and examine where it is getting its styles from (I prefer Chrome for this, but most browsers provide something along these lines). If that doesn't make the solution obvious, I'd be happy to help if you can provide more information (such as the HTML for the elements and the surrounding stuff).
I think this is a css question.
I have a fixed bar on the top of the page and I want to put there, aligned to the right, a p:commandButton. But the p:commandButton is rendered outside the div, to the left.
I've checked that it's probably a matter of attribute display, because the h:form (which must encapsulates the p:commandButton) has it defined as display:block. If I put the button outside the form, it's rendered like a charm where I want - but, of course, it doesn't work.. When i use the h:form, the button position is changed.
The css i'm using:
/*** Navigation bar ***/
body {
padding: 0; /* Gets rid of the automatic padding */
margin: 0; /* on HTML documents */
font-family: Lucida Grande, Helvetica, Arial, sans-serif;
font-size: 12px;
}
#navigation {
position: fixed;
top: 0;
width: 100%;
color: #ffffff;
height: 55px;
padding-top: 0px;
/* Adds shadow to the bottom of the bar */
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
/* Adds the transparent background */
background-color: rgba(1, 1, 1, 0.9);
color: rgba(1, 1, 1, 0.9);
}
#navigation a {
font-size: 14px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation a:hover {
color: grey;
}
#navigation img {
padding-left: 250px;
}
I have the following CSS to style a button and an anchor tag as they have the same button style but they are in different locations. SO I thought to give them the same CSS so that they would both render exactly the same. However, the button.enter has the text pushed down. The first one works fine. It would work with padding:0 but that would affect the first one.
Any ideas?
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle;
}
Just add another style that will reset the padding on the button alone. Some of your css is unrequired as well. vertical-align:middle; does nothing in this case for example.
a.enter, button.enter {
text-decoration: none;
background: url('../img/enter-button_small.png') no-repeat 0px 0px;
height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
}
button.enter {
padding:0;
}
You need to mention margin and padding as 0 coz button has the default margin and padding.
Add this below code
a.enter, button.enter {
text-decoration: none;
background: green url('../img/enter-button_small.png') no-repeat 0px 0px;
line-height: 35px;
padding: 8px 0;
text-align: center;
color: white;
margin: 0 auto;
text-shadow: none;
font-size: 16px;
width: 300px;
vertical-align: middle; display:inline-block; padding:0; margin:0; border:none
}
Here is working demo http://jsfiddle.net/6Ygc2/
I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.
On this page (responsive site in progress) the background image of the containing div (article) is as wide as the longest sentence (p). So they don't are as wide as the column (#main = 30em). What can I do with CSS to make all div's as wide as the column and still have their responsiveness intact?
#agenda #main article {
margin-bottom: 1em;
background: #fff url() repeat;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
border: 0;
}
#agenda #main article h3 {
color: #666;
letter-spacing: 0.2em;
text-transform: lowercase;
line-height: 100%;
margin-bottom: .4em;
padding-top: .4em;
}
#agenda #main article h4 {
color: #666;
letter-spacing: 0.2em;
text-transform: lowercase;
line-height: 100%;
margin-bottom: .4em;
padding-top: .4em;
}
#agenda #main article p {
color: #666;
}
You need to remove the float: left from the #main article in your css (line 402) or override it with float: none.
Can't really test the responsiveness on mobile devices at the moment, but it seems that you simply need to add a width:100% to your article elements:
#agenda #main article {
background: url("") repeat scroll 0 0 #FFFFFF;
border: 0 none;
border-radius: 6px 6px 6px 6px;
margin-bottom: 1em;
width: 100%;
}
Tried it in firebug and it looks fine even when I'm zooming in or out.