Ho do i achieve the grey underline in the welcome part of the website? I forgot the tag, it basically creates a line all the way across the page/div/table whatever you want.
The website(where it says welcome to CLAN):
It's called a Horizontal Rule:
<hr>
And it looks like this:
You can also style it using CSS (as Stack Overflow have done), something like this:
hr {
color: red;
background-color: red;
height: 2px;
}
the tag you are looking for is an: <hr>
<hr>
You can use 4 attributes, that are not supported in HTML5.
align
noshade
size
width
I use this on my website: means 99% of screen-width and size 1.
<hr noshade size=1 width="99%">
Please read the articles below to understand you problem:
http://dev.w3.org/html5/markup/hr.html
http://www.w3schools.com/tags/tag_hr.asp
Related
Hi I'm trying to have a word or group of word in a different color in a . This is the code I use:
<h2 class="text-blue">
We are a <span class="text-orange">photography & video production</span>
studio improving businesses & brand's image and helping them to achieve their goals
</h2>
css:
.text-blue{
color: #645f5f;
}
.text-orange{
color: #ff8400;
}
My problem is that somehow the orange text appears smaller than the rest and not on the same line. Can someone tell me what I do wrong? Thank you very muchscreenshot
That's a little strange...from what I can tell, span shouldn't really change the size of your text. I put it into Codepen as well, and I didn't really see any difference. However, if you really want to make sure, I recommend just manually adjusting the .text-orange class, so that the text is the same size as that of its parent class:
.text-orange{
color: #ff8400;
font-size: 100%;
}
Give that a try. Let me know if that works :)
Ok I solved it thanks to you J. Zhou
I changed the span by a p and added a display:inline into my class. Following is the code:
<h2 class="text-blue">We are a <p class="text-orange">photography & video production</p> studio improving businesses & brand's image and helping them to achieve their goals</h2>
css:
.text-orange{
color: #ff8400;
display:inline;
}
It's very likely that your span is being styled elsewhere, and it's receiving display: block - which is why it's breaking the line - and also a font-size. You can see it at the developer console.
If that's the case, then I highly suggest that you correct it instead of using another tag, because span is the most adequate tag for inline style exceptions.
If you wish to keep that style, try changing its selector, making it more specific, so it doesn't affect all your span tags.
just add the font-size you want like this:
.text-orange {
font-size: 100% !important;
}
this will undo any predefined styles and make font-size 100%;
similarly you can add more styles with !important;
"If my answer is correct then please mark my answer as the right answer-> it will help my profile thanks Read: stackoverflow.com/help/someone-answers"
I made a site about Star Wars Canon timeline (with movies,tv shows, books and comics) and I have a slight problem.
Chrome/Opera/Vivaldi have different < br> tag heights compared to Firefox and it crushes my OCD.
Is there any way to make the site look the same way on Firefox as it does on Chrome/Opera/Vivaldi?
I am sorry if I am not made understood, here's a screenshot: http://i.imgur.com/XmT2M64.png
Yes, I have OCD as well and am verily frustrated by such imperfections.
You may style your <br> with CSS:
br {
line-height: 2rem;
height: 2rem;
}
or by in-line styling, as provided by #Raj Kumar in a previous answer:
<br style="line-height: 2rem; height: 2rem;" />
Try a snippet here:
<br style="line-height: 10px; height: 10px;">
<!-- I used 10px to emphasise the height. You can use !important, too, if your code is not obedient. See? It works.-->
If this does not work, what I'd advise you to do would be to completely omit the <br> tags and add either margin, padding, or invisible borders (border: 2px groove transparent;) to the elements you're seperating. Another not-so-neat way is to add transparent a div (div.class {background: transparent; width: 100%; height: 2px;}).
You might want to try to add / in your <br /> tag (just in case) (although most modern browsers already support <br>). Make sure you don't have any additional spaces in your code, too (just for neatness). Also try to import normalize.css or vanilla.css and check if it fixes the problem.
Thanks for letting me know about Vivaldi. Looks like a nice browser!
You can try normalize css below is link http://necolas.github.io/normalize.css/
It will solve other problems of cross browser problems
add styles for br It should work perfect check this
<br style="line-height:?px; height:?px" />
you may try with the
reset.css
normalize.css
vanilla.css
that allows to reset all or particular element as per your requirement.
When I adjust the screen size , the orange line which is defined by a h1 tag doesn't move downwards with the text and also my orange boxes that i had floated to the right merge behind the text.
I know I need to include Media Queries somehow but no idea how, can anyone help me?
Thanks!
Ok, first of all I don't think I have ever seen anyone use as many breaks <br> tags on a single page as you have haha.
The answer to your question is to simply use the <hr> tag (horizontal rule), wherever you want a line.
For example after the closing div tag for timings add the <hr> tag. By default the <hr> tag is styled black so we need to add some simple styling to your stylesheet.css
hr {
border-top: 1px solid #bd6e22;
}
If you wanting to add spacing above, below or even both then add this to the styling.
hr {
border-top: 1px solid #bd6e22;
margin: 20px 0;
}
I have put 20px for an example but you can change that to what ever you want.
Hope this helps.
Ok you need to open up http://me14evb.leedsnewmedia.net/slate/stylesheet.css in a ftp client.
then https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ use the #media quieres for each page break size and adjust the style's accoridng to each device :D
good luck!
Chris
I've a logo text in anchor tag and the Text logo to have the first letter of ever word red.
FLETCHER ROBBE INTERNATIONAL LLP
Like below image:
I've used span but it doesn't seem working in my scenario. Can some one point me to some CSS approach? Thanks
Working JSFIDDLE
This is the best you can do for inline elements in pure HTML + CSS:
<a class = "name" href="http://frobbeintl.com" title="">
<span>F</span>letcher
<span>R</span>obbe
<span>I</span>nternational
<span>LLP</span<
</a>
CSS:
.name {
text-transform: uppercase;
}
.name span {
color: red;
}
You could use the ::first-letter selector, as in CSS-Tricks. <- only for block elements
Although you can use this property
a::first-letter {
color: red;
}
But note this would be applied to the very first word in the Hyperlink, not in the word.
Here is a document for this http://css-tricks.com/almanac/selectors/f/first-letter/
You could change your code to the following:
<span>F</span>LETCHER <span>R</span>OBBE <span>I</span>NTERNATIONAL <span>LLP</span>
Having that you can style the spans differently. From a markup standpoint that's fine because span has no meaning.
Using this technique and ids/nth-child you can even go as far as styling every letter differently.
As you see this gets ugly very quickly - so someone created a little jQuery plugin to do it for you: http://letteringjs.com/
Hope that helps.
I have the following HTML markup:
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
When I use the CSS selector h1 I get Hello World.
I can't unfortunately change the markup and I have to use only CSS selectors because I work with the system that aggregates RSS feeds.
Is there any CSS selector which I can take only the text node? Specifically the World in this example?
The current state of CSS can't do this, check this link: W3C
The problem here is that the content you write to the screen doesn't show up in the DOM :P.
Also ::outside doesn't seem to work yet (at least for me in Safari 6.0.3) or it simply doesn't generate the desired result yet.
Check my fiddle and then check the DOM source: JSfiddle
Finally there are attribute selectors a { content: attr(href);}, making CSS able to read DOM-node attributes. There doesn't seem to be a innerHTML equivalent of this yet. It would be great tho if that was possible, whereas you might be able to manipulate the inner markup of a tag.
Bit of a workaround:
h1 {
color: red;
}
h1 * {
color: lime;
}
<h1>
<div class="sponsor">
<span>Hello</span>
</div>
World
</h1>
This is almost the opposite of a question I asked last week: Is it possible to select the very first element within a container that's otherwise pure text without using classes or identifiers in pure CSS?
The short answer is no. "World" in this example isn't an element of its own - therefore there isn't a way to select it.
What you would have to do here is style the h1 then override that styling with div.sponsor. For instance, if you wanted "World" here to have a black background with white text you woud use something similar to:
h1 {
background:black;
color:white;
}
h1 div.sponsor {
background:white;
color:black;
}
Unfortunately, however, this wouldn't work if you were only wanting the word "World" styled and your markup had more than just that within <div>Hello</div> World Foo, for instance.
I don't believe it would be possible with pure CSS to style just "World" in this situation.
I also met same problem, where I can't touch the markup and have no control with js.
I needed to hide a text nodes in a div element, but the element to remain visible.
So here is my solution:
markup:
<div id="settings_signout_and_help">
<a id="ctl00_btnHelpDocs" class="ico icoHelp" href="http://" Help Guide</a>
Signed in as: <a id="ctl00_lUsr" href="Profile.aspx">some</a>
Home
Sign out
</div>
css:
#settings_signout_and_help {
font-size: 1px !important;
}
#settings_signout_and_help a {
font-size: 13px !important;
}
Hope this helps guys!
I had a similar problem where I had to remove the "World" text from html generated by a C# function.
I set the font-size to 0 on the 'h1' element and then applied my css to div class. Basically hiding the extra text, but keeping content in the div.
I don't know how to do it with just CSS, but...
Using JQuery, you could select all the elements inside except the stuff inside its child element
$("h1:not(h1 > div)").css()
and put whatever CSS effect you want inside there.