This one is for those CSS gurus out there...
I'm trying to align the elements of this progress meter properly and efficiently. Take a look at it here:
http://jsfiddle.net/arturo_sanz/UFPnZ/embedded/result/
It looks fine, however, I'm stuck with the alignment those labels, and my CCS is becoming too complex and not efficient. I'm especially worried about top: 4px; in line 47 which is an absolute reference while it should be a relative one. I'm not happy either with the #min CSS code in lines 21-26 but I couldn't find a better way to keep the bar away from the left label.
Here is the jsfiddle for you to check:
http://jsfiddle.net/arturo_sanz/UFPnZ/
I would appreciate any improvements to that CSS code ;)
Here is the working code: http://jsfiddle.net/3A9kM/2/
Updated CSS:
.progress-label {
color: #CC0000;
display: block;
text-align: center;
float: left;
margin: 4px auto auto;
width: 100%;
}
/*Removed position: absolute;top:4px;*/
/*Added: float: left;margin: 4px auto auto*/
Cheers!!! :)
A nice fix for line 47 is:
margin: 4px auto;
See my JSFiddle.
Much shorter, much prettier, much cleaner.
DEMO
HTML:
<div id="progbar" class="frame">
<span id="min" class="min-max-label ui-widget">200</span>
<span id="progressbar">
<span class="progress-label">Loading...</span>
</span>
<span id="max" class="min-max-label ui-widget">300</span>
</div>
CSS:
#progBar {
text-align: center;
margin:0 auto;
}
#progBar span{
vertical-align: middle;
text-align: center;
display: inline-block;
color: #CC0000;
}
#progressbar {
position:relative;
width: 60%;
height: 36px;
margin: 0 15px;
border-color: #CC0000;
}
.ui-progressbar-value {
position: absolute;
top: 0;
background: #CCCCCC url(http://download.jqueryui.com/themeroller/images/ui-bg_highlight-hard_100_cccccc_1x100.png) 50%;
}
.progress-label{
position: relative;
z-index: 1;
top:4px;
}
Related
I have the following CSS lines:
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
It should look like this:
http://imgur.com/B9vblUP
But instead looks like this:
http://imgur.com/8RQTkcO
What am i doing wrong here and how to get it exactly like the first pic?
I tried overflow hidden but that only shows Liquid in 25x25 on the block and the rest is not showing.
Any help is much appreciated.
Kind regards,
Majin Buu
I think you should create another element for the orange square instead of editing the class of the h2 element because the background attribute it will be applied on that element, so I would make something like:
<div class="liquid"></div>
<h2>Liquid</h2>
.liquid {
float: left;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
To have the square floating to the left of the element.
Check out CSS position!
.liquid {
display: inline-block;
position: absolute;
width: 25px;
height: 25px;
background: #ff8125;
}
h2 {
position: relative;
margin-left: 30px;
}
<div class="liquid"></div><h2>Liquid</h2>
Use html like this
<div class="bg_white">
<span class="liquid"> </span><h2>Liquid</h2>
</div>
CSS
.bg_white{background:white; padding:5px; width:auto; float:left;}
.liquid {
display: inline-block;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
float:left;
font-size:18px;
}
.bg_white h2{float:left; margin:0px;}
Pseudo element is better for this solution:
h2 {
background: #eee;
padding: 5px;
display:inline-block;
}
.liquid::before {
content:'';
display: inline-block;
vertical-align: middle;
width: 25px;
height: 25px;
background: #ff8125;
margin-right: 15px;
}
<h2 class="liquid">Liquid</h2>
You are styling the font part of the wanted result itself. You should either add an element for the orange square or use a pseudo element. This will get you in the right direction.
.liquid {
line-height: 1;
}
.liquid:before {
background: #ff8125;
content: ''; /* important for pseudo elements */
display: inline-block;
height: .9em;
margin-right: .45em;
position: relative;
top: .1em;
width: .9em;
}
<h2 class="liquid">Liquid</h2>
you can use below CSS for this if text is small and always in one line.
.liquid {
display: inline-block;
padding-left: 10px;
border-left: 25px solid #ff8125;
margin-right: 15px;
font: 25px/25px Arial;
font-weight: bold;
}
<h2 class="liquid">Liquid</h2>
Im trying to make a line after each of my h2 tags. I can´t figure out how I should tell the width, cause the lenght of the h2 headlines is differ from h2 to h2.
I use the :after method to create lines
h2:after {
position: absolute;
content: "";
height: 2px;
background-color: #242424;
width: 50%;
margin-left: 15px;
top: 50%;
}
Check code here: http://jsfiddle.net/s9gHf/
As you can see the line get too wide, and make the website too wide.
You could achieve this with an extra <span>:
h2 {
font-size: 1rem;
position: relative;
}
h2 span {
background-color: white;
padding-right: 10px;
}
h2:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.5em;
border-top: 1px solid black;
z-index: -1;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
Another solution without the extra <span> but requires an overflow: hidden on the <h2>:
h2 {
font-size: 1rem;
overflow: hidden;
}
h2:after {
content: "";
display: inline-block;
height: 0.5em;
vertical-align: bottom;
width: 100%;
margin-right: -100%;
margin-left: 10px;
border-top: 1px solid black;
}
<h2><span>Featured products</span></h2>
<h2><span>Here is a very long h2, and as you can see the line get too wide</span></h2>
External examples: First, Second
There's no need for extra wrappers or span elements anymore. Flexbox and Grid can handle this easily.
h2 {
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 1px;
background-color: #000;
}
<h2>Heading</h2>
using flexbox:
h2 {
display: flex;
align-items: center;
}
h2 span {
content: "";
flex: 1 1 auto;
border-top: 1px solid #000;
}
<h2>Title <span></span></h2>
Here is another, in my opinion even simpler solution using a flex wrapper:
.wrapper {
display: flex;
align-items: center;
}
.line {
border-top: 1px solid grey;
flex-grow: 1;
margin: 0 10px;
}
<div class="wrapper">
<p>Text</p>
<div class="line"></div>
</div>
External link
I notice that there are some flexbox implementations but they don't explain why and how to use it.
First, we just need one element, for this example h2.
We will change the element's display behavior to display: flex
Then, we center vertically its child elements using align-items: center.
h2 {
...
display: flex;
align-items: center;
}
Then, let's draw the line using the pseudo-element after.
We add '' to the content property to draw the element (we must).
Now lets make it flexible using flex: auto. This means that our element is sized according to its width and height properties. It grows to absorb any extra free space in the flex container, and shrinks to its minimum size to fit the container. This is equivalent to setting flex: 1 1 auto.
Then we add an small gap between the text and the line using margin-left: 1rem.
Finally, we draw a black line using border-top: 1px solid #000.
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
Here is functional snippet.
h2 {
font-size: 1em; /* not needed */
display: flex;
align-items: center;
}
h2::after {
content: '';
flex: auto;
margin-left: 1rem;
border-top: 1px solid #000;
}
<h2>Normal title</h2>
<h2>Very long title to test the behavior of the element when the content is wider</h2>
This is the most easy way I found to achieve the result: Just use hr tag before the text, and set the margin top for text. Very short and easy to understand! jsfiddle
h2 {
background-color: #ffffff;
margin-top: -22px;
width: 25%;
}
hr {
border: 1px solid #e9a216;
}
<br>
<hr>
<h2>ABOUT US</h2>
Here is how I do this:
http://jsfiddle.net/Zz7Wq/2/
I use a background instead of after and use my H1 or H2 to cover the background. Not quite your method above but does work well for me.
CSS
.title-box { background: #fff url('images/bar-orange.jpg') repeat-x left; text-align: left; margin-bottom: 20px;}
.title-box h1 { color: #000; background-color: #fff; display: inline; padding: 0 50px 0 50px; }
HTML
<div class="title-box"><h1>Title can go here</h1></div>
<div class="title-box"><h1>Title can go here this one is really really long</h1></div>
I am not experienced at all so feel free to correct things. However, I tried all these answers, but always had a problem in some screen.
So I tried the following that worked for me and looks as I want it in almost all screens with the exception of mobile.
<div class="wrapper">
<div id="Section-Title">
<div id="h2"> YOUR TITLE
<div id="line"><hr></div>
</div>
</div>
</div>
CSS:
.wrapper{
background:#fff;
max-width:100%;
margin:20px auto;
padding:50px 5%;}
#Section-Title{
margin: 2% auto;
width:98%;
overflow: hidden;}
#h2{
float:left;
width:100%;
position:relative;
z-index:1;
font-family:Arial, Helvetica, sans-serif;
font-size:1.5vw;}
#h2 #line {
display:inline-block;
float:right;
margin:auto;
margin-left:10px;
width:90%;
position:absolute;
top:-5%;}
#Section-Title:after{content:""; display:block; clear:both; }
.wrapper:after{content:""; display:block; clear:both; }
I have 2 problems, but the second one can't be address until the first one is corrected. The page was looking and working as intended but when I came to work and started working on the page, it seems to be broken. I am using the same browser in both locations.
The problem is that the background for the div is set to auto, like all my other divs on the same page, but the last one for some reason is not spanning to the bottom of the image.
http://i.imgur.com/9DJa3Fp.png?1
<div class="items">
<h2><a name="friday">Friday catch of the day:</a></h2>
<img src="images/catch.png" align="right" alt="Sage-rubbed Double-cut Pork Chop" />
<p><span class="title">Alaskan Halibut with a Rich Loire Valley Beurre Blanc Sauce</span> - served with mashed purple Peruvian potatoes and haricot verts.</p>
<p><span class="title">Recommended pairing:</span> '98 Passi Emilio Vineyards Sauvignon Blanc</p>
</div>
CSS
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
}
.items img {
float: left;
margin-right: 10px;
float: right;
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
.items p {
font-family: 'PT Sans';
font-size: 16px;
}
.items a {
color: #FFFFFF;
text-decoration: none;
}
.items img {
float: left; <---- ???
margin-right: 10px;
float: right; <---- ???
border-radius: 6px;
width: auto;
padding: 8px;
background-color: #FFFFFF;
}
You're floating right and left. Choone one. You also need to clear your floats afterwards for normal flow to resume
add overflow: auto to items class.
.items {
margin: 20px;
height: auto;
width: 910px;
background-color: rgba(0, 0, 0, .7);
padding: 10px;
z-index: 1;
overflow: auto;
}
One solution could be adding an empty div and clear: both
HTML:
<div class="items">
...
<div class="clear"></div>
</div>
CSS:
.clear {
clear: both;
}
JSFiddle
Here you go. Save this code as a snippet for any future development. Just add the class .clearfix to the parent container if it contains floating childs and you're good to go :)
.clearfix{*zoom:1;}
.clearfix:before,.clearfix:after{display:table;content:"";line-height:0;}
.clearfix:after{clear:both;}
how is it possible to do that, compatible, good looking and responsive ? I think to make the H2 box with a background, but it make a lot of problem interacting with the background... it's a lot of png. I prefer a way to do it with pure css, padding, margin etc
full resolution image (too see texture)
This can be done with any semantically appropriate element of your choice, without having to set a background color.
http://cssdeck.com/labs/n2z0icvf
<h1>Technique</h1>
h1 {
overflow: hidden;
padding-left: 2em;
}
h1:before,
h1:after {
content: " ";
display: inline-block;
border-bottom: 2px solid;
position: relative;
vertical-align: middle;
width: 50%;
}
h1:before {
right: 0.5em;
margin-left: -50%;
}
h1:after {
left: 0.5em;
margin-right: -50%;
width: 100%;
}
Working fiddle: http://jsfiddle.net/58JCY/
HTML:
<fieldset>
<legend>LEVE TECHNIQUE</legend>
</fieldset>
CSS:
fieldset {
border:none;
border-top: 1px solid #999;
}
legend {
padding: 0 5px;
}
I am trying to create a little graphical box for a time element on a website. What I would like to have is something like this:
I have this HTML:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<span class="date-day">16</span>
<span class="date-month">Sep</span>
<span class="date-year">2011</span>
</time>
</div>
And this CSS so far:
.entry-meta {
display: block;
color: white;
float: left;
background: #aaa;
}
.date-day {
display: block;
font-size: 30px;
background: #444;
float: left;
}
.date-month {
display: block;
font-size: 12px;
background: #666;
float: left;
}
.date-year {
display: block;
font-size: 12px;
background: #888;
float:left;
}
My problem is that I cannot achieve two things:
To align the text to the corners of the box and forget about the baseline. I would like to align 16 to the top left corner and cut it's box at the bottom right corner. I am looking for eliminating all the spacing pixels.
To move the year under the month, without specifying exact width and height properties. If I delete float: left then it goes under the day. What I would like to have is to move it right of the day and under the month. Do I need to create an other div or spand for the month + year?
Also, it seems that it doesn't matter if I remove display: block from the span CSS-es why is it?
Here is a jsFiddle I created:
http://jsfiddle.net/ESbqY/3/
An update one based on Kolink's suggestion:
http://jsfiddle.net/ESbqY/5/
Fully customizable:
http://jsfiddle.net/5MMc9/8/
html:
<div class="entry-meta">
<time class="entry-date" datetime="2011-09-16T09:59:48+00:00" pubdate="">
<div class="date-day">16</div>
<div class="container">
<div class="date-month">Sep</div>
<div class="date-year">2011</div>
</div>
</time>
</div>
css:
.entry-meta {position: relative; font-family: Trebuchet MS;}
.container {float: left;}
.date-day {font-size: 70px; line-height: 55px; float: left; background: #fa7d7d;}
.date-month {font-size: 25px; line-height: 25px; background: #627cc6; padding: 0 0 5px 0;}
.date-year {font-size: 25px; line-height: 25px; background: #3ce320;}
Furthermore, you can add display: inline-block; to the month css if you want the div to be same width as text inside.
The following:
<span style="font-size: 2em;">16</span><span style="display: inline-block;">Sep<br />2011</span>
Will produce, more or less exactly, the result shown in the image.
This seems to work as required:
time span {
display: block;
font-size: 1em;
margin-left: 2.5em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
}
JS Fiddle demo.
Edited to amend/use the colours from the question, and to remove the (possibly unwanted) margin between the date-day and the other span elements:
time span {
display: block;
font-size: 1em;
margin-left: 2em;
}
time span.date-day {
float: left;
position: absolute;
font-size: 2em;
margin: 0;
background-color: #444;
}
time span.date-month {
background-color: #666;
}
time span.date-year {
background-color: #888;
}
.entry-meta {
border: 2px solid #ccc;
display: block;
float: left;
position: relative;
background-color: #ccc;
}
JS Fiddle demo.