I have a relativly simple HTML layout where I have a heading div, then below that is a Main div that contains a NavBar on the left side & a ContentDiv on the right side.
My problem is that I cannot get my NavBar & ContentDiv to be displayed in the centre (horizontally) they always sit to the left (so NavBars x position is zero).
Do you know why they(the NavBar & ContentDiv) sit to the left & not centred?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { display: inline; }
#navBar { height: 700px; }
#content { height: 700px; }
/* The above code displays the navbar above the content div but both
elements are centred
*/
/* The below code gets the navbar to be displayed to the left of the
content div which is what I want but now the 2 elements are not centred
they are on the left of the screen
How do I get them centred?
*/
#navBar { float: left; height: 700px; }
#content { float: left; height: 700px; }
-->
</style>
</head>
<body>
<div id="heading">
abc
</div>
<div id="main">
<div id="navBar">
<!-- This is the background image for this element, I know, I know I shd use CSS but it doesn't resize the images that way -->
<img src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
<!-- This is the background image for this element -->
<img src="images/contentBackground.png" alt="" width="800px" height="700px"/>
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="javascript:getScreenSize()['width']+px" height="1000px"/>
</body>
</html>
Try this:
#navBar { display: inline; height: 700px; }
#content { display: inline; height: 700px; }
#main { margin: 0 auto; }
EDIT:
Updated code. I'm not sure if it's what you're looking for or not.
the last two css statements say float: left. thats why they're on the left =)
edit:
ah okay.... do i see that right: you want the nav left of the content, but both together should be centered?
Related
Here is my problem:
I have image in one div that is centered into that div.
I want that that image go in header after user scroll once (scroll>50).
Here is my codepen example.
HTML:
<header> <div id="nav"> LINK LINK LINK </div> </header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
CSS:
*{
padding:0;
margin:0;
overflow-x:hidden;
}
#nav{float:right; line-height:70px;}
header{
width:100%;
position:fixed;
padding-left:10%;
padding-right:10%;
background:#fff;
height:70px;
}
#main{
padding-top:100px;
text-align:center;
height:800px;
background:#3cb5f9;}
#main img{width:200px; margin:0 auto;}
There are a ton of ways to do this, but a quick way to achieve this is to duplicated the image so there is a copy of it in the main and the header. On load, have it hidden within the nav. Then, have a scroll event listener that watches for an offset of >50.
If true, => hide main image, and show nav image
If false => show main image. and hide nav image.
Also worth noting I updated the height of main to be 200vh — just to simulate content. This is not related to the answer.
$(function(){
$(window).bind('scroll', function(){
if($(window).scrollTop() >= 50){
$("#main img").hide();
$("header img").show();
}else{
$("#main img").show();
$("header img").hide();
}
});
});
* {
padding: 0;
margin: 0;
overflow-x: hidden;
}
#nav {
float: right;
line-height: 70px;
}
header {
width: 100%;
position: fixed;
padding-left: 10%;
padding-right: 10%;
background: #fff;
height: 70px;
}
header img {
display: none;
width: 50px;
margin: 0 auto;
}
#main {
padding-top: 100px;
text-align: center;
height: 200vh;
background: #3cb5f9;
}
#main img {
width: 200px;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<header>
<div id="nav"> LINK LINK LINK </div>
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</header>
<div id="main">
<img src="https://img.clipartfest.com/3c73a51504b9b1ee6d200d1e60725b79_triangle-quilatral-triangle-shape-clipart-no-background_2400-2080.png">
</div>
</body>
</html>
External Plunker: http://plnkr.co/edit/yS5MdtCeTNJvvn7w5gvl?p=preview
I have an img element that I am using as the background of a navbar, I then will display the navigation links over the top of the img element. My problem as you will see in the images below is that the ul that holds the links get displayed to the right of the nav bar & not over it. Why does it do this & how can I get my links to be over the top of the img?
This is how it looks now: look at the white writting
This is how it should look
My code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/homepage.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Kamalei - Home Page</title>
<style type="text/css">
<!--
html, body, div, form, fieldset, legend, label, img { margin: 0; padding: 0; } table { border-collapse: collapse; border-spacing: 0; } th, td { text-align: left; } h1, h2, h3, h4, h5, h6, th, td, caption { font-weight:normal; } img { border: 0; }
body { text-align: center; min-width: 1200px; }
#backgroundImg { z-index: -1; position: absolute; left: 0px; top: 0px; }
#heading { height: 300px; }
#main { margin: 0 auto; }
#navBar { display: inline; height: 700px; width: 200px; z-index: 1; position: relative; } /* I am pretty sure the cause is because I use "inline" but I need it to position the navbar correctly to the left */
#content { display: inline; height: 700px; width: 800px; padding: 20px; padding-left: 30px; }
#navBarImg { position: relative; z-index: 0; padding-right: -5px; margin-right: -5px; } /* Remove gap between navbar & content divs */
#contentImg { }
#navbar ul li { padding: 0; margin: 0; }
#navLinks { color: white; top: 0; left: 0; position: absolute; }
-->
</style>
</head>
<body>
<div id="heading">
abc
</div>
<div id="main">
<div id="navBar">
<!-- Error occurs here: the unordered list is displayed to the right of the nav bar instead
of where it should be which is inside the navbar -->
<ul>
<li id="navLinks">abcdef</li>
</ul>
<img id="navBarImg" src="images/navBackground.png" alt="" width="200px" height="700px"/>
</div>
<div id="content">
<img id="contentImg" src="images/contentBackground.png" alt="" width="800px" height="700px"/>
</div>
</div>
<!-- Must keep the background image at the bottom of body -->
<img id="backgroundImg" src="images/background.png" alt="" width="100%" height="1100px"/>
<script type="text/javascript">
<!--
window.onresize = setBackgroundImgWidth;
-->
</script>
</body>
</html>
you need to make the navbar background a background image to the div rather than an image that's part of the html. This is the cleanest way to display the image underneath the text. You can set a height and width in the css to the div to ensure the entire image appears as well.
I should start by saying I have researched this question. I can't find any identical questions or ones which do what I'm after.
I'd like to be able to put some content at the bottom left of the page, and then have a div above that which automatically stretches itself to use all the space between the top of the page and the content at the bottom left, even when the user resizes the window.
Please see the image below.
I position the bottom-left content with position: absolute; bottom: 10px;, which works. So then I would ideally have the div above it automatically stretch to fill the big gap (i.e.):
[stretchy_div_height] = [100%] - [height_of_bottom_div] - [bottom_div_margin].
Ideally I would like to do this without JavaScript if possible. But either way is fine. I can't use faux columns for the height-stretching div (I need real content all the way down).
Thank you!
Here is an image of what I'm aiming to achieve:
See: http://jsfiddle.net/zSeLS/
CSS:
html, body {
margin: 0;
padding: 0
}
#left {
position: absolute;
left: 10px;
top: 10px;
bottom: 60px;
width: 120px;
background: #ccc
}
#leftButton {
position: absolute;
left: 10px;
bottom: 10px;
height: 40px;
width: 120px;
background: #f0f
}
#content {
margin: 10px 10px 10px 140px;
background: #999
}
HTML:
<div id="left"></div>
<div id="leftButton"></div>
<div id="content">
some content<br />
..
</div>
thirtydot's solution is good, but sometimes I find absolute positioning of the containing elements to be a little too inflexible, e.g. if you want to center your layout. You can still make it work that way, but as an alternative, you can float the relevant elements.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
html {
height:100%;
}
body {
height:99%;
width:800px;
margin:0 auto;
padding:0;
}
#left-top {
position:relative;
float:left;
width:200px;
height:100%;
background:#ffcccc;
}
#left-bottom {
position:absolute;
bottom:0;
width:200px;
height:20px;
background:#ccffcc;
}
#right {
float:left;
width:600px;
background:#ccccff;
}
</style>
</head>
<body>
<div id='left-top'>
<p>Left</p>
<div id='left-bottom'>Bottom</div>
</div>
<div id='right'>
<p>Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content Arbitrary content</p>
</div>
</body>
</html>
You have to create a div which will include both the div for the left column and its footer..
like
<div id="content">
<div id="left">
<div id="columnleft></div>
<div id="footerleft"></div>
<div>
<div id="right"></div>
<div>
did you try it already?
I am trying to have a white round rectangle as the background in part of my website. I have attempted this with CSS, but I cannot get the round rectangle to stretch or shrink to the size of the div.
My other attempt is below using an img element. I can now get my image to stretch dynamically according to how much text is in the div BUT now I cannot place any text over it.
Do you know how I can get text to appear over my background in column 2?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
<!--
body { background-color: red; }
.col1 { width: 20%; float: left; background-color: blue; }
.col2 { width: 60%; float: left; }
.col3 { width: 20%; float: left; background-color: yellow; }
#content { z-index: 10; }
#bk { z-index: 0; top: 0px; left: 0px; }
-->
</style>
</head>
<body>
<div class="col1">
abvdvf
</div>
<div class="col2">
<div id="content">
kjfdjkf
</div>
<img id="bk" src="i.png" width="100%" height="100%" /> <!-- Correctly resizes my picture but now I cant place any text over the pic -->
</div>
<div class="col3">
abvdvf
</div>
</body>
</html>
Try this as your #content CSS:
#content {
background: white;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
height: 100%;
padding: 15px 0;
width: 100%;
}
The technique is using a CSS3 rule called border-radius. You should look into it. Also, you don't normally need to set z-index.
The usual technique is to have four images for each of the rounded corners, and use CSS to place these on the edges of the box (you may need extra dummy divs to make this work.) Having the browser stretch an img is ugly, to say the least.
I've browsed to all question related to "sticky footer" and nothing helped me because my #content div does not always have sufficient content to push the footer to the bottom. Here is the code I've used to achieve this, but apparently I did something wrong:
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
margin-top: -45px;
padding-top:15px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
}
<div id="container">
<div id="index_body">
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
Some of my attempts work when index body has loads of text images only then the footer goes to the end but when it doesn't have much content let say 2 paragraph tags and an image the footer doesn't stick. Maybe this is not possible with just CSS, because the index_footer height is not fixed? Is there a way to do this with JavaScript? Or what is the right way to do this?
My screen resolution is really big maybe that is the problem its 1680 x 1050
Try moving your footer div outside of the container div. Your technique should then work. The way you have it set at the moment the footer is within the containing div, but positioned relatively. So even though the containing div may have 100% height, the footer div within it is still only to go just below the content in the container.
A quick example of what I mean, (note that an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: relative;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</body>
</html>
If you can't move the footer outside of the container (for whatever reason), then you could also try positioning the footer absolutely within the containing div to be at the bottom. position: absolute; bottom: 0px; etc
For example, (again, an extra div with some padding-bottom is required in order to make sure the footer does not overlap the contents),
<html>
<head>
<title>Sticky Footer Test 2</title>
<style>
html, body {
height: 100%;
padding: 0px;
margin: 0px;
}
* {
margin: 0px;
}
#container {
position: relative;
min-height: 100%;
height: auto !important;
height/**/: 100%; /* for IE6 */
background: #ddd;
}
#footer {
position: absolute;
bottom: 0px;
width: 100%;
background: #555;
margin-top: -100px;
height: 100px;
}
#content {
padding-bottom: 100px;
}
</style>
</head>
<body>
<div id="container">
<div id="content">
<p>Hello! I'm some content!</p>
</div>
<div id="footer">
<p>Hello! I'm a footer!</p>
</div>
</div>
</body>
</html>
I know this doesn't answer your exact question, but the work done by Ryan Fait has worked very well for me across multiple browsers. You might want to give this a try (or take a look at what he did compared to what you are doing and see if you can determine a fix).
I believe the root of the problem is that the footer element in the HTML needs to be outside of the #container div. Also, I noticed after I removed that, issues with margin and padding on the body tag. Finally, the border-top on the .footer makes the height of the footer 46px, not 45px...
The corrected CSS:
/* FOOTER FIX */
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body { padding-bottom: 30px; }
body{margin:0;padding:0;}
#container{ margin-bottom: -46px; }
.footer {
clear: both;
position: relative;
z-index: 10;
height: 30px;
padding-top:15px;
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
The corrected HTML:
<html>
<body>
<div id="container">
<div id="index_body">
</div><!--end index_body -->
</div><!--end container -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</body>
</html>
It's actually easy, here's the minimum required template:
<!doctype html>
<html lang="en">
<head>
<title>SO question 1980857</title>
<style>
html, body {
margin: 0;
height: 100%;
}
#container {
position: relative;
min-height: 100%;
}
* html #container {
height: 100%; /* This is min-height for IE6. */
}
#footer {
position: absolute;
bottom: 0;
}
#footer, #pushfooter {
height: 50px; /* Both must have the same height. */
}
</style>
</head>
<body>
<div id="container">
<div id="content">Content</div>
<div id="pushfooter"></div>
<div id="footer">Footer</div>
</div>
</body>
</html>
Making the container relative and giving it a min-height will actually stick the footer to its bottom all the time regardless of the content's actual height, which was your major concern as understood from comments.
Going off Harmen, i have tested this and it works, with the footer in the container. altho it is a little hackish
CSS
html, body, div#container { height: 100%; }
body > div#container { height: auto; min-height: 100%; }
div#index_body {
min-height: 100%;
margin-bottom: -46px;
}
.footer, .push {
height: 30px;
}
.footer {
clear: both;
position: relative;
z-index: 10;
margin: 0px;
}
.footer {
color: #666;
background-color:#F4F7FA;
border-top:1px solid #E6E7E8;
font-size:95%;
text-align: center;
} /* END FIX */
html
<body>
<div id="container">
<div id="index_body">
<div class="push"></div><!--Used to force the footer down to avoid overlap of footer and text -->
</div><!--end index_body -->
<div id="index_footer" class="footer">
</div><!--end footer -->
</div><!--end container -->
</body>
In order to realize a sticky footer, that is a footer placed in a fixed position at the bottom of the webpage that doesn't move when your scroll the page you can use this css code:
#footer{
position:fixed;
clear:both;
}
position:fixed makes the footer sticky anyway there could be floating problems if you used float:left or float:right in your code before, so using also clear:both it clears the floating and ensures that the footer is at the bottom under other divs and not on the left or right of the precedent div.
This will work, no matter what the height of the #container is:
CSS:
html, body {
height: 100%;
}
#container {
min-height: 100%;
height: auto !important;
height: 100%;
margin-bottom: -50px;
position: relative;
}
#index_footer {
height: 50px;
line-height: 50px;
position: relative;
background: #CCC;
}
#push {
height: 50px;
}
HTML:
<div id="container">
<div id="index_body">
test
</div>
<div id="push"> </div>
</div>
<div id="index_footer" class="footer">
test
</div>