I have to make a graph using simple CSS. In this graph, a background color of grey is displayed and on top of it, varying a background color of blue is displayed of varying width showing the number of items loaded. Please refer to my jsfiddle for this example. It is located at http://jsfiddle.net/mzCdb/1/ .
The problem with my code is that I want the "4/10" overlapping between teh blue and the grey portion when the width of the blue portion is 50% unlike the second graph in my fiddle. The following is my html code :-
<div class="graph">
<div class="graph-within">
</div>
<div style="text-align:center;float:left;color:#888;font-weight:bold;
font-family:Tahoma;font-size:15px;">4/10</div>
</div>
Please view the CSS code from the fiddle. Any help will be appreciated. Thanks in advance.
You could absolutely position the text within the graph:
.graph .text {
position: absolute;
z-index: 1;
top: 0;
height: 25px;
text-align: center;
width: 100px;
}
DEMO
Use negative margins to make the blur bar occupy no space.
.graph{
background:#e5e5e5;
height:25px;
width:100px;
overflow: hidden;
}
.graph-within{
background:#0088cc;
margin-right: -100%;
height:100%;
width:40%;
float:left;
}
.label{
text-align:center;
margin-right: 5px;
color:#888;
font-weight:bold;
font-family:Tahoma;
font-size:15px;
}
http://jsfiddle.net/mzCdb/2/
JSFiddle Demo
Position the 4/10 element absolutely.
CSS
.graph {
background:#e5e5e5;
height:25px;
width:100px;
position:relative;
}
.graph-within {
background:#0088cc;
height:100%;
width:40%;
float:left;
}
span {
position:absolute;
top:2px;
left:0;
width:100%;
text-align:center;
float:left;
color:#888;
font-weight:bold;
font-family:Tahoma;
font-size:15px;
}
HTML
<div class="graph">
<div class="graph-within"></div>
<span>4/10</span>
</div>
<br>
<br>
<div class="graph">
<div class="graph-within" style="width:70%;"></div>
<span>4/10</span>
</div>
Related
How do I replicate something like this with HTML/CSS?
Where:
I can have an icon or small image in the center.
Is responsive, and functions with my current breakpoints.
(fixed - width 80%, margin: 0 auto) The line isn't 100% width across the screen.
I found a few examples on stack overflow, but they don't seem to fit my purpose exactly.
Unfortunately this sample (found here) is exactly what I want to do, but it's picture, so I can't view the source beneath it.
I've got the below code, however as you can see it has 2 problems.
<div style="height: 1px; background-color: grey; text-align: center;">
<span style="position: relative; top: -2.25em; padding: 5px;">
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png' alt="text" style="width:80px;height:80px;"></span>
</div>
(See also this Fiddle)
1) Transparency on the image makes the line goes 'through' it. Is there any way I can control this?
2) (fixed - width 80%, margin: 0 auto) The line is 100% width end to end
Thanks !
Edit: Fixed the width issue with (width 80%, margin: 0 auto)
im a little bit in a rush, try this out though, ill fix the centering when I get home
CSS
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; }
.container{
width:70%;
margin:0 auto;
}
.left{
margin:3% auto;
width:30%;
float:left;
border-bottom:1px solid black;
}
img{
margin:0;
width:20%;
float:left;
}
.right{
margin:3% 0;
width:30%;
float:left;
border-bottom:1px solid black;
}
html
<div class="container clearfix">
<div class="left"></div>
<div class="img"></div>
<img src='https://upload.wikimedia.org/wikipedia/commons/9/9d/Alpha_transparency_image.png'>
<div class="right"></div>
</div>
Try this and assign same background-color to your icon .fa fa-heart-o as your main i.e parent div consist of. Thus this merge your background-color with your icon background-color.
body{
background:#111;
}
#line{
width:100%;
height:2px;
background:#fff;
}
#line > .fa{
position:absolute;
top:0;
left:45%;
color:#f22;
background:#111;
width:50px;
padding-left:40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="line">
<i class="fa fa-heart-o"></i>
</div>
If you are planning to add that icon above image then use pseudo ::before and ::after selector to your parent div to create left and right border and background:transparent to you icon. Aligning of element you need to adjust, but this are the 2 ways to align icon in center and background transparent.
body{
background:url('https://source.unsplash.com/random');
}
#line{
width:100%;
height:2px;
}
#line::before{
content:'';
width:45%;
height:2px;
background:#f22;
position:absolute;
left:0;
}
#line::after{
content:'';
width:45%;
height:2px;
background:#f22;
position:absolute;
right:0;
}
#line > .fa{
position:absolute;
top:0;
left:42%;
color:#f22;
background:transparent;
width:50px;
padding-left:40px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div id="line">
<i class="fa fa-heart-o"></i>
<i class="fa fa-heart-o"></i>
</div>
Please I have an image as a link to another page and I have a menu of 2 text options (using ul&li) When I use only my image, it works, but when I try to put everything together, my image doesn't link, only the menu works. My code run in Chrome and Explorer, I can't see where the problem is. Someone please help me.
Thanks!
Here my html code:
<body>
<div id="container">
<div id="header">
<div id="home">
<img id="flores" src="images/flores.jpg" alt="home" />
</div>
<div id="connexion">
<section id="formulario">
<p id="titulo">Mi cuenta</p>
<form action="" method="get">
...
</form>
</section>
</div>
<div id="contenido">
<div id="contenido_menu">
<ul>
<li>Rosa</li>
<li>Jasmin </li>
</ul>
</div>
</div>
</div>
</div>
</body>
My css code:
#container{
position: relative;
margin:auto;
margin-top:150px;
width:1024px;
height:768px;
background-color: grey;
}
#header{
margin:auto;
margin-top:0px;
width:1024px;
height: 150px;
}
#home{
position:absolute;
width:624px;
height:150px;
}
#flores {
margin-top:0px;
width:100%;
height:100%;
}
#contenido{
position:absolute;
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
position: absolute;
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
#contenido_menu ul{
margin: 0 auto;
}
#contenido_menu li{
display:inline;
padding-top: 50%;
padding-bottom: 5px;
}
#contenido_menu a:link, #contenido_menu a:visited{
font-family: Arial;
font-size:19px;
font-weight:bold;
color:#1a53ff;
height:40px;
padding:30px 50px;
text-decoration:none;
}
Only thing I can imagin is that some div or the menu is over the picture. Try to check it with an tag inspector from your debugging tools.
Check your code properly.
In the html you have given the location of flores.jpg as "images/flores.jpg".
While for the other image rosas.jpg, in your css you typed the location as "img/rosas.jpg".
Check whether both images are in their respective folders, or you might have typed one of them wrong.
The problem comes from the below declaration. Remove padding-top:50%. I hope by mistake you put % instead px.
#contenido_menu li{
display:inline;
padding-top: 50px;
padding-bottom: 5px;
}
Also remove position:absolute from #home class.
#home{
/*position:absolute;*/
width:624px;
height:150px;
}
DEMO
You positioned the home and the menu div absolute, if I remove absolute it works fine:
http://jsfiddle.net/2m8rmvuh/
Edit: Linked to an old fiddle, now its the correct one ;)
#home{
width:624px;
height:150px;
}
#contenido{
margin: auto;
width:1024px;
height:438px;
background-color: pink;
}
#contenido_menu{
margin-top:5px;
background-image: url("img/rosas.jpg");
background-size: 100% 100%;
width:619px;
height:95px;
line-height:95px;
float:left;
}
I dont know if thats the look you want, but if you give them the attribute absolute, they are overlapping, if you use a large picture.
I am playing around with using Divs and CSS instead of tables and I am having some problems with my code/CSS. I am trying to set this up so I have 3 columns next to eachother in a container that is centered to the page which has the text aligned to the bottom so the text is around the same height as the bottom of the image I am using in the center column. I have been unable to achieve this and I have a new found respect for UI guys. My code and CSS are as follows. Any guidance would be helpful :)
body {
}
#Container
{
border:1px solid #dddddd;
padding:40px 94px 40px 94px;
background:#ffffff;
width:55%;
height:auto;
border-radius:0px;
margin-left:auto;
margin-right:auto;
position:relative;
}
#Address
{
border:1px solid #dddddd;
position:relative;
text-align:left;
width: 33%;
}
#Phone
{
border:1px solid #000000;
position:relative;
text-align:right;
width: 33%;
}
#Logo
{
border:1px solid #4cff00;
position:relative;
float: left;
width: 33%;
}
HTML
<div id="Container">
<div id="Address">123 Testing Street</div>
<div id="Phone">(ccc) 223-3323</div>
<div id="Logo"><img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" /></div>
</div></blockquote>
see the fiddle here , This is not 100% everything you asked for, but it is a big start! You have the appearance of a table while only using div's. I am not going to finish every little detail for you, but this should get you going, it is almost complete.
#Container{
border:1px solid #dddddd;
padding:5px;
background:#bbb;
width:55%;
margin: 0px auto;
position:relative;
height:200px;
}
.cell{
display:inline-block;
width:32%;
height:100%;
border:1px solid #000;
position:relative;
vertical-align:bottom;
line-height:370px;}
<div id="Container">
<div id="Address" class="cell">123 Testing Street</div>
<div id="Phone" class="cell">(ccc) 223-3323</div>
<div id="Logo" class="cell">
<img src="http://upload.wikimedia.org/wikipedia/en/0/0c/ITunes_11_Logo.png" style="height:50px;" />
</div>
</div>
I simplified your css a bit. See if this is what you're looking for.
#Container{
margin:0 auto;
width:500px;
background:gray;
}
#Address, #Phone, #Logo{
float:left;
width:33%;
height:256px;
line-height:512px;
}
http://jsfiddle.net/39M9L/1/
Part of the problem you're going to have with aligning to the image is there is white space around the logo, so to get the text to align to the edge of the logo, you're going to have to tweak the numbers a bit, rather than rely on the image height.
You can add a span within a div, and use margin-top to make it in the bottom of the div.
CSS:
#Container > div {
min-height: 52px;
float: left;
text-align: center;
}
#Container > div > span {
display: inline-block;
margin-top: 35px;
}
Take a look: [JSFIDDLE] (http://jsfiddle.net/blck/txXE2/)
I am making a blog page and i have designed this http://jsfiddle.net/thiswolf/6sBgx/ however,i would like to remove white space between the grey,purple and red boxes at the bottom of the big red box.
This is the css
.top_div{
border:1px solid red;
position:relative;
}
.pink{
width:40px;
height:40px;
display:block;
background-color:pink;
}
.green{
width:40px;
height:40px;
display:block;
background-color:green;
}
.orange{
width:40px;
height:40px;
display:block;
margin-top:120px;
background-color:orange;
}
.red{
width:600px;
height:240px;
display:block;
background-color:red;
margin-left:40px;
position:absolute;
top:0;
}
.bottom{
position:relative;
}
.author,.date,.tags{
height:40px;
display:inline-block;
position:relative;
}
.author{
width:120px;
border:1px solid green;
margin-right:0;
}
.date{
width:120px;
border:1px solid green;
}
.tags{
width:120px;
border:1px solid green;
}
.isred{
background-color:red;
}
.ispurple{
background-color:purple;
}
.isgrey{
background-color:grey;
}
this is the html
<div class="top_div">
<div class="pink">
</div>
<div class="green">
</div>
<div class="orange">
</div>
<div class="red">
</div>
</div>
<div class="bottom">
<div class="author isred">
</div>
<div class="date ispurple">
</div>
<div class="tags isgrey">
</div>
</div>
That'll be the actual spaces in your HTML. Whitespace between inline-block elements is actually rendered. If you remove the whitespace, then it'll work.
e.g.
<div class="bottom"><div class="author isred"></div><div class="date ispurple">
</div><div class="tags isgrey"></div>
http://jsfiddle.net/Yq5kA/
There are the whitespaces in your source code. You can either delete the whitespaces, or set the font-size of the container to 0 (0r 0.1px to avoid certain browser problems).
Just add a wrapper div around all elements, for example named "container", and give it:
font-size: 0.1px;
See updated fiddle:
http://jsfiddle.net/6sBgx/3/
Keep in mind that for this solution, if the containing divs should have text in them, you have to reset the font-size.
Change the CSS:
.author, .date, .tags {
display: block;
float: left;
height: 40px;
position: relative;
}
I know this isn’t the desired solution, but it works:
.isred{
background-color:red;
margin-right: -5px;
}
.ispurple{
background-color:purple;
margin-right: -5px;
}
.isgrey{
background-color:grey;
}
Here's my updated css will resolve the problem
.author, .date, .tags {
height: 40px;
display: inline-block;
position: relative;
margin-right: -4px;
}
There are actual spaces between HTML elements. So For removing this you can try to do following solutions:
Read This document
Try in Jsfiddle -
Remove the spaces - http://jsfiddle.net/6sBgx/7/
Negative margin - http://jsfiddle.net/6sBgx/8/
Set the font size to zero to parent element - http://jsfiddle.net/6sBgx/6/
Just float them left - http://jsfiddle.net/6sBgx/9/
I have two divs that I want to appear on top of each other. I was able to do this by setting the top in css. My problem is that now there is a big gap where the div used to be. I would like to get all of the subsequent content to float up and fill that gap.
You can see the fiddle here: http://jsfiddle.net/MzvC4/
Any suggestions on how to achieve this?
Should be able to do this:
#Navigation{
position:absolute;
margin-top:-250px; //or whatever px it is
}
http://jsfiddle.net/MzvC4/1/
Set your bottom margin to the same offset:
#Navigation{
margin-bottom: -249px;
}
You can do this without using any negative margins - if you simply change the position property to absolute, it will be taken out of the flow of elements, and other elements will move up to accommodate that. Then, to accommodate for the <body>'s 10px of padding, just apply top: 10px; to move it directly on top of your <div id="Carousel">. http://jsfiddle.net/MzvC4/4/
#Navigation{
position:absolute;
top:10px;
}
There is no need to use so many selectors. Just remember, use ID if the selector is used ONCE and class for repetitive, or common, styles. Here is the adjusted code:
Fiddle: http://jsfiddle.net/MzvC4/
The HTML:
<div id="carousel">
</div>
<div id="navigation">
</div>
<div id="tabs">
</div>
<div id="subtabs">
<div id="lefttab" class="subtabcontent">
<p>This is left tab content</p>
</div>
<div id="righttab" class="subtabcontent lasttab">
<p>This is right tab content</p>
</div>
</div>
And the CSS:
div{
border:1px red solid;
}
#carousel{
margin:0 auto;
width:985px;
height:249px;
background:blue;
}
#navigation{
margin:0 auto;
width:800px;
height:100px;
background:green;
}
#tabs{
height:113px;
width:800px;
height:50px;
margin-left: auto;
margin-right: auto;
background:yellow;
}
#subtabs{
margin:0 auto;
width:800px;
height:133px;
background:#ccc;
}
#lefttab, #righttab {
float:left;
margin:0;
width:370px;
height:133px;
background:#fafafa;
}
#righttab {
margin-left:56px; /* instead of #spacer */
}
.subtabcontent p {
/* place tab specific styles here */
padding:6px;
font-size:1em;
}
.lasttab {
font-size:2em;
font-weight:bold;
}