I have a basic HTML page where everything is wrapped inside a mainWrapper div and secondWrapper div.
everything is set to 960px size (the pageHeader, the pageContent and pageFooter).
I need to keep everything 960px apart from the pageFooter.
This is my CSS code:
<style type="text/css">
<!--
body {
}
#secondWrapper {
margin-left:auto;
margin-right:auto;
width:960px;
min-width:910px;
}
#mainWrapper{
margin-left:auto;
margin-right:auto;
width:960px;
}
#pageHeader {
height:80px;
width:100%;
min-width: 918px;
border-bottom: solid 1px #ededed;
z-index:1000;
position:relative;
}
#pageContent {
clear:both;
width:100%;
min-width: 918px;
background-image:url(img/map.png);
height:600px;
background-repeat:no-repeat;
background-position:center;
box-shadow: 6px 0px 5px -5px #999, -6px 0px 5px -5px #999;
z-index:1;
}
#pageFooter {
background-color:#CCC;
width:100%;
min-width: 918px;
}
#logo{
position: absolute;
margin-left:29px;
background-color:#cb202d;
width:120px;
height:110px;
top: 0;
text-align:center;
vertical-align:center;
display:block;
font-family:Tahoma, Geneva, sans-serif;
font-size:24px;
color:#FFF;
font-weight:bold;
float:left;
z-index:1000;
-webkit-box-shadow: 0 5px 6px -6px grey;
-moz-box-shadow: 0 5px 6px -6px grey;
box-shadow: 0 5px 6px -6px grey;
}
#logoTxt{
position: relative;
top:26%;
}
#yourCurrentTime{
float:left;
left:220px;
top:10%;
position:relative;
border: 10px solid #1abc9c;
border-radius:4px;
}
#arrow-down {
position:absolute;
width: -23px;
height: 2px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #1abc9c;
left: 99px;
top: 30px;
}
#b {
position:absolute;
width:200px;
height:115px;
z-index:10000000;
left: -59px;
top: 48px;
background-color:#333;
display:none;
}
div#a:hover div#b {
display: inline;
}
div#a:hover {
background-color:#eceded;
cursor:pointer;
}
div#divBtn:hover {
background-color:#4a4a52;
cursor:pointer;
}
div#a{
width:140px;
height:47px;
position:absolute;
left: 825px;
top: 0px;
}
-->
</style>
I did try a few solutions found on Google and stackoverflow like this:
html,
body {
margin:0;
padding:0;
height:100%;
}
but that didn't work for me!
Any help would be appreciated.
Here is the Jsfiddle: http://jsfiddle.net/crf121359/jwgfH/
You need to do it like this:
HTML
<div class="wrap">
<div class="wrap_inner>
<!-- Pwraput here your pageHeader and pageContent -->
</div>
</div>
<footer>
</footer>
CSS
.wrap {
position: relative;
min-height: 100%;
padding-bottom: 200px /*footer height*/
}
.wrap_inner {
width: 960px;
margin: 0 auto;
}
footer {
width: 100%;
height: 200px;
position: absolute;
left: 0;
bottom: 0;
}
You just need to take your pageFooter outside of the wrapper.
Here's a working example:
http://jsfiddle.net/jwgfH/3/
You should see how it looks here, not inside the little frame:
http://jsfiddle.net/jwgfH/3/show
width: 100%;
only works if the parent element has a width defined.
Try giving your body element a max-width and see if that works
can you show your html too ? if the parent div or container is having 100% width then it should show the perfect result.
If you want to create a webpage that's 960px wide, define it in your <body> tag's by placing width:960px; in the CSS.
Then, use width:100%; in the rest of your elements - only for those that you want to display as 960px. The rest can be divided by using width:50%;, width:25%;, which is 50% of 960px and 25% of 960px respectively.
Also, height:100% is negligible, the rest of the elements will automatically define the height of the webpage, as long as you place them correctly.
In short, do this:
body {
width:960px;
margin:0 auto;
}
#secondWrapper {
width:100%;
float:left;
}
...and so on and so forth.
(NOTE: To solve your positioning problem, float:left is probably the best way to go. Use it on most of the elements you need to position accurately. If not, the browser will estimate where it will go.)
AFTER EDIT:
If you want a 960px gap between the #pageContent and #pageFooter, you can always define a margin-top like this:
#pageFooter {
margin-top:960px;
}
Related
I have an image I would like to display as a circle with (border-radius:50%) and on the same line I would like to have some text with a set width and background. I would not like to hard code any values. What is the best way of accomplishing this?
Here is a picture
fiddle
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
.i {
width: 80px;
height: 80px;
border-radius: 50%;
}
.headingText {
color: white;
background: black;
display: inline-block;
width: 350px;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
You could try something like this:
.header
{
padding-top:26px;
padding-left:40px;
position:relative;
}
.i
{
position:absolute;
width:80px;
height:80px;
border-radius:50%;
top:0;
left:0;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
}
Using pseudo-classes and absolute positioning you can get the effect you want.
The below answer uses your existing HTML so you don't have to change any of that and just changes your CSS.
You can add some more padding to the text to make it a bit more spaced out if required and the background should sort itself out.
.header {
position: relative;
display: inline-block;
margin: 30px;
overflow: visible;
}
.header img.i {
width: 80px;
height: 80px;
border-radius: 50%;
position: absolute;
bottom: 16px;
left: -40px;
z-index: 1;
overflow: hidden;
border: 3px solid black;
}
.header p.headingText {
padding: 16px 32px 16px 80px;
color: black;
border: 3px solid black;
}
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg" />
<p class="headingText">Hello</p>
</div>
Just add position: absolute in i class then control the margin of headingtext:
HTML:
<div class="header">
<img class="i" src="http://www.planwallpaper.com/static/images/colorful-triangles-background_yB0qTG6.jpg"/>
<p class="headingText">Hello</p>
</div>
CSS:
.i
{
width:80px;
height:80px;
border-radius:50%;
position: absolute;
}
.headingText
{
color:white;
background:black;
display:inline-block;
width:350px;
padding-top:10px;
padding-bottom:10px;
text-align:center;
margin: 40px 0 0 37px;
}
FIDDLE
use a block element instead with a negative margin to the top (half circle size - half of the padding) and a margin to the left (half circle size). Just change:
.headingText {
/*display: inline-block;*/
display: block;
margin-top: -45px;
margin-left: 40px;
}
Example fiddle: https://jsfiddle.net/c67dchhv/
just simple make .header class position:relative; if you want to define any height and width you can, .i class position:absolute; give margin on .headingtext class https://jsfiddle.net/hamzanisar/aphzeyyt/ maybe it will helpful for you.
I am not sure how to ask my question. If you go to this site: http://powellgroupconstruction.com/ I am trying to get the bottom of my content class to go over top my footer, like in this example image.
Here is my HTML:
<div class="wrapper">
<div class="content">
</div><!--content-->
</div><!--wrapper-->
<div class="footer">
</div><!--footer-->
and my CSS
.wrapper{
background-color:#FFF;
}
.content{
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
}
.footer{
background-color:#000;
height:500px;
}
Any help would be much appreciated.
you have to only set the content to position relative and elevate a z-index.
At this point your content are over the footer.
But now to push your footer behind you need to add a margin-top -100px , because the height you have defined in your css.
try this css code. (this work):
.wrapper{
background-color:#FFF;
}
.content{
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
position:relative;
z-index:999999;
}
.footer{
background-color:#000;
height:500px;
margin-top:-100px
}
You need to adjust the margins... Make the footer have a negative top-margin or the wrapper have a negative bottom margin... Oh, and give the wrapper a slightly elevated z-index...
.footer {
margin-top: -100px;
}
.wrapper {
position: relative;
z-index: 1;
}
OR
.wrapper {
margin-bottom: -100px;
position: relative;
z-index: 1;
}
I personally prefer the first one...
use z-index property higher than the footer
.wrapper{
background-color:#FFF;
}
.content{
z-index:100;
background-color:#FFF;
width:1027px;
min-height:300px;
margin:0 auto;
box-shadow: 12px 0 15px -4px #888, -12px 0 8px -4px #888;
border-bottom-left-radius:2em;
border-bottom-right-radius:2em;
margin-bottom: -100px;
}
.footer{
z-index:1;
background-color:#000;
height:500px;
}
.wrapper,.footer,.content{
position:relative;
}
Also set position as relative to work the z-index property.For more detail and example visit css-tricks.com.Also set margin-bottom as negative value to overflow above the footer
You can achieve the result by using z-index property and saying position : absolute in div
.content{
z-index:1000;
position : absolute
.........
}
.footer
{
z-index:0;
position : absolute
}
The problem you have is the wrapper has a background-color. z-index only works with siblings, so you can do this: remove background-color: #fff; from .wrapper (otherwise the .wrapper color will block the footer from showing where it overlaps), or move .footer inside of .wrapper. Then add the following:
.footer {
position: absolute;
top: 250px;
z-index: -1;
width: 100%;
}
Here's a working Demo
Just use the following css rules
.content {
background-color: #FFFFFF;
border-bottom-left-radius: 2em;
border-bottom-right-radius: 2em;
bottom: -90px;
box-shadow: 12px 0 15px -4px #888888, -12px 0 8px -4px #888888;
margin: 0 auto;
min-height: 300px;
position: relative;
width: 1027px;
height: 570px;
z-index: 1000;
}
.footer {
background-color: #000000;
height: 500px;
margin: 0 auto;
position: relative;
}
im using this CSS for my website footer:
what would be the best way to make it display in the centre of the page. my website is responsive so they automatically go underneath each other when the screen is made smaller but when the screen is larger they are more to the left than the right.
i have created a fiddle here so you can also see the html:http://jsfiddle.net/x4A4B/
any help would be much appreciated
#footer {
width:100%;
min-height:500px;
position:relative;
bottom:0;
left:0;
border-top:4px solid #F36F25;
background-color:#666666;
color:#EEEEEE;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footer-top {
width:100%;
padding-top:10px;
border-bottom:2px #EEEEEE solid;
display:block;
}
#footer-left {
width: 290px;
display:inline-block;
padding: 5px 15px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-middle {
width: 294px; /* Account for margins + border values */
display:inline-block;
padding: 5px 15px;
margin: 0px 5px 5px 5px;
border-right:1px #EEEEEE solid;
vertical-align:top;
}
#footer-right {
width: 270px;
padding: 5px 15px;
display:inline-block;
vertical-align:top;
}
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
}
are you talking about your Copyright label?
if I understood correctly, you need text-align:center; in footer-bottom as in
#footer-bottom {
margin-top:5px;
padding: 15px 15px;
font-size:12px;
text-align:center;
}
I think you'll need something like this regarding lay-out:
HTML:
<div class="wrapper">
<div class="left">
Content goes here
</div>
<div class="middle">
Content goes here
</div>
<div class="right">
Content goes here
</div>
</div>
CSS:
.wrapper{
position: relative;
float: left;
left: 20.00%;
width: 60.00%;
}
.left{
position: relative;
float: left;
left: 0%;
width: 32.00%;
}
.middle{
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
}
.right{
position: relative;
float: right;
right: 0%;
width: 33.00%;
}
Of course, you'll have to fill the structure with your content, and modify the margins to completely suit your needs, but I think you'll manage to do that. This example is just to get the idea.
See it in action here: JSFiddle
im using this css code:
/* status update page style */
#content_wrapper {
display: inline;
width: 80%;
padding: 0;
margin: 0 auto;
}
#content_update {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_maintainance {
display: block;
float: left;
padding: 20px;
margin-top:20px;
width: 100%;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
#content_sidebar {
display: block;
float: right;
width: 230px;
padding: 20px;
background-color: #eee;
border-radius: 10px;
box-shadow: 0 1px 6px rgba(0,0,0,0.5);
}
/* FOOTER */
#footer {
width:100%;
height:580px;
position:absolute;
bottom:0;
left:0;
border-top:4px solid #ed1c24;
background-color:#eeeeee;
}
#footer-inner {
width:80%;
margin:0 auto 0 auto;
height:inherit;
}
#footerTop {
width:100%;
height:480px;
padding-top:10px;
border-bottom:2px #000000 solid;
}
#footerTopLeft {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopMid {
width:30%;
height:420px;
float:left;
display:inline;
margin-top:10px;
padding:0 15px 10px 15px;
border-right:1px solid #000000;
}
#footerTopRight {
width:30%;
height:420px;
float:left;
display:inline;
padding:0 15px 10px 15px;
}
but the divs are displaying behind the footer divs. i have created a fiddle here so you can see the html too - http://jsfiddle.net/wmrhC/
It's because you have set the footer div to be absolutely positioned at the bottom of the browser window with a height of 580px. This takes the div out of the regular document flow, which means other elements can start hiding behind it, and since it is 580px high, most other elements on the page will hide behind it. You could fix this by setting the z-index on the footer to -1, but that's probably not what you are after, as it would just mean that the div's will start floating over the top of the footer instead of behind the footer, and that still doesn't look pretty.
You should get rid of the absolute positioning which you have set currently, and maybe look at something like CSS sticky footer for an approach which will let you set a footer which sticks to the bottom of the page instead of to the bottom of the browser window.
When working with position: absolute or fixed you should always be aware that these elements can cover other parts of your site, and you have to manage their depth manually
You can do this using the z-index property.
Let's say that you would like that the footer part appears below all contents.
You could add the z-index property like this:
#footer {
/* other styles */
z-index: -1;
}
See it in action
Though note, that this only fixes the "content is displayed behind" problem. But looking at your page you have more positioning problems to solve.
As stated in other answers, it's because you've positioned your footer div to be fixed.
Something along this line (regarding HTML and CSS) should help for your page lay-out:
JSFiddle demo
This is the CSS (see the JS Fiddle for the full code):
...
.wrapper {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
background-color: #cccccc
}
.left1 {
position: relative;
float: left;
left: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.left2 {
position: relative;
float: left;
left: 1.50%;
width: 32.00%;
background-color: #ccccff
}
.right {
position: relative;
float: right;
right: 0.50%;
width: 32.00%;
background-color: #ccccff
}
.footer {
position: relative;
float: left;
left: 5.00%;
width: 90.00%;
margin: 10px 0px;
background-color: #cfcfcf
}
...
As you can see, none of these items are positioned absolute or fixed.
Be sure to check this link too, which explains how you can create a sticky footer:
CSS Sticky footer (As indicated by another answer).
I am trying to reproduce this image, with HTML and CSS, but I'm not sure how to place solid images on translucent divs on top of an image. There's one up top and on bottom. And I need a table of these.
http://dl.dropbox.com/u/17949100/house.png
Response to comment: <table> is my lazy way of forcing all the divs to be the same width (and the image). I guess I need to take the text out of the divs and place them, which I also had a hard time doing. Then I worried if use resizes the browser.
Here's what I got so far on jsFiddle. Here's the HTML code:
<table><tr><td>
<img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
<div class="address"><p class="address">804 Rolfe</p></div>
<div class='desc'>
<span class='l'>2 Bedrooms</span>
<span class='r'>$2100</span>
</div>
</td></tr></table>
Here's the CSS file:
div.address {
width:100%;
height:20px;
background-color:#000000;
opacity:0.5;
}
span.l{
width:50%;
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
font-size:75%;
float:left;
margin-top:0px;
}
span.r{
width:50%;
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
font-size:75%;
float:right;
margin-top:0px;
}
div.desc {
width:100%;
height:20px;
background-color:#000000;
opacity:0.5;
}
p.address{
font-family:Helvetica;
height:20px;
opacity:1;
color:#FFFFFF;
text-align:center;
}
The fiddle with markup cleaned and css refactored: http://jsfiddle.net/32szC/4/
Anyway take into serious consideration the suggestion to not use tables for layout purpose: so I made the css working even if you choose to remove the table structure at all using display: inline-block on the .wrapper element (see http://jsfiddle.net/32szC/7/)
HTML
<table>
<tr><td>
<div class="wrapper">
<img src="http://dl.dropbox.com/u/17949100/samplehouse.png" />
<div class="address"><span class="address">804 Rolfe</span></div>
<div class='desc'><span>2 Bedrooms</span><span>$2100</span></div>
</div>
</td></tr></table>
CSS
.wrapper {
position: relative;
height: 100%;
}
.wrapper div {
position: absolute;
z-index: 1;
left: 0;
width: 100%;
background: rgba(0,0,0, .75);
height:20px;
}
div.address { top: 0; }
div.desc { bottom: 0; }
span {
font-family: Helvetica;
text-align:center;
font-size:75%;
color: #fff;
height: 20px;
line-height:20px;
}
.address span {
display: block;
}
.desc span {
width:50%;
float: left;
}
.desc span + span {
float:right;
}
Here's my interpretation of what you should be doing:
http://jsfiddle.net/32szC/8/
HTML:
<div class="product">
<img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
<span class="address">804 Rolfe</span>
<div class='desc'>
<span class='left'>2 Bedrooms</span>
<span class='right'>$2100</span>
</div>
</div>
CSS:
.product {
width: 272px;
height: 220px;
position: relative;
}
.product img {
position: relative;
z-index:1;
}
.address, .desc {
display: block;
width: 252px; /* 272px */
padding: 5px 10px;
position: absolute;
top: 0;
left: 0;
z-index: 2;
background-color: rgba( 0, 0, 0, 0.5);
color: #fff;
}
.desc {
top: auto;
bottom: 0;
overflow: hidden;
}
.desc .left {
float: left;
}
.desc .right {
float: right;
}
Here's my attempt, it includes the shadow border around the image: http://jsfiddle.net/katychuang/2R3hk/
Removed tables to use div. The outer class is "item"
<div class="item">
<div class="address">
<span>804 Rolfe</span>
</div>
<img src="http://dl.dropbox.com/u/17949100/samplehouse.png">
<div class='desc'><span class='l'>2 Bedrooms</span><span class='r'>$2100</span></div>
</div>
And the CSS. It is good to specify the individual widths for .item and .item img, to get them to line up rather than using 100%
.address {
height:20px;
width:inherit;
background: rgba(0, 0, 0, 0.70);
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
z-index:500;
position:absolute;
top:0px;
left:0px;
padding-top:5px;
}
span.l{
width:50%;
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
font-size:75%;
float:left;
}
span.r{
width:50%;
font-family:Helvetica;
color:#FFFFFF;
text-align:center;
font-size:75%;
float:right;
}
.desc {
width: inherit;
background: rgba(0, 0, 0, 0.70);
height: 20px;
z-index: 500;
position: absolute;
bottom: 0px;
left: 0px;
padding-bottom: 5px;
}
.item img {width:250px}
.item {
position:relative;
width: 250px;
margin: auto;
padding: 0px;
-moz-box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* FF3.5+ */
-webkit-box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* Saf3.0+, Chrome */
box-shadow: 0px 0px 1em rgba(0, 0, 0, 0.9); /* Opera 10.5, IE 9.0 */
filter: progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#888'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=10px, OffY=10px, Color='#888')"; /* IE8 */
}
body {background-color:#EEEEEE;}
Looks like you just need some negative margins. I would place the address above the image and the description below it. Then something as simple as margin-bottom: -20px will overlap the address over the image.
I made the appropriate changes here jsFiddle