I am trying to achieve bar graph for a simple html page using my own css. I am in the initial stage of creating html and css. Below is my html and css.
fiddle: http://jsfiddle.net/ismailvtl/GJUmq/
I want my "bar" to stay on "line" even if I change the height of "bar".
HTML:
<div class="bar-holder">
<div class="bar car"></div>
<div class="bar fat"></div>
<div class="bar iron"></div>
</div>
<div class="line"></div>
CSS:
.bar-holder
{
height:auto;
width:100%;
float:left;
}
.line {
width:100%;
height:3px;
background:#000;
float:left;
position:relative;
}
.bar {
height:350px;
width:40px;
float:left;
margin-left:20px;
border:1px solid #dedede;
bottom:0;
}
.car {
background:blue;
height:240px;
}
.fat {
background:red;
height:300px;
}
.iron {
background:black;
height:330px
}
http://codepen.io/anon/pen/kiwqE
All your bars need to be absolute and have a bottom 0
Related
I need to cut an image in Photoshop and to recompose it. I thought to create a table / div-table where put the pieces of the partitioned image.
I have done this:
<div id="Table">
<div id="row">
<div id="col">
<img src="01.png" alt="">
</div>
<div id="col">
<img src="02.png" alt="">
</div>
<div id="col">
<img src="03.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="04.png" alt="">
</div>
<div id="col">
<img src="05.png" alt="">
</div>
<div id="col">
<img src="06.png" alt="">
</div>
</div>
<div id="row">
<div id="col">
<img src="07.png" alt="">
</div>
<div id="col">
<img src="08.png" alt="">
</div>
<div id="col">
<img src="09.png" alt="">
</div>
</div>
</div>
with Css:
<style type="text/css">
<!--
img {
width: 100%;
height: auto;
}
#Table {
display: table;
width: 50%;
}
#row {
display: table-row;
}
#col {
display:table-cell;
}
-->
</style>
UPDATE:
I have to add in the middle (img 5) a table with the items, the quantity and the price. I have updated the fiddle. There are some problems in the fiddle but here there are the link with the screenshot of my page.
https://www.dropbox.com/s/sxa2ug1vz5lcdml/schermata7.png?dl=0
JSFIDDLE:
http://jsfiddle.net/wdb5gq29/43/
I'm working on a similar project (responsive image map), and I found positioned divs placed over a single image to be much more stable.
It has the added advantage of being used as an image map, because you can put content in or add functionality to the 9 divs, use more or less divs, and there are no alignment issues because it uses one image versus multiple sliced images. An awesome example is the responsive image map at CSS Play: http://www.cssplay.co.uk/menu/cssplay-responsive-image-map.html
Here is the code for an example similar to yours.
JSFiddle
HTML
<div id="wrapper">
<div class="image-holder">
<img src="http://i.imgur.com/3bhQPx0.jpg" class="image-background" />
<div class="hotspot-container">
<div id="L01">1</div>
<div id="L02">2</div>
<div id="L03">3</div>
<div id="L04">4</div>
<div id="L05">5</div>
<div id="L06">6</div>
<div id="L07">7</div>
<div id="L08">8</div>
<div id="L09">9</div>
</div>
</div>
</div>
(Note: The CSS is written out in long form as an example for easier use. It would be shortened down on a live site by combining the similar styles.)
html{
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
body {
height:100%;
width:100%;
margin:0;
padding:0;
border:none;
}
#wrapper {
height:100%;
width:100%;
}
.image-holder {
width:50%;
position:relative;
}
.image-background {
width:100%;
display:block;
}
.hotspot-container {
height:100%;
width:100%;
position:absolute;
top:0;
left:0;
}
#L01 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:0%;
border:solid 1px #000000;
}
#L02 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:0%;
border:solid 1px #000000;
}
#L03 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:0%;
border:solid 1px #000000;
}
#L04 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:33%;
border:solid 1px #000000;
}
#L05 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:33%;
border:solid 1px #000000;
}
#L06 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:33%;
border:solid 1px #000000;
}
#L07 {
width:33%;
height:33%;
position:absolute;
left:0%;
top:66%;
border:solid 1px #000000;
}
#L08 {
width:33%;
height:33%;
position:absolute;
left:33%;
top:66%;
border:solid 1px #000000;
}
#L09 {
width:33%;
height:33%;
position:absolute;
left:66%;
top:66%;
border:solid 1px #000000;
}
Remember to add !DOCTYPE html, or IE will have issues. Also, the div widths are set at 33% with a border to highlight the structure. On the live version, you'll delete the borders and try setting the horizontal divs to 33.333%, equaling to 100%. Or 33% 34% 33%.
For your original CSS table layout, you can add the following additional CSS to stabilize the table and remove the default bottom gap under the images, and it worked in Firefox and Explorer, but showed the odd gap or alignment issues in other browsers at various screen sizes.
.table {
display:table;
width:50%;
margin:0;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
}
.col {
display:table-cell;
border:none;
}
.image {
width:100%;
height:auto;
border:0px;
vertical-align:bottom;
}
Updated Redesign Using a Flexable Image Background
According to your latest Fiddle, it looks like you would like to display a data table, with the printer image as a background. The JSFiddle example below has a flexible container div set at the requested 50%. Within the container is the data table, and an absolutely positioned printer image that scales, and serves as the background.
JSFiddle
.price-container {
position:relative;
padding:0;
display:table;
width:50%;
}
.image-bg {
display:block;
position:absolute;
top:0;
left:0;
min-height:100%;
/* min-width:300px; - setting is helpful if the distortion at smaller sizes is bothesome, set here and on table-holder - width of the actual image */
width:100%;
height:auto;
margin:0;
padding:0;
z-index:-1;
}
.table-holder {
z-index:2;
padding:2em;
/* min-width:300px; */
}
.printer-display-table {
width:100%;
padding:0;
border-width:0;
border-style:none;
border-collapse:collapse;
font-family:verdana;
font-size:.6em;
}
.printer-display-table td {
border:solid 1px #000000;
padding:.5em;
}
HTML
<div class="price-container">
<img src="http://i.imgur.com/wurCt2y.jpg" class="image-bg" />
<div class="table-holder">
<table class="printer-display-table">
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
<tr><td>Item</td><td>Q</td><td>Price</td></tr>
<tr><td>BlaBlaBla</td><td>1</td><td>50</td></tr>
<tr><td>Eve</td><td>Jackson</td><td>94</td></tr>
</table>
</div>
</div>
Add display: block and remove width from your img tag to get rid of the cellspacing:
img {
display: block;
height: auto;
}
updated fiddle: http://jsfiddle.net/wdb5gq29/42/
My site has a 100% width header & footer, and 3 columns. The columns need to all be fixed width, but in the center of the page.
HTML
<div id="Table_01">
<div id="Header"></div>
<span id="LeftCol">Left Col </span>
<span id="MidCol">Middle </span>
<span id="RightCol">Right Col </span>
<div id="Footer">Footer</div>
</div>
CSS
#Table_01 {
position:absolute;
left:0px;
top:0px;
width:100%;
}
#Header {
position:absolute;
left:0px;
top:0px;
width:100%;
height:42px;
background-image: url("images/Header.gif");
}
#LeftCol {
position:absolute;
left:0px;
top:42px;
width:300px;
height:422px;
text-align:center;
border:2px solid;
}
#MidCol {
position:absolute;
left:300px;
top:42px;
width:550px;
height:422px;
text-align:center;
border:2px solid;
}
#RightCol {
position:absolute;
left:850px;
top:42px;
width:300px;
height:422px;
text-align:center;
border:2px solid;
}
#Footer {
position:absolute;
left:0px;
top:464px;
width:1000px;
height:1536px;
}
JSFIDDLE
What you need is a mix of position:relative and margin:0 auto applied to a container.
Add a container div:
.container {
width:1150px;
margin:0 auto;
position:relative;
}
See updated JSFIDDLE
I can't figure out how to set up the box model for my layout.
The "[container|x]" elements you see are placeholders, which are later replaced by php.
Here is a sketch of how it should look like:
I tried to google it and search here on stack overflow and of course I did find a lot about box models and problems with it, but nothing helped me here.
This is what I already have:
html:
<div class='headerimage'>
[container|1]
</div>
<div class='mainwrapper'>
<div class='femininHead'>
[container|2]
</div>
<div class='lineH1'> </div>
<div class='feminin'>
<div class='femininSub1'>
[container|3]
</div>
<div class='lineV1'> </div>
<div class='femininSub2'>
[container|4]
</div>
<div class='lineV2'> </div>
<div class='femininSub3'>
[container|5]
</div>
</div>
<div style='clear:both;'></div>
<div class='maskulinHead'>
[container|6]
</div>
<div class='lineH2'> </div>
<div='maskulin'>
<div class='maskulinSub1'>
[container|7]
</div>
<div class='lineV3'> </div>
<div class='shopButton'>
[container|8]
</div>
</div>
<div style='clear:both;'></div>
<div class='unisexHead'>
[container|9]
</div>
<div class='lineH3'> </div>
<div class='unisex'>
<div class='unisexSub1'>
[container|10]
</div>
<div class='lineV4'> </div>
<div class='unisexSub2'>
[container|11]
</div>
<div class='lineV5'> </div>
<div class='unisexSub3'>
[container|12]
</div>
</div>
</div>
css:
.headerimage {
position:absolute;
left:0px;right:0px;
background-color:#000000;
height:367px;
}
.mainwrapper{
position:relative;
top:367px;
}
.femininHead {
position:relative;
width:800px;
height:87px;
top:50px;
}
.femininHead .image1_headline{
line-height:30px;
font-size:24px;
position:relative;
}
.feminin {
position:relative;
}
.lineH1{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
bottom:2px;
}
.femininSub1 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV1{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV2{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
height:128px;
width:1px;
background-color:#000000;
position:relative;
}
.femininSub3{
width:266px;
height:125px;
position:relative;
float:left;
position:relative;
}
.maskulinHead {
position:relative;
width:800px;
height:87px;
top:127px;
}
.maskulinHead .image2_headline{
line-height:36px;
font-size:36px;
right:300px;
}
.lineH2{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:133px;
}
.maskulin {
position:relative;
}
.maskulinSub1 {
position:relative;
width:266px;
height:125px;
float:left;
position:relative;
}
.lineV3{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
position:relative;
height:128px;
width:1px;
}
.shopButton {
width:536px;
height:218px;
float:left;
position:relative;
}
.unisexHead{
width:259px;
height:125px;
position:relative;
line-height:36px;
font-size:36px;
}
.unisexHead .image3_headline{
line-height:36px;
font-size:36px;
}
.lineH3{
background-image:url(/img/tempdyn/streifenlinie_horizontal.png);
width:800px;
height:1px;
background-color:#000000;
position:relative;
top:594px;
}
.unisex {
position:relative;
}
.unisexSub1
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV4{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub2 {
position:relative;
width:266px;
height:125px;
float:left;
}
.lineV5{
background-image:url(/img/tempdyn/streifenlinie_vertikal.png);
background-repeat:repeat-y;
background-position:right top;
float:left;
background-color:#000000;
position:relative;
height:128px;
width:1px;
}
.unisexSub3{
width:266px;
height:125px;
position:relative;
float:left;
}
Thanks in advance :)
can't see why box-model can help you with this. maybe you are looking for FlexBox! Or go classic and use display:inline-block for the nested boxes(3,4,5,7,8,10,11,12) and all others just row divs.
But don't use floats any more!
Check out this simplified solution on JSBin.
The basic idea is to wrap all the items except the 1st box in a containing wrapper .wrap. A horizontal margin of auto along with a fixed width will center it in the page. Within that, you have your side-by-side boxes float left and give them fixed widths. The div below them needs to clear the float.
Hope the example is helpful.
I have a minor issue here. I'd like to center the red div and have the two green divs float to the right. The two right divs appear to drop down?
http://jsbin.com/ewihuh/1/edit
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0px auto;
}
.right1, .right2 {
color:white;
float:right;
width:100px;
background:green;
}
Live Demo
Hi now change to your html code and some change to css
Css
.headertop {
width:100%;
background:black;
text-align:center;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin:0 auto;
}
.right1, .right2{
color:white;
float:right;
width:100px;
background:green;
}
HTML
<div class="headertop">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
<div class="centerblock">Centered</div>
</div>
HTML
<div class="headertop">
<div class="centerblock">Centered</div>
<div class="rights">
<div class="right1">right 1</div>
<div class="right2">right 2</div>
</div>
</div>
CSS
.headertop {
width:100%;
height:30px;
background:black;
text-align:center;
position:relative;
}
.centerblock {
color:white;
text-align:center;
background:red;
width: 200px;
margin: 0 auto;
}
.rights {
position:absolute;
right:0;
top:0;
width:100px;
}
.right1, .right2 {
color:white;
width:50px;
background:green;
float:left;
}
DEMO: http://jsbin.com/ewihuh/7/edit
I have 10 sets of DIVs nested in a parent DIV:
<div id="bar_block">
<div class="bar bar1"></div>
<div class="bar bar2"></div>
<div class="bar bar3"></div>
<div class="bar bar4"></div>
<div class="bar bar5"></div>
<div class="bar bar6"></div>
<div class="bar bar7"></div>
<div class="bar bar8"></div>
<div class="bar bar9"></div>
<div class="bar bar10"></div>
</div>
I've used this CSS so far:
#bar_block {
width:350px;
height:75px;
}
.bar {
border:1px solid #000;
width:8%;
float:left;
margin-right:5px;
}
.bar1 {
height:10%;
}
.bar2 {
height:20%;
}
.bar3 {
height:30%;
}
.bar4 {
height:40%;
}
.bar5 {
height:50%;
}
.bar6 {
height:60%;
}
.bar7 {
height:70%;
}
.bar8 {
height:80%;
}
.bar9 {
height:90%;
}
.bar10 {
height:100%;
margin:0;
}
I wanted all of the bars to float left bottom. Absolute position didn't work for me since all of the bars will cramped together. Any ideas?
Try changing the CSS for the container and divs to:
#bar_block {
width:360px;
height:75px;
position:relative;
}
.bar {
border:1px solid #000;
width:24px;
bottom:0;
display:inline-block;
margin-right:2px;
}
The inline-block combined with the bottom and pixel width should do it.
jsFiddle example.