I have scoured relative questions on here and it seems like my situation is slightly unique.
I have a jQuery slideshow that I am wanting to make 100% width and height of browser with pure CSS.
I am able to get the width 100% and have it stretch with the page via my fluid layout, however when I try to make the height 100% it the image goes away completely.
It is forcing me to define the height with pixels.
I'm going to have a footer and header that stretch 100% width over the image / background with a wrapper inside each that is 960px wide.
Here is HTML structure:
<div class="page-section header clear">
<div class="wrapper clear">
<div class="logo clear">
</div>
</div>
</div>
<div class="page-section clear">
<!-- 100% width -->
<div id="revolver">
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-2.jpg"></div>
<div class="revolver-slide"><img src="<?php bloginfo('template_directory');?>/img/slides/slide-1.jpg"></div>
</div>
</div>
<div class="footer page-section clear">
<div class="wrapper">
<div class="footer_nav clear">
<div class="footer_nav_text">
SERIES
</div>
</div>
</div>
</div>
Here is the CSS:
body {
min-height:100%;
}
img. {
max-width:100%;
}
.page-section {
width:100%;
height:100%;
margin:0px auto 0px auto;
}
.wrapper {
width:960px;
margin:0px auto 0px auto;
padding:0px 20px 0px 20px;
}
/* header */
.header {
height:27px;
background-color:#fff;
position:absolute; top:20px;
z-index:100001;
}
#revolver {
background-color:#ccc;
max-width:100%;
max-height:100%;
z-index:10001;
}
.revolver-slide {
background-color:#fff;
max-width:100%;
max-height:100%;
background-position:center center;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;
}
.footer {
height:25px;
background-color:#fff;
z-index:1000001;
position:relative;
margin-bottom:15px;
border:1px #000 solid;
}
Is it something like this? I have put
html,body
{height:100%;
}
http://jsfiddle.net/p4z8q/14/
Related
I have the page layout with footer still at the bottom of the page. The problem is when I use some divs with content which are FLOAT. If I ommit the float then the content behaves properly and does not overflow the footer.
Please see:
`enter code here`
http://jsfiddle.net/8o7t4wq9/1/
CSS:
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
HTML:
<div id="container">
<div id="header"></div>
<div id="body">
<div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">First box of content</div>
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left">Second box of content</div>
</div>
<div id="footer">FOOTER</div>
</div>
#footer {
position:absolute;//remove
bottom:0;//remove
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
clear:both;//add
}
Try to add a parent div to your floated divs and add clearfix to the parent.
html,
body {
margin:0;
padding:0;
height:100%;
}
#container {
min-height:100%;
position:relative;
}
#header {
background:#ff0;
padding:10px;
}
#body {
padding:10px;
padding-bottom:60px; /* Height of the footer */
}
#footer {
position:absolute;
bottom:0;
width:100%;
height:60px; /* Height of the footer */
background:#6cf;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
<div id="container">
<div id="header"></div>
<div id="body">
<div style="width:100%;min-height:500px;background-color:gray;clear:both;">IMAGES</div>
<div class="clearfix">
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">First box of content</div>
<div style="width:30%;min-height:1500px;margin:5px;background-color:green;float:left;">Second box of content</div>
</div>
</div>
<div id="footer">FOOTER</div>
</div>
It's hard to pinpoint/see your problem widouth fiddle, but you should probably look at css clearfix
Add css class(clearfix) to containers
.clearfix:after{
content: "";
display:table;
clear:both;
}
for more info and cros browser support look at this thread What is a clearfix?
Remove position:absolute and bottom:0 from footer and add clear:both.
#footer {
width:100%;
height:60px;
background:#6cf;
clear:both;
}
Read More
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/
I wont my image to be responsive like the rest of my website will be. How do i make it adjust to the size of the container. Not just the width but also resize the height?
The image is in a container with a max-width of 1300px, so i have made a test image that has the sizes 400px height and 1300px width
Here is the jsfiddle so you can have a look at what i mean.
http://jsfiddle.net/z6fj8dtg/2/
<div id="wrapper">
<div id="codeback">
</div>
<div id="container">
<div class="nav">
</div>
<div id="wrap">
<div class="banner">
<img src="http://s12.postimg.org/vnsghsvf1/banner.png" >
</div><!-- END OF BANNER -->
</div>
</div><!-- END OF CONTAINER -->
body{
background-color:#272822;
padding:0;
margin:0;
}
#wrapper{
width:100%;
height:inherit;
}
#codeback{
width:100%;
height:100%;
background-image:url('capture.jpg');
background-repeat: no-repeat;
position:fixed;
left:0px;
top:0px;
z-index:-1;
}
#container{
width:100%;
float:right;
}
.nav{
margin-top:200px;
width:80%;
max-width:1300px;
height:50px;
float:right;
background-color:black;
position:relative;
}
.fixedNav {
position:fixed;
margin:0;
width:80%;
right:0;
}
#wrap{
float:right;
width:80%;
max-width:1300px;
height:1500px;
background-color:white;
box-shadow: -1px -1px 35px lightblue;
}
.banner{
max-width:100%;
}
At the minute it just sits in the container but overflows to the right.
Yes that's no problem at all. Just insert the following CSS:
.banner img {
width: 100%;
height: auto; //Auto adjust height (maintain aspect ratio)
}
i used bootstrap image responsive class img-fluid and extra div tags to control image size.
<div style="width: 20%;height: 100px">
<img src="http://www.everlastingcelebrations.com/wp-content/uploads/2018/09/Top-Ganesh-Chaturthi-Messages-Images-Photos.jpg" class="img-fluid" alt="...">
</div>
I'm not sure what I'm doing wrong but having trouble applying background color for #content. But it works fine if I set the height value to let say 800px. but I want it to be either auto or 100% as this template will be used throughout the site. any advice would be greatly appreciated.
<div class="content_bg">
<div id="content">
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
</div>
</div>
<div class="footer_bg">
<div id="footer">
<div id="footerLeft">
</div>
<div id="footerRight">
</div>
</div>
</div>
/*
====================================================================
Content Area
====================================================================
*/
.content_bg
{
background:#dadad9 url(images/interior_content_bg_top.jpg) repeat-x center top;
overflow:hidden;
}
#content
{
width:980px;
margin:auto;
height:auto;
background:#fff;
}
#contentLeft
{
float:left;
width:209px;
margin-top:50px;
}
#contentRight
{
float:right;
width:770px;
margin:20px 0 0 0;
}
/*
====================================================================
Footer
====================================================================
*/
.footer_bg
{
background:#dadad9 url(images/interior_footer_bg.jpg) repeat-x center top;
clear:both;
}
#footer
{
width:980px;
height:258px;
margin:auto;
background:#dadad9 url(images/interior_footer.jpg) no-repeat center top;
}
#footerLeft
{
width:400px;
height:50px;
float:left;
padding: 20px 0 0 25px;
}
#footerRight
{
width:100px;
height:50px;
float:right;
padding: 20px 0 0 0;
}
Set the overflow to auto for #content.
#content {
width:980px;
margin:auto;
height:auto;
background:#fff;
overflow:auto;
}
The problem is that #content has no content. Since you are using height:100% for the div's height, it will expand to the full height of its parent div (i.e. .content_bg). However, .content_bg has no content either; therefore it is expanding to 100% of zero.
Try adding the class to your id <div id="content" class="content_bg"> and erase the class. And give your class these propertis
.content_bg
{
background-color: white;
width: 100%;
height: 100%;
}
Then the content in your id "content" will define the width and height.
You are having a problem applying background to #content because you didn't clear the floats. Add
<div style="clear:both"></div>
After
<div id="contentLeft">
</div>
<div id="contentRight">
<div id="ContentPane" runat="server" />
</div>
I am new to web design using tableless and I'm having problem positioning some elements on my page..
Here's the sample html: http://christianruado.comuf.com/sample.html alt text http://christianruado.comuf.com/images/screen.jpg
As you can see from the screen shots I want my right div to be vertically stretched down to the same level of my footer and position my bottom element to the lowest part of the right container.
CSS:
.container {
width:88%;
}
#header {
background:#CCCCCC;
margin-bottom:5px;
padding-bottom:2px;
height:100px;
text-align:center;
}
#content {
background: #0099CC;
margin-bottom:5px;
}
#main {
margin: .5em 0 0 0;
text-align: left;
width:80%;
}
#right {
float:right;
width: 19%;
background:#FF3300;
margin-left:2px;
height: 100%;
min-height: 200px;
}
#right .top {
top:0;
display:block;
background-color:#CCCCCC;
}
#right .bottom {
bottom:0;
display:block;
background-color:#FFCCFF;
height:30px;
}
#center {
background:#00FF99;
padding: 5px 0 0 10px;
float:left;
}
#footer {
clear:both;
height:30px;
background-color:#CCFF33;
width:80%;
text-align:left;
}
HTML markup:
<div class="container showgrid">
<div id="header">
<h1>Header</h1>
</div>
<div id="right"><span class="top">Top element</span><span class="bottom">Bottom Element</span></div>
<div id="main">
<div id="center">
<h3>Lorem ipsum dolor sit amet</h3>
<p>Content here</p>
</div>
</div>
<div id="footer">
<h3>Footer</h3>
</div>
</div>
This is not exactly the answer to your problem, but it should get you on the right track.
Behold! The Holy Grail!
If that doesn't work, another technique you can use is to fake the column. This is done by vertically tiling a background image the width of your column behind where you want your column to be. It's not bad and can work in a pinch.
css :
#header,#content,#main,#right,
#right .top,#right .bottom,#center,#footer
{float:left;}
html :
div.header <br>
div.center + div.left <br>
div.footer + div.right
should be like this/