I'm trying to have a clickable image centered in a footer area. I've tested on Chrome and Firefox and the entire footer is clickable. Chrome inspector shows the element as 0 pixels tall and 0 pixels wide. What am I doing wrong?
PS: I'm using Twitter Bootstrap
Here's the CSS:
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin-left: auto;
margin-right: auto;
width: 73px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
Here's the HTML:
<div id="footer">
<img id="footerLogo" src="/images/footer.gif">
</div>
Add to #footer a text-align: center to mark centering of elements within it, and margin: 0 auto to the #footerLogo and remove the display:block - since the block sets the <a> tag to box and occupies the whole parent container.
http://jsfiddle.net/T4PSS/
<div id="footer">
<img id="footerLogo" src="/images/footer.gif" />
</div>
notice how I closed the img element />
The problem with the whole footer clickable is the display: block , also take out the margins for the img
#footerLogo {
display:block; //this line - take it out
width: 73px;
}
if you want to center it , then center <a>
#footer a {
position: relative;
margin: auto;
width: 74px; //this may be necessary for IE7
}
this is because you are using
margin-left:auto;
margin-right: auto;
without a specified width, apply id="footerLogo" to the <a> instead:
<style>
body {
margin:0;
padding-top: 0px;
margin-bottom: 20px;
}
#footerLogo {
display:block;
margin:0 auto;
width: 200px;
}
#footer {
position: fixed;
bottom: 0px;
width: 100%;
padding-top: 5px;
padding-bottom: 5px;
background-color:red;
}
</style>
HTML:
<div id="footer">
<a id="footerLogo" href="#"><img src="/images/footer.gif" /></a>
</div>
Related
I am very new to web design, so I might be completely over my head here.. but I can not seem to figure out how to work this. I have an image inside my first div, underneath this I want to have to more divs with the background colors in which I will add content. But for some reason my divs are not adjusting with the browser. Everytime I adjust the browser to be smaller, the divs backgrounds are separating and a white space is coming in between them.
Any help would be highly appreciated.. Also any critical feedback on my obvious coding skills, would be highly appreciated.
<!DOCTYPE html>
<html>
<head> <link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
<div class="container">
<div class= "header">
<div class="large-logo-wrap">
<img src="Assets/Giadaslogoindexwhitebig.png" draggable="false"></img>
</div>
<div class="middle">
</div>
<div class="end">
</div>
</body>
</html>
CSS
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-size: 100%;
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
width: 100%;
height: 100%;
max-width: 700px;
}
.middle{
position: absolute;
top: 768px;
background-color: rgb(229,225,209);
width: 100%;
height:100%;
background-size: 100%;
overflow-y: auto;
}
.end{
position: absolute;
top: 1500px;
background-color: rgb(29,25,29);
width: 100%;
height:768px;
background-size: 100%;
}
be nice. Cheers!
I suggest you take a closer look at the code and strip out as much as you can to see what is actually necessary to get where you are going. Here is a fiddle with some cleaned up code that does what I think you are going for. Hopefully it helps.
HTML
<header class="container global-header">
<div class="inner-w">
<div class="large-logo-wrap">
<img src="http://placehold.it/400x300" />
</div>
</div>
</header>
<section class="container section01">
<div class="inner-w">
Middle - arbitrary set height - I suggest you let the content decide the height
</div>
</section>
<section class="container section02">
<div class="inner-w">
Other section - arbitrary set height
</div>
</section>
CSS
*, *:before, *:after { /* get your box model so that padding and margins go inside the box instead of outside, and add to the overall size of the box */
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.container { /* things the sections have in common */
width: 100%;
float: left;
}
.inner-w {
max-width: 700px;
margin-right: auto;
margin-left: auto;
padding: 1em;
border: 1px solid rgba(0,0,0,.05); /* just so you can see */
/* by using an inner div in your container... you allow yourself to maintain a background-color across the whole page if you wish. If you don't want that, then you just style the inner div for each section with the background color */
}
.global-header {
background-color: lightblue;
text-align: center; /* centers inline, and inline-block elements (logo) */
}
.large-logo-wrap {
display: inline-block;
max-width: 8em; /* set max image size */
}
.large-logo-wrap img { /* responsive image */
display: block;
width: 100%; /* fits whatever you set the wrapper to */
height: auto;
}
.section01 { /* arbitray section */
background-color: rgb(229,225,209);
color: rgb(0,0,0);
min-height: 234px; /* if you absolutly must - choose a height... use min */
}
.section02 { /* arbitray section */
background-color: rgb(29,25,29);
color: rgb(229,225,209);
min-height: 346px; /* if you absolutly must - choose a height... use min */
}
Please change your css with this one:
body{
margin: 0px;
padding: 0px;
overflow: hidden;
}
.container{
width:100%;
margin: 0px;
padding: 0px;
}
.header{
width:100%;
height:768px;
background-image: url('Assets/header.jpg');
background-repeat: no-repeat;
margin: 0px;
padding: 0px;
}
.large-logo-wrap {
margin-left: auto;
margin-right: auto;
max-width: 700px;
}
.middle{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(229,225,209);
}
.end{
margin-left: auto;
margin-right: auto;
max-width: 700px;
background-color: rgb(29,25,29);
}
Some of your css styles were wrong, for example you used width and height with %100 which is wrong and effects on all of your css styles.
Also, you used position:absolute for all of div which effects on div to be nonadjustable.
My HTML structure is basically this -
<div id="header">
<div class="container">
</div>
</div>
<div id="content">
<div class="container">
</div>
</div>
<div id="footer">
<div class="container">
</div>
</div>
Ignore any elements except <div id="header">
I want to align <div class="container"> inside <div id="header"> at exactly bottom center. I'm using the following CSS code-
#header{ width:1062px; height:326px; background-color:#110000; text-align:center; position:relative; }
#header .container{ width:940px; height:262px; background-color:#220000; margin:0px auto; position:absolute; bottom:0px; }
There are height differences between the parent (#header) and child (#header .container) DIVs. Removing position:absolute; from the child centers it but it sticks to the parent's top instead of bottom. Keeping position:absolute; sticks it at the bottom but aligns it to the left.
How do I align it both center AND bottom at the same time?
I tried all the solution above but it didn't work when you resize the browser window. This solution is mostly to be applied when you don't know the element's width. Or if the width is changed on resize.
After making some research I tried the following and it worked perfectly on all screen sizes.
#somelement {
position: absolute;
left: 50%;
bottom: 0px;
-webkit-transform: translateX(-50%);
transform: translateX(-50%)
}
I shared this for anyone still facing this issue.
try in this way:
#header .container{
width: 940px;
height: 262px;
background-color: #220000;
position: absolute;
bottom: 0 ;
left: 50%;
margin-left: -470px;
}
try this
#header .container {
width: 940px;
height: 262px;
background-color: #220000;
margin: 0px auto;
position: absolute;
bottom: 0px;
left: 61px;
}
use this:
#header{
width:1062px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:64px;
}
#header .container{
width:940px;
height:262px;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here the jsfiddle
UPDATE:
As DenisVuyka said in comment, i should add that the above sample was as answer to this particular question with fixed height for DIV.
If you want that height of DIV don't break up things then for example you should use padding-top:10%; in the #header and height:100% in #header .container CSS.
#header{
width:462px; height:262px; background-color:#110000; text-align:center;
position:relative;text-align: center; vertical-align: bottom;padding-top:10%;
}
#header .container{
width:300px;
height:100%;
background-color:#999000;
margin:0px auto;
bottom:0px;
margin-bottom: 0px;
padding-top: 0px;
}
Here is a demo: http://jsfiddle.net/d6ct6/ .
I was trying to get this to work in my project as well. I've edited this jsfiddle:
http://jsfiddle.net/d6ct6/
<div id="header">
<div class="container">
</div>
</div>
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#header .container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
left:calc((100% - 300px)/2);
}
But I've found this only works when the width of .container is fixed.
If the width of .container is not fixed you would need javascript to find it's width and then change that width in the calc.
When the widths are responsive, use this:
HTML
<div id="header">
<div id="container">
</div>
</div>
CSS
#header {
height:100vh;
background-color:#110000;
position:relative;
}
#container{
width:300px;
height:40px;
background-color:#999000;
bottom:0px;
position:absolute;
}
JS
$(document).ready(function () {
var parentWidth = $('#header').width();
var trapWidth = $('#container').width();
var deadCenter = (parentWidth - trapWidth);
var deadHalf = Number( deadCenter / 2 );
$('#container').css("right", deadHalf);
});
In case you care more about having the inside div aligned in the center and can manually set the vertical alignment.
DEMO Height I used was first div height - second div height.
#header .container{ width:940px; height:262px; background-color:red; margin:0 auto; position:relative; top: 64px; }
I would take advantage of CSS table display properties and do the following:
#header {
width:1062px;
height:326px;
background-color:#110000;
text-align:center;
display: table-cell;
vertical-align: bottom;
}
#header .container {
width:900px;
height:262px;
background-color:#cccccc;
color: white;
display: inline-block;
}
Set the #header block to display: table-cell and set vertical-align: bottom to align the child's bottom edge to the bottom edge of the parent.
The child .container element had display: inline-block and this will allow it to respond the text-align: center property of the parent.
This will work regardless of the width of the child .container.
Demo fiddle: http://jsfiddle.net/audetwebdesign/p9CxE/
This same problem was bedevilling me for an hour or so, until I realised I could add an intermediary div; this separated the vertical alignment issue from the centering.
.dparent {
border: 1px solid red;
width: 300px;
height: 300px;
position: absolute;
}
.dchild {
border: 1px solid blue;
margin-left: auto;
margin-right: auto;
width: 200px;
height: 100px;
bottom: 0px;
position: relative;
}
.dmid {
border: 1px solid green;
width: 100%;
position: absolute;
bottom: 0;
<div class="dparent">
<div class="dmid">
<div class="dchild"></div>
</div>
</div>
Do the vertical alignment first, with an absolute position and the 0 bottom. Then do the centering with margin-left and margin-right set to auto.
You might try this solution for any concerned width:
width:100%;
position:absolute;
bottom: 5px;
left:50%;
margin-left:-50%;
Good luck!
I am a novice in web developing. My container div is set to margin: 0 auto; position: relative; and it is displayed in the middle of the screen. I have a banner div within the container which has some background color which I want to extend the whole width of the screen. I decided to use another div outside the containerdiv with same background color and height of my banner div and named it header. But how can I put them one over another, more precisely, the container div over the header div?
EDIT:
Some of the html:
<body>
<div id="header"></div>
<div id="container">
<div id="banner">
<img src="images/banner.gif" width="450" height="80" alt="parul library" />
</div>
</div>
</body>
The CSS:
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
background: rgb(222,239,255); /* Old browsers */
}
Try using this CSS for the header div:
.header {
background: #bada55;
height: 90px;
width: 100%;
position: absolute;
}
And make sure container has position: relative; in its style definition.
Here's a working demo:
http://jsfiddle.net/rkJMJ/
Update for the HTML and CSS posted in the question:
(Added width: 100; to the #header style def)
#container{
position:relative;
top:0;
width: 968px;
background:#FFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
}
#header {
position:absolute;
top:0;
height: 80px;
width: 100%;
background: rgb(222,239,255); /* Old browsers */
}
I'm trying to put two divs without a linebreak between them.
this is the html:
<div id="header">
<div id="logo"></div>
<div id="left">
<div id="slideshow"></div>
</div>
</div>
and this is the CSS:
#header {
background-color: #13768a;
width: 962px;
height: 207px;
margin-right: auto;
margin-left: auto;
clear: both;
}
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
}
#left {
width:712px;
height: 207px;
}
#slideshow {
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
the problem is that I want it to look like this:
How I want it to look like
But it looks like this:
How it looks like
This is controlled by the display style property. Normally, div elements use display: block. You can use display: inline or display: inline-block instead if you want them on the same horizontal line.
Example using inline-block (live copy | source):
CSS:
.ib {
display: inline-block;
border: 1px solid #ccc;
}
HTML:
<div class="ib">Div #1</div>
<div class="ib">Div #2</div>
Introduce a float CSS property. Change CSS as below, for #logo and #left.
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;
}
#left {
width:712px;
height: 207px;
float:left;
}
From the MDN Documentation,
The float CSS property specifies that an element should be taken from
the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
Div elements normally use display:block which forces a line break before and after the element.If you want to remove the line breaks , you can use display:inline which will display elements horizontally.Make the div's display property to display:inline or display:inline-block you want to appear horizontally .
Try this way:
#logo {
background-image:url('logo.png');
height: 207px;
width: 250px;
margin-right: 0px;
padding: 0px;
float:right;}
#left {
position:relative;
width:712px;
height: 207px;
}
#slideshow {
position:absolute;
top:20px;
left:20px;
background-color: #137387;
width: 686px;
height: 144px;
margin-right: auto;
margin-left: auto;
}
Basically I put a float:right; on the logo to position it right, then added position:relative to the #left div and position:absolute to the #slideshow div. This way you can adjust the top and left attributes to position the slideshow anywhere you want it.
display:inline is the css style that you need to use.
I'm trying to get my page to occupy 100% of the screen, with a footer, which needs to always be on the bottom of the page.
The div's should expand when the page resizes, with the right background color.
The bugs I have at the moment are :
- Footer stays at bottom of the screen not of the page.
- div (menu) is bigger than the div (content)
- the div doesn't resize properly
Here's my code:
Div stucture
<div id="container"><br />
<div id="header">CMS</div>
<div id="menu"><?php include ('includes/menu.php');?></div>
<div id="content">
<?php include $include_page?>
</div>
<div id="footer">CMS</div>
</div>
CSS
body {
height: 100%;
color: #0b0b0b;
background-color: #696060;
margin: 0px;
padding: 0px;
font-family: Tahoma, sans-serif;
font-size: 12.5px;
}
#container {
margin-left: auto;
margin-right: auto;
width: 1000px;
background-color: #f1f1f1;
border-left: 1px solid #8f8f8f;
border-right: 1px solid #8f8f8f;
height: 100%;
}
#header {
height: 100px;
width: 100%;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
}
#menu {
width: 210px;
background-color: #e0e0e0;
float: left;
padding: 10px 10px 10px 10px;
height: 100%;
}
#content {
width: 750px;
height: 100%;
float: left;
padding: 10px 10px 10px 10px;
}
#footer {
position: absolute;
bottom: 0;
width: 1000px;
height: 20px;
background-color: #a31f00;
color: #fcfcfc;
text-align: center;
font-size: 11px;
}
You might be thinking about a sticky footer. A sticky footer sticks to the bottom of the page when there isn't enough content to push it down, but when the content starts overflowing the page, it goes along with it.
To make one, you basically want to wrap everything which is not the footer within a <div> tag, like so:
<div id="wrap">
<div id="header">
...
</div>
<div id="main">
<!-- All you page content goes here -->
</div>
</div>
<div id="footer">
I am a footer.
</div>
Now, for the magic CSS:
html, body
{
height: 100%;
}
#wrap
{
min-height: 100%;
}
#main
{
overflow: auto;
padding-bottom: 150px; /* must be same height as the footer */
}
#footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear: both;
}
/* Opera Fix */
body:before
{
content: "";
height: 100%;
float: left;
width: 0;
margin-top: -32767px;/
}
And on your HTML page you will need this conditional style for IE6 and earlier and for IE8 (!IE7 means not 7, but all others):
<head>
...
<!--[if !IE 7]>
<style type="text/css">
#wrap
{
display: table;
height: 100%;
}
</style>
<![endif]-->
...
</head>
I'd try putting the content div inside the menu div. That way the menu is always the height of it's content, while content div can push the menu - and it's content down where applicable. Remove the height 100%.
Why pos:abs on the footer? Have you tried relative?
You may want to read this for aligning your footer at the bottom of the screen, regardless of content above; http://www.zymic.com/tutorials/html/effective-footers/