I am trying to use the <hr> tag to style and include different headings for parts of my website. I am using CSS pseudo elements to add the heading text to the <hr> element.
My HTML looks like:
<div id="steps">
<div id="step1"><hr class="stepheading">contentcontent</div>
<div id="step2"><hr class="stepheading">contentcontent</div>
<div id="step3"><hr class="stepheading">contentcontent</div>
<div id="step4"><hr class="stepheading">contentcontent</div>
</div>
My CSS looks like:
hr.stepheading{
padding: 0;
border: none;
border-top: medium double #333;
text-align: center;
color: #333;
margin: 130px 0px;
}
hr.stepheading:after{
content: "The First Step";
position: relative;
top: -0.7em;
display: inline-block;
padding: 0 0.25em;
background: white;
}
So, I can see that the problem is that every single one of my headings will contain "The First Step" instead of other headings for other steps.
Demo
I want each heading to have a different title: "The First Step," "The Second Step," etc...
How do I go about doing that and what technology do I use? Can this be done in purely HTML and CSS or do I have to use Javascript/JQuery to achieve what I want?
Use nth-child() on the div element:
hr.stepheading:after{
content: "The First Step";
position: relative;
top: -0.7em;
display: inline-block;
/* Other details */
}
div:nth-child(2) hr.stepheading:after{
content: "The Second Step";
}
div:nth-child(3) hr.stepheading:after{
content: "The Third Step";
}
div:nth-child(4) hr.stepheading:after{
content: "The Fourth Step";
}
Demo: http://jsfiddle.net/bQBgL/4/
Check this demo : http://jsfiddle.net/gLQ37/
HTML:
<div id="steps">
<div id="step1"><h1 class="stepheading"id="hr1"></h1>contentcontent</div>
<div id="step2"><h1 class="stepheading" id="hr2"></h1>contentcontent</div>
<div id="step3"><h1 class="stepheading" id="hr3"></h1>contentcontent</div>
<div id="step4"><h1 class="stepheading" id="hr4"></h1>contentcontent</div>
</div>
CSS:
h1.stepheading{
padding: 0;
border: none;
border-top: medium double #333;
text-align: center;
color: #333;
margin: 130px 0px;
}
h1.stepheading:after{
position: relative;
top: -0.7em;
display: inline-block;
padding: 0 0.25em;
background: white;
}
#hr1:after{content: "The First Step";}
#hr2:after{content: "The Second Step";}
#hr3:after{content: "The Third Step";}
#hr4:after{content: "The Fourth Step";}
#step2 hr.stepheading:after { content: "The Second Step"; }
#step3 hr.stepheading:after { content: "The Third Step"; }
etc...
Related
I'm displaying sentences and some phrases are from a certain class. Now, I want to include these phrases' classes with a curly bracket right above, as shown in the attached mockup.
My question is: What is the best way to implement such a functionality? Are there any code examples?
EDIT (current code added):
HTML
<token>Effects</token>
<token>of</token>
<token>an</token>
<token>ascorbic</token>
<elem type="drug">
<token>acid-derivative</token>
<token>dentifrice</token>
</elem>
<token>in</token>
<elem type="person">
<token>patients</token>
</elem>
<token>with</token>
<elem type="disease">
<token>gingivitis</token>
</elem>
CSS
token {
margin-left: 6px;
}
Fiddle demo of the code
https://jsfiddle.net/ab0L55v1/
Here's a solution that's all done with CSS and pseudo-elements (and an additional HTML element for the labeling). It should be self-explanatory, but if you have questions about it, just ask...
.container1 {
display: inline-block;
margin-top: 50px;
border: 1px solid #aaa;
padding: 3px 8px 0 0;
}
token {
margin-left: 6px;
}
elem[type="drug"],
elem[type="person"],
elem[type="disease"] {
position: relative;
}
elem[type="drug"]::after,
elem[type="person"]::after,
elem[type="disease"]::after {
content: "";
position: absolute;
top: -1em;
left: 3%;
width: 94%;
height: 0.5em;
border-top: 1px solid #aaa;
border-left: 1px solid #aaa;
border-right: 1px solid #aaa;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
z-index: 10;
}
.label {
position: absolute;
top: -3em;
left: 3%;
width: 94%;
z-index: 10;
text-align: center;
}
.label:after {
content: "|";
position: absolute;
top: 1.2em;
left: 3%;
width: 94%;
z-index: 10;
text-align: center;
color: #aaa;
}
.drug {
color: red;
}
.person {
color: blue;
}
.disease {
color: green;
}
<div class="container1">
<token>Effects</token>
<token>of</token>
<token>an</token>
<token>ascorbic</token>
<elem type="drug">
<token>acid-derivative</token>
<token>dentifrice</token>
<div class=" label drug">
Drug
</div>
</elem>
<token>in</token>
<elem type="person">
<token>patients</token>
<div class=" label person">
Person
</div>
</elem>
<token>with</token>
<elem type="disease">
<token>gingivitis</token>
<div class=" label disease">
Disease
</div>
</elem>
</div>
This is not easily achieved with HTML and CSS. For advanced formatting, I had good results with MathJax, which allows LaTeX-like formatting.
For example, the format
$\overbrace{\text{Big ones, small ones}}^{Coconuts}\text{, some as big as your head}$
Will look like:
Live example: http://jsfiddle.net/AqDCA/940/
See also: MathJax basic tutorial and quick reference
jqMath is a lightweight alternative, with fewer features and a smaller footprint.
A simple option, though less stylish is to use <ruby> tags. Note that these are meant for East Asian characters, and might have odd formatting with English text:
ruby rt {font-size:12px;}
ruby {color:#4a4;}
ruby.drug {color:#44a;}
Maybe this can <ruby class="drug">be done<rt>Drug</ruby> with <ruby>HTML<rt>Han</ruby>.
When you hover over the paragraph text in JS Fiddle the image gets covered with the background. Using z-index everywhere I could think of doesn't have any effect. (I left the useless z-index stuff in there so show you what I tried.) I also tried pointer-events: none; in various places.
I also tried this type of thing elm1:hover elm2{}, but that didn't help. I'm new to CSS and I'm applying what I have searched and found.
Edit: The problem: on hover background color covers image
Markup:
<div id="col2-middle" class="three-cols-middle three-cols">
<a href="About.php#how-we-work- projects">
<h1 class="h-big-font">Specific Projects</h1>
<img class="col-img" src="3dplotCroppedWithFinancial.png" alt="3dplot">
<p class="p-on-white">
XXXXXXXX XXXXXXXXXX XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX XXXXXXXXXXXXXXXXX hover here to cover img XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
<br/>
<br/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
</p>
</a>
</div>
css:
div.three-cols {
float: left;
width: 29.33%;
position: relative;
left: 70.67%;
overflow: auto;
padding: 1% 1% 1% 1%;
min-width: 200px;
z-index:-1;
}
.three-cols a {
position: relative;
text-decoration: none;
color: #000;
}
.three-cols a p:hover {
background-color: #ecebeb;
}
.col-img {
float: left;
padding: 4%;
z-index: 1;
}
.three-cols h1 {
margin-bottom: 2%;
text-align: center;
}
.three-cols p {
padding: 0.5% 0 3% 0;
z-index: -1;
}
p {
word-wrap: break-word;
color: #000;
margin: 0;
padding: 10px 20px;
font-size: 16px;
}
Here is my demo:
http://jsfiddle.net/pxD33/
PS - needs to be responsive and solution all in CSS and HTML.
<a> is by default an inline-level element. Once you set display: block to it, it fixes the issue.
.three-cols a {
display: block;
position: relative;
text-decoration: none;
color: #000;
}
http://jsfiddle.net/teddyrised/pxD33/2/
p/s: You don't need z-index for your case. You can safely remove all of them.
Anything you use a z-index with has to also have a position attribute.
I hope this helps!
You can get rid of the z-indexes, and then change
.three-cols a p:hover {
background-color: #ecebeb;
}
to
.three-cols:hover {
background-color: #ecebeb;
}
Updated fiddle: http://jsfiddle.net/pxD33/1/
updated fiddle: Fiddle
just change anchor's display to block:
.three-cols a {
display:block;
position: relative;
text-decoration: none;
color: #000;
}
and give hover class to a not p:
.three-cols a:hover {
background-color: #ecebeb;
}
As #Terry said, setting display: block on your three-cols a element should do the trick.
If you want to have a "free hanging" picture on the left of your text, you could also use a media object.
Simply add the following rules
display: block;
overflow: hidden;
to col-img and three-cols p.
You can read more about the media object here.
Is there a way to display a line next to a header using CSS? Here's an image of what I'm talking about:
I could do it with a static background image, but that'd require custom CSS for every heading. And I could do some hacky stuff using :after and background colors on the h1, but it wouldn't look right against a gradient background.
I'd like to do this with CSS, not JavaScript. If it doesn't work in older browsers, that's fine.
UPDATE:
In the past I've done something like this:
<h1><span>Example Text</span></h1>
h1 {background-image:url("line.png");}
h1 span {background-color:#FFF;dislpay:inline-block;padding-right:10px}
While that works, it's hacky, and it doesn't work well with gradient backgrounds, because the span has to have a solid background color.
What I'm really looking for is something like this:
<h1>Example Text</h1>
h1 {background-image:url("line.png");} /* but don't appear under the example text */
I misspoke about the :after thing in the original post, I was thinking of another issue I had in the past.
You could do something like the following:
HTML
<div class="border">
<h1>Hello</h1>
</div>
CSS
h1 {
position: relative;
bottom: -17px;
background: #fff;
padding-right: 10px;
margin: 0;
display: inline-block;
}
div.border {
border-bottom: 1px solid #000;
}
Here is the JsFiddle to the above code.
After doing some more research, I think I found the best solution:
h2 {
color: #F37A1F;
display: block;
font-family: "Montserrat", sans-serif;
font-size: 24px;
font-weight: bold;
line-height: 25px;
margin: 0;
text-transform: uppercase;
}
h2:after {
background: url("../images/h2.png") repeat-x center;
content: " ";
display: table-cell;
width: 100%;
}
h2 > span {
display: table-cell;
padding: 0 9px 0 0;
white-space: nowrap;
}
Modified from: How can I make a fieldset legend-style "background line" on heading text?
It still requires some extra markup, unfortunately, but it's the most minimal that I've found. I'll probably just write some jQuery to add the span automatically to the h2s.
Here is one way of doing it.
Start with the following HTML:
<h1>News<hr class="hline"></h1>
and apply the following CSS:
h1 {
background-color: tan;
display: table;
width: 100%;
}
.hline {
display: table-cell;
width: 100%;
padding-left: 20px;
padding-right: 20px;
border: none;
}
.hline:after {
content: '';
border-top: 1px solid blue;
width: 100%;
display: inline-block;
vertical-align: middle;
}
See demo at: http://jsfiddle.net/audetwebdesign/Dsa9R/
You can repurpose the hr element to add the line after the text.
The advantage here is that you don't have to wrap the text with some other element.
Note: You can rewrite the CSS selectors and avoid declaring a class name and save a bit of typing.
I've a question about star-symbols for rating showing. I have code
<style>
.goldstardiv { color: gold; }
.goldgraystardiv { color: khaki; }
.graystardiv { color: gray; }
</style>
<div class="goldstardiv">★</div>
<div class="goldgraystardiv">★</div>
<div class="graystardiv">★</div>
How to show with css a star having a gray left site and yellow right site?
Thank you
Put a div with a half grayed star (width 50% overflow hidden) over the colored one.
Html:
<div class="goldstardiv">
★
<div class="halfstar">★</div>
</div>
Css:
.goldstardiv { color: gold; position: relative; }
.halfstar {
position: absolute;
top: 0;
left: 0;
width: 8px;
color: #666;
overflow: hidden;
}
Half star with is given in pixels, but fiddle around with it to get it in % if you want.
Example:
http://jsfiddle.net/LV7SS/2/
The only way to do this with pure CSS is with a nasty hack like this, which isn't really ideal. This uses a negative margin(margin-left: -104px;) to position the grey div over the gold one.
You would be better off using images and sprites
You can do it by using the content:after property in CSS to display a second gold star over the gray one like this:
<style type="text/css">
.star {
display: inline-block;
width: 20px;
text-align: center;
}
.star.gold { color: gold; }
.star.gold-gray { color: gray; }
.star.gold-gray:after {
display: inline-block;
color: gold;
content: '\2605';
position: absolute;
margin-left: -16px;
width: 8px;
overflow: hidden;
}
.star.gray { color: gray; }
</style>
<div class="star gold">★</div>
<div class="star gold-gray">★</div>
<div class="star gray">★</div>
You do need to be specific about sizes for this to work properly, so that you can correctly set the negative margin on the half-star, and crop it at half-width using overflow:hidden, but it does what you're after.
(I haven't specified font-size in the example, you may want to do that also)
Up-side to this technique is that you don't need additional markup in your html for the half-star, just the correct class.
EDIT
Somehow I pasted the wrong link to my jsFiddle, from a previous version I was still hacking the solution, rather than the working one... Probably deserved the downvote for that, but it does work!
See it working here.
EDIT 2
cimmanon mentioned the stars 'not really being content', which is quite true, but since the question asked for a CSS solution to the problem, I made one that doesn't require a sprite-map with all possible combinations.
Not because I've got anything against sprite maps - I don't - just because I wanted to have a go at it :)
Still including <span> elements for each star (hard to avoid) but aside from that it's all good markup and I assume would work pretty well for a screenreader.
Check it out here.
<style type="text/css">
.stars .label {
width: 1px;
color: transparent;
overflow: hidden;
position: absolute;
}
.star {
display: inline-block;
width: 20px;
text-align: center;
}
.star:before {
display: inline-block;
content: '\2605';
}
.star.on { color: gold; }
.star.half { color: gray; }
.star.half:after {
display: inline-block;
color: gold;
content: '\2605';
position: absolute;
margin-left: -16px;
width: 8px;
overflow: hidden;
}
.star.off { color: gray; }
</style>
<div class="stars">
<span class="label">One and a half start (out of three)</span>
<span class="star on"></span>
<span class="star half"></span>
<span class="star off"></span>
</div>
There is some text whose formatting I would like to render in HTML. Here is an image:
Note the gray lines with the bullet points and the paragraph numbers. The bullets should be centered on the page and the numbers should be justified right.
I've been trying to think of how to do this in HTML and am coming up blank. How would you capture this formatting?
You can use the :before and :after psuedo-elements to great effect here:
http://jsfiddle.net/yNnv4/1/
This will work in all modern browsers and IE8+. If IE7 support is required, this answer is not for you :)
#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}
About the counter properties:
https://developer.mozilla.org/en/CSS_Counters
http://www.w3.org/TR/CSS21/syndata.html#counter
http://www.w3.org/TR/CSS21/generate.html#propdef-counter-increment
It's not possible to (automatically) increment the bullets.
However, it can be done with some dubious repetition:
http://jsfiddle.net/N4txk/1/
p:before { content: '\2022' }
p+p:before { content: '\2022 \2022' }
p+p+p:before { content: '\2022 \2022 \2022' }
/* .... */
(alternatively, :nth-child can be repeated in the same way: http://jsfiddle.net/N4txk/ - but it won't work in IE8; there will only be two bullets)
There is an upper limit on the number of bullets it would be sensible to have, so I think it would be acceptable to copy and paste that as many times as required.
How about something like this?
http://jsfiddle.net/6eTCf/
<div class="separator">
* <div class="page_number">1</div>
</div>
.separator{
margin: 5px 0 5px 0;
color:gray;
position:relative;
text-align: center;
}
.page_number{
position:absolute;
right: 3px;
top: 0;
}
I would float the number right and center the remaining contents (the bullet points). If you give the remaining contents an equal left and right margin larger than the numbers are wide, the contents will be centered.
I would wrap the whole thing in a div, then use relative/absolute positioning between the wrapper and the paragraph number div to get the numbers on the right-hand side like that.
Here's a fiddle showing how to do it.
There are a couple ways I can think of.
Add a <div> between the paragraphs, then add two <p>'s: <p class="dot"></p> and <p class="pnum">1</p>.
Style the <div> to the width of the the paragraphs, and set in the CSS the following:
.dot{ text-align: center; }
.pnum{ float: right; }
There are several ways I can think of:
Float + absolute position (I'll let the purists explain this one)
Old style table (I'll explain this since it's the easiest):
If the total width of the area is, say, 300px
<table><tr>
<td width="30"></td>
<td width="240" align="center">bullets</td>
<td width="30" align="right">number</td>
</tr></table>
Many people prefer using pure CSS, but I like my tables, they just work for me
`#container {
counter-reset: nums;
}
p {
position: relative;
margin: 21px 0;
}
p:before {
content: '\2022 \2022';
font-size: 2em;
position: absolute;
top: -8px;
left: 0;
line-height: 1px;``
color: #888;
width: 100%;
text-align: center
}
p:after {
content: counter(nums);
counter-increment: nums;
font-size: 1.5em;
position: absolute;
top: -8px;
right: 0;
line-height: 1px;
color: #888;
font-family: sans-serif
}`