I am trying to achieve this layout:
So far, here is the HTML I have:
<body>
<div id="content">
<div id="header">
</div>
<div id="nav">
</div>
<div id="footer">
</div>
</div>
</body>
and the CSS:
#content{
margin:0 auto;
height:1200px;
width:1000px;
border:2px solid black;
}
#header{
margin:0 auto;
width:inherit;
height:200px;
border-bottom:2px black solid;
}
#nav{
margin:0 auto;
width:inherit;
height:50px;
border-bottom:2px solid black;
}
#footer{
width:inherit;
border-top:2px solid black;
margin-top:-1200px;
height:200px;
clear:both;
}
The problem is with the footer - it is not behaving as in diagram.
Can you tell me what is wrong with my code? Please don't give me some other codes because I am new to CSS.
Your footer is moved up because you have margin-top: -1200px
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/
Please refer to this handy diagram I drew:
div1's height is unknown. div3's width is fluid; it should never overlap div2. Both div1 and div2 have the same width and are horizontally centered via margin: auto. How can I position div3 so that it aligns to the right side of body (no matter how wide body is) while sharing vertical position with div2? (Using CSS)
.div1{
margin:0 auto;
width:100px;
height:50px;
border:5px solid #995555;
}
.div2{
width:100px;
margin:0 auto;
border:5px solid #aaaa55;
height:200px;
}
.div3{
float:right;
width:50px;
height:100px;
border:5px solid cyan;
}
<div class="div1">div1</div>
<div class="div3">div3</div>
<div class="div2">div2</div>
Demo also at http://jsfiddle.net/XjC9z/1/
Like this?
HTML:
<div id='container'>
<div id='first'>1</div>
<div id='second'>2</div>
<div id='third'>3</div>
</div>
CSS:
#container{
width: 100px;
margin:0 auto;
}
#first{
border: 1px solid #ff55ff;
}
#second{
border: 1px solid #55ff77;
}
#third{
border: 1px solid #448855;
}
#first,
#second{
width: 50px;
clear:both;
float:left;
}
#third{
clear:none;
float: left;
}
See this fiddle:
http://jsfiddle.net/zaNvR/1/
A simple div grid would do the trick:
http://jsfiddle.net/NUGPv/
<div class="con">
<div class="lft">div 1</div>
<div class="rgt"></div>
</div>
<div>
<div class="lft">div 2</div>
<div class="rgt">div 3</div>
</div>
.con { overflow:hidden; }
.lft { width:100px; height:100px; float:left; }
.rgt { width:100px; height:100px; float:left; }
Simply leave the the top right cell empty.
I'd like to make something that looks like the below image using CSS:
I'm at a total loss on how to do that. Might someone help?
This can be done using two elements or one element and a pseudo-element:
HTML:
<div></div>
CSS:
div { position:relative; background-color:#333; padding:20px;
margin:20px; float:left; }
div:before { content:""; display:block; padding:5px; background-color:#f60;
border:2px solid white; position: absolute; top:-2px;
right:-2px;}
http://jsfiddle.net/Vv6Eb/
Update:
With border-top-right-radius:
http://jsfiddle.net/Vv6Eb/1/
Or, border-bottom-left-radius:
http://jsfiddle.net/Vv6Eb/4/
<div id="page">
<div id="up">
</div>
<div id="logo">
<div id="logobody"></div>
</div>
<div id="down">
</div>
</div>
#page{
margin:30px auto;
width:500px;
height:auto;
border-radius:10px;
border:2px red thin;
background:white;
overflow:hidden;
}
#logo{
float:right;
width:100px;
height:70px;
border-radius:10px;
background:white;
margin-top:-70px;
margin-right:10px;
}
#up{
width:80%;
height:60px;
border-radius-top:10px;
background:gray;
}
#down{
margin-top:-0px;
margin-right:-10px;
width:100%;
height:60px;
border-radius: 0px 10px 10px 10px;
background:gray;
}
#logobody{
border:2px blue solid;
margin :auto;
width:85px;
height:50px;
margin-top:10px;
margin-right:0px;
border-radius:7px;
}
jsFiddle
Use float..http://www.w3schools.com/css/css_float.asp
<div style="background-color:#000; height:500px; width:500px; margin-bottom:10px;">
<div style="background-color:#FFF; float:right; height:100px; width:100px; margin-right:10px; margin-top:10px;"></div>
</div>
<div style="background-color:#000; height:500px; width:500px; position:relative;">
<div style="background-color:#FFF; position:absolute; right:0px; height:100px; width:100px; margin-right:10px; margin-top:10px;"></div>
</div>
Inline styles is not advisable so might wanna write the styles in your stylesheet file. Using float makes the texts wraps the div tag. The seconds code stacks
I've two divs leftSide and rightSide whose parent is innerContainer. I've floated both the divs to left.They are appearing side by side but the right div is not covering the remaining space of the parent div.
I tried using overflow:hidden and also specified the width but still it is of the same width.
My Css:
#container {
overflow:auto;
margin:10px auto;
}
#innerContainer{
margin:10px auto;
width:1200px;
background:#FFFFFF;
border:2px solid #09F;
overflow:auto;
}
#leftSide{
overflow:auto;
float:left;
width:700px;
border:3px solid #F00;
}
#topheaderProfile{
margin:5px;
border:1px solid #F00;
}
#middleCompanyDescription{
margin:5px;
border:1px solid #333;
}
#Profile{
text-align:left;
}
.ProfileBox{
padding:10px;
cursor:pointer;
overflow:hidden;
text-align:left;
word-break:break-all;
word-wrap:break-word;
}
.CompanyLogo{
float:left;
padding:5px;
}
.rightCover{
overflow:auto;
padding:1px;
}
.companyTitle{
color:#36F;
font-size:24px;
overflow:hidden;
}
.companyTitle a{
text-decoration:none;
}
.CompanyRating{
float:left;
margin-top:3px;
}
.Companylikedicon{
overflow:hidden;
float:right;
margin-left:10px;
}
.Companycommenticon{
float:right;
margin-right:10px;
}
.CompanySlogan{
color:#999;
word-break:break-all;
word-wrap:break-word;
clear:both;
}
#rightSide{
width:100px;
border:1px solid #000;
}
My Html:
<div id="container">
<div id="innerContainer">
<div id="leftSide">
<div id="topheaderProfile">
<div id='Profile'>
<div class='ProfileBox'>
<div class='CompanyLogo'><img src='../Images/defaultPic.jpg' width='90' height='90'/></div>
<div class='rightCover'>
<div class='companyTitle'>My Company</div>
<div class='CompanyRating'>
Rating : <img src='../Images/FilledStar.png' width='20' height='20' id='Star1' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star2' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star3' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star4' />
<img src='../Images/EmptyStar.png' width='20' height='20' id='Star5' />
</div>
<div class='Companylikedicon'><img src='../Images/LikedIcon.png' width='25' height='25' /> 100</div>
<div class='Companycommenticon' ><img src='../Images/comment.png' width='25' height='25' /> 100</div>
<div class='CompanySlogan'>This is the best offer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the worldffer you get 2Rs. off in the besaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaat underwear of the world.</div>
</div>
</div> <!--ProfileBox-->
</div>
</div><!--TopHeeaderProfile-->
<div id="middleCompanyDescription">
sadasdsad
</div>
</div> <!--LeftSide-->
<div id="rightSide">
sadasdasdasd
</div>
</div>
</div>
Ok I've found the problem.There is another css file containing id names same as in this file.This is causing the problem.The properties of that file are being applied here.
Thanks everyone for your help.
I tried using overflow:hidden and also specified the width but still it is of the same width.
Use overflow: hidden but don't specify any width if you want #rightSide to fill the remaining space.
See: http://jsfiddle.net/thirtydot/Yuxzs/
#rightSide {
overflow: hidden;
border: 1px solid #000;
}
Try this:
<style type="text/css">
#rightSide {
width:100px;
border:1px solid #000;
float:left;
}
</style>
The problem I am running into is related to a footer I have absolutely positioned at the bottom of the page. Everything is fine until the copy on the page begins to extend further down the page which then causes my content wells to extend down, behind, the footer. Is there anyway I can force my content wells to 'push' the footer down the page?
Here is the relevant html:
<div id="page">
<div id="page_container">
<div id="header"></div>
<div id="nav"></div>
<div id="main_content">
<div id="left_column"></div>
<div id="right_column"></div>
</div>
</div>
</div>
<div id="footer">
<div id="footer_container">
</div>
</div>
And the relevant CSS
#page {width:100%;margin:0 0 10px 0; text-align:center;}
#page_container {width:743px;height:auto !important;height:100%;margin:0 auto;min-height:100%;text-align:center;overflow:hidden;border:2px solid #000;}
#header {width:100%;background:url('../images/header.jpg');height:87px;clear:both; margin-top: -2px;}
#nav {width:100%;height:29px;float:left; text-align:left; border-bottom: solid 2px #000; border-top: solid 2px #000;}
#main_content {width:100%;float:left; text-align:left; background-color:#fff; border-bottom: solid 2px #000; border-left: solid 2px #000; border-right: solid 2px #000;}
#footer {width:100%; position:absolute;margin-top:10px; bottom: 0; background:url('../images/footer_bg.jpg');height:133px;text-align:center;}
#footer_container{width:746px;height:133px; text-align:left; display:inline-block;}
#left_column {width:230px; float:left; text-align:left; background-color:#fff; margin-top:5px;}
#right_column {width:490px; float:right; text-align:left; background-color:#fff;margin-top:5px; padding:10px;}
Thanks for any help you might be able to give!
Use position: fixed; for the footer, you also might want to have some padding-bottom for your body so that the content won't go under it.
Take out the height: 100% on pageContainer - that fixes the div to the window height and not the content height.
Try this:
<style type="text/css">
html, body { margin:0; padding:0; height:100%; }
#page_container { width:743px; margin:0 auto; }
#header { height:87px; border:1px solid #000; }
#footer { height:133px; position:absolute; bottom:0; width:100%; border:1px solid #000;}
#nav { height:29px; border:1px solid #000;}
#left_column { width:230px; float:left; border:1px solid #000;}
#right_column { width:490px; float:left; border:1px solid #000;}
#page { min-height:100%; position:relative; }
#main_content { padding-bottom:133px; }
.clear { clear:both; }
</style>
<!--[if lt IE 7]>
<style media="screen" type="text/css">
#container {
height:100%;
}
</style>
<![endif]-->
HTML (note - you must put #footer inside #page for this method to work):
<div id="page">
<div id="page_container">
<div id="header">hhhh</div>
<div id="nav">nav</div>
<div id="main_content">
<div id="left_column">lll</div>
<div id="right_column">rrr</div>
<div class="clear"></div>
</div>
</div>
<div id="footer">
<div id="footer_container">fffff</div>
</div>
</div>
You can preview working example here: http://www.front-end-developer.net/examples/bottomfooter/footer.htm
Tested on Chrome, Firefox, IE6, IE7, IE8 and Opera.