I can't move the text decoration from the "download text".
Incidentally - I'd also like to be able to center it against the image but can't work out how to do that either... Code below :)
img {
vertical-align: text-middle;
float: left;
}
p {
font-size: 220%;
font-family: Arial, Verdana, sans-serif;
text-decoration: none;
}
<a download="GLV-11.pdf" href="https://drive.google.com/uc?
export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
<p class="brochure"> Brochure Download <img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"> </p>
</a>
You need to target the a element itself:
a {
text-decoration: none;
}
Declare the text-decoration property on the containing a (anchor) tag, e.g:
a {
text-decoration: none;
}
Code Snippet Demonstration:
img {
vertical-align: text-middle;
float: left;
}
p {
font-size: 220%;
font-family: Arial, Verdana, sans-serif;
line-height: 73px; /* equal to height of img element */
}
a {
text-decoration: none;
}
<a download="GLV-11.pdf" href="https://drive.google.com/uc?
export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
<p class="brochure"> Brochure Download <img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"> </p>
</a>
The text-decoration needs to be defined for the a tag itself. It's also common to apply different settings to the different states (link/hover etc.) as shown below.
Concerning the vertically centered alignment, you can use display: inline-block and vertical-align: middle as shown below. (Note: I moved the text to be after the image in the code)
img {
display: inline-block;
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
font-size: 220%;
font-family: Arial, Verdana, sans-serif;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
<a download="GLV-11.pdf" href="https://drive.google.com/uc?
export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
<p class="brochure"><img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download"> Brochure Download </p>
</a>
For anchor tags, we remove the text-decoration css property.
learn more about this property here
Also to center ,a tag with image, you can assign 'a' tag with a classname, say 'brochure-download--container'
You can modify your html like this:
<a class="brochure-download--container" download="GLV-11.pdf" href="https://drive.google.com/uc?export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm"><p class="brochure"><img src="https://drive.google.com/uc?export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"><span>Brochure Download</span></p>
</a>
You can then add this CSS for aligning to center and remove text-decoration from anchor tag.
a.brochure-download--container p{
display:flex;
align-items:center;/*bring content to center*/
}
Btw, flex property still is not supported in all browsers and might require vendor prefixes..you can check it here
I will leave you with discovering vendor prefixes(google is really helpful when one starts learning new stuff)
Related
I am trying to change everything in the span class "Intro" to have these settings:
span.Intro{
display: inline-block;
margin-left:0px;
font-family: 'Lucida Sans Unicode';
line-height: 0px;
height: 25px;
color: grey;
list-style:square;
font-size: 150%;
padding-left: 0px;}
An example of what line I'm trying to do this on:
<span class ="Intro" <ul><li><b>History</b></li></ul></span>
this previously worked but I opened my file today and it does not?
The outcome is currently just a normal pre formatted circle bold bullet point, any help?
EDIT: Solved, thanks for all your help
You have:
<span class ="Intro" <ul><li><b>History</b></li></ul></span>
Need:
<span class ="Intro" ><ul><li><b>History</b></li></ul></span>
Check <span class="Intro">And remember span is inline element and ul is block element. You should not nest a block element in an inline element. You can use span inside ul but don't use ul inside span
See, for instance,http://www.w3schools.com/tags/tag_span.asp
or
http://webdesign.about.com/od/htmltags/a/aa011000a.htm
HTML Markup
<span class ="Intro"><ul><li>History></li></ul></span>
CSS style
span.Intro ul li{
margin-left:0px;
font-family: 'Lucida Sans Unicode';
line-height: 0px;
color: grey;
list-style:square;
font-size: 150%;
font-weight:bold;
}
Replace "span.Intro" with "span.Intro ul" in your css file.
I have the following html markup:
<div class="header-menu">
<span class="header-title noselect">
<i class="fa fa-bars"></i>
<a href="/" class="header-title-value">
{{ headerVm.menu.current.title }}
</a>
</span>
</div>
A this rules in *.less file:
.header-menu {
.header-title {
color: red;
a {
font-size: 2em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
}
}
which is translated into css:
.header-menu .header-title{
cursor:pointer;
color:#f00
}
.header-menu .header-title a {
font-size:2em;
font-family:'Roboto',sans-serif;
font-weight:300
}
In this case the color property of a header-title doesn't affect a tag, but if i place it inside a rules it works. Also i've tried to set !improtant on the color property which also didn't help. And another interesting moment if i've move font properties from a rules and put them into .header-menu .header-title this would work for the a tag, but not the color property.
In Chrome inspector i've seen that after my rules for a goes rules from bootstrap, but not from header-title. Actually i'm not that interested in how to fix this, but why it works in the way it works and proper fix/best practice advice as well =)
By default the <a> tag does not inherit the color from its parent elements. Try this instead to force the inherit:
.header-menu {
.header-title {
color: red;
a {
color: inherit;
font-size: 2em;
font-family: 'Roboto', sans-serif;
font-weight: 300;
}
}
}
You need to give the a tag the color property and value to see it's effect
I want the "values" to be right-aligned. This is my HTML:
<p class="blueBold">Existing Building</p>
<p class="values">19,322 sf</p>
</br>
<p class="blueBold">Acreage</p>
<p class="values">3</p>
...and my CSS:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
}
.values {
color: white;
text-align:right;
display: inline-block;
}
What do I need to do to get the values to hug the right edge?
jsfiddle is here: http://jsfiddle.net/clayshannon/wvuQz/1/
Not sure if I understood your question correctly. But if you add a width then you can have the text right aligned to the box like below:
.blueBold {
color: navy;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
display: inline-block;
width: 200px;
}
.values {
color: white;
text-align:right;
width: 100px;
display: inline-block;
}
Working Demo
Note: This is not for aligning the text to the right edge of the screen. This is for making the text within the .values element right align within the box.
You are using display: inline-block; which will make the element inline, it is no more a block level element, hence there is no space for the text to align to the left or to the right.
Just wrap the elements inside a div and than float the element to the right.
Demo
Also am using
.wrap {
overflow: hidden; /* This will clear floats */
}
For a better clearfix, you can also use the below snippet and call the class on parent element.
.clear:after {
clear: both;
display: table;
content: "";
}
You can also assign width to the .wrap here, so that elements stay inside boundaries.
A block parent container should have the text align to work. In your case it's the body, itself.. DEMO
body {
background-color: orange;
text-align:right;
}
Try this:)
.blueBold {
color: navy;
position:absolute;
font-weight: bold;
font-family:'Century Gothic', Tahoma, Verdana, sans-serif;
}
.values {
color: white;
text-align:right;
}
fiddle: http://jsfiddle.net/wvuQz/5/
The semantic approach:
<div>
<p class="blueBold">Existing Building</p>
<p class="values pull-right">19,322 sf</p>
</div>
<div>
<p class="blueBold">Acreage</p>
<p class="values pull-right">3</p>
</div>
CSS:
.pull-right {
float: right;
}
Demo: http://jsfiddle.net/wvuQz/7/
More Info:
http://coding.smashingmagazine.com/2013/08/20/semantic-css-with-intelligent-selectors/
im trying to change the colour of #commentslink to white. All my other font styling (font- family, size) is working, just the colour won't change
My HTML is this;
<div id="commentslink">
<div class="circle">
<p>10</p>
</div>
</div>
and my CSS is this
a:link, a:visited {
color: #0eb0d3;
text-decoration: none;
}
a:hover {
color: #0eb0d3;
opacity: 0.4;
text-decoration: none;
}
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
.circle {
float: right;
background-color: #f89b2d;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin-top: -10px;
margin-right: 20px;
}
First of all its only color and not font-color: #ffffff; and secondly you should use
#commentslink a { /* Specific selector */
color: #fff;
}
Demo
Let me tell you, the above selector will select all a tags inside the element having #commentslink as an id so if you want to target a nested inside p you can use a more specific selector like
#commentslink .circle p a {
/* Selects all a element nested inside p tag further nested inside an element
having class .circle which is further nested inside an element having
#commentslink as an id
*/
color: #fff;
}
Just don't make your selectors overspecific if you don't really require, else you will end up making more and more nested rules thus bloating your CSS, so go as much basic as you can.
Last but not the least, this has nothing to do with CSS3
Just a good read here.. related to this answer...
Try this with !important
#commentslink {
float: right;
color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
and use color: rather than font-color
Elaborating on Mr. Alien's answer, it's best to use the selector #commentslink a. CSS rules are applied in order of specificity, and the style for the a element is more specific than the styling for its parent element (#commentslink). The selector #commentslink a is more specific than either of the others, and will therefore take precedence.
Here's a good article on specificity.
And as others have stated, the property is color not font-color.
#Sobin, !important should be used sparingly, as it will clobber other rules applied to elements within the #comments div. Better to take advantage of specificity.
The "10" is going to be #0eb0d3 because of the CSS styling applied to a tags.
Change
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
To
#commentslink {
float: right;
font-color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
And it will override the other styling
Replace font-color with color.
#commentslink {
float: right;
color: #ffffff; // this is enough not font-color
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
Also
a:link, a:visited {
color: #0eb0d3; // Also this a css override
text-decoration: none;
}
Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers.
#commentslink a {
color: #ffffff;
}
Thanks #Mr. Alien for his fiddle and the SO link.
I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.