I have an image as my header and footer and it does not reach the edges on my webpage. If my browser is full screen, it looks good. But if I shrink down the webpage, then it ends up cutting off on the right side before it reaches the edges.
How can I fix this so that no matter the size of my browser, the header and footer reach from side to side 100% of the way?
I have my HTML in a container so that it doesn't change position when I resize the browser. This is the gist of how my CSS and HTML are set up...
Here is a JSFiddle that shows my problem. If you extend the window, you can see that the header/footer takes up every inch that it should. However, if not, you can see the blank space to the right:
https://jsfiddle.net/t5gb4as7/
CSS:
.container {
margin: 0 auto;
width: 1060px;
}
/* header */
h2 {
color: transparent;
background-image: url('header-footer.png');
width: 100%;
height: 102px;
margin-bottom: 20px;
}
/* footer */
h3 {
color: transparent;
background-image: url('header-footer-turn.png');
width: 100%;
height: 102px;
}
HTML:
<body>
<div class="wrapper">
<header>
<h2>test</h2>
</header>
<div class="container">
//more
//html code
//here
</div>
<div class="push"></div>
</div>
<div class="footer">
<footer>
<h3>test</h3>
</footer>
</div>
you can use percentage as width to make it responsive like this
width : 100% ;
I would set the background image on a div, instead of the h2 or h3 tags as you are at the moment. The div width should be 100% and then it will cope with desktop and mobile.
You can use CSS media queries to load in a different background image for different screen sizes if you want to.
#header {
width: 100%;
background-image: url('images/name-of-background-image.jpg');
}
<div id="header">
<h1>Your header info here.</h1>
</div>
Related
I am hoping one of you can help. I have a problem that with googling and checking the forums I have not been able to solve.
I would like to create a landing page that has a tall bg image that extends to 100% width and adjusts to the browser window + the dynamic height of the content. All the content should be below the boundary of the browser window so its just the image that can be seen when the browser first loads up and you scroll down to the content which sits over the bottom part of the extended image.
My HTML currently is:
<body>
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
</body>
And my CSS is currently:
html,
body {
height:100%;
width:100%;
}
#sectionOne {
height:100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
}
#sectionOneLanding {
height:100%;
width:100%;
}
At the moment, the image crops to 100% browser height and when you scroll down the additional content sits over a white bg instead of the remainder of the image. I believe this is due to the #sectionOne height being 100% but when I set it to higher than 100% it pushes my content further down but still on a white bg. Changing Background-Size to 100% also didn't work. It reacted the same as using cover.
Any ideas? Is there a handy CSS trick?
Apologies if this doesn't make clear sense. Ask any questions you need to as its hard to describe.
You need to use positioning for this case.
html, body {
height: 100%;
margin: 0;
}
#sectionOne {
position: relative;
height: 100%;
background-image: url(../images/cliff.jpg);
background-size: cover;
background-color: #99f;
}
#sectionOneLanding {
height:100%;
width:100%;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
You don't need width: 100%. But you need margin: 0; as there are default margins. I have added a background colour so that you can clearly see the background spanning fully leaving the content in the next page.
If you need both the image and the content to be in the same page, the you need to use Flex Box.
FlexBox Example
body, html {
height: 100%;
margin: 0;
}
#sectionOne {
display: flex;
flex-direction: column;
height: 100%;
}
#sectionOneLanding {
background-color: #99f;
flex: 1;
}
<section id="sectionOne">
<div id="sectionOneLanding"></div>
<div id="sectionOneContent">CONTENT TO SIT HERE</div>
</section>
Preview
I've been tasked with changing a website around a bit, and right now, the website has a responsive layout that is 95% of the viewports width, body-wise, so it will adjust if resized.
This is great, I want it to keep doing that, but I want the footer to have a side-to-side calm blue background, and I'm not able to come up with a way to do that for some reason.
Can anyone help?
Try this - DEMO
HTML
<div id="container">
<h1>TITLE</h1>
<section>MAIN CONTENT</section>
<footer> FOOTER </footer>
</div>
CSS
#container {
width: 95%;
margin: auto;
background: honeydew;
}
footer {
position: absolute;
width: 100%;
background: beige;
margin-left: -2.5%;
}
body contains all the other elements. You thus aren't supposed to have one larger than body inside of it.
Although you could position it absolutely to the bottom-left corner (position: absolute; bottom: 0px; left: 0px;) with a width of 100% and possibly make it work, I'd suggest you instead make a container element, perhaps a div, inside of the body element that contains your 95%-width elements and place the footer outside of that container.
I am not sure of which method is more reliable, however.
Have You tried to wrap existing 'header'component by other 'wrapper' component (div, span, etc.)? Example:
<div id="wrapper" width="100%"
<div id="header" width="95%">
some header stuff here
</div>
<!-- foo bar -->
<div id="footer" width="100%">
my footer
</div>
</div>
Lets say I have a 980px centered content area but there's a background element that expands all the way from the left of the screen to 80% of the content area. How do you accomplish this without JavaScript intervention or using a background image on the body?
EDIT:
Here's a visual concept for guidance: http://i.imgur.com/36tCm.jpg. The yellow header expands to the left of the window, outside of the content box area.
You can get the overhang effect with a div element before the 980px container and give positioning to match where the header element is
jsfiddle example or fullscreen example
in the screenshot you've got an orange overhang on the left and black on the right so here's the HTML structure (alternatively you could do the overhang with a single div and css gradients to create an orange color up to 50% then black the other 50%)
<div class="container-outer">
<div class="header-overhang header-left"></div>
<div class="header-overhang header-right"></div>
<div class="container">
<div class="sidebar">
sidebar area
</div>
<div class="header">
PAGE HEADER
</div>
<div class="content">
content text
</div>
</div>
</div>
CSS:
.container-outer {background-color:#BDC7D2;border-top:60px solid #050912;}
.header-overhang {height:72px;width:50%;position:absolute;top:60px;}
.header-left {left:0;background-color:#FDC103;}
.header-right {right:0;background-color:#050912;}
.container {width:980px;margin:0 auto;position:relative;}
.sidebar {float:right;width:20%;height:220px;line-height:220px;text-align:center;border-top:5px solid #d7e0e9;border-bottom:3px solid #d7e0e9;background-color:#fff;}
.header {height:72px;line-height:72px;padding-left:40px;width:80%;background-color:#FDC103;}
.content {padding:50px 40px 120px 120px;background:#050912;color:#fff;}
You Handle this issue by css
#inner{
background:#fff;
width:80%;
position:absolute;
left:0;
top:0;
}
And you should set for its parents this style
#parent{
position:relative;
}
For example :
<div id="parent">
<div id="inner"></div>
</div>
You could accomplish this with a bit of visual trickery--namely, by using two yellow divs to create the visual effect of the #pageheader element.
Here's a JSFiddle illustrating the effect.
Here's some sample HTML:
<body>
<div id="yellowBar">
<div id="content">
<div id="pageHeader">
<!--the rest of your HTML...-->
Then, your CSS:
#yellowBar {
height: (set appropriate height here);
background: yellow (set appropriate hex code here);
position: absolute;
top: (set appropriate top value so the #yellowBar nudges up against the #pageHeader visually);
width: 50%;
left: 0px;
}
#pageHeader {
height: (same height as #yellowBar);
background: (same color as yellowBar);
width: 80%;
/*any other CSS rules*/
}
The web page layout of my website look something as follows:
The web page layout of my website look something as follows:
<body>
<div class="container">
<div class="sidebar">
</div>
<div class="content">
</div>
</div>
<div class="pre-footer">
</div>
<div class="footer">
</div>
</body>
Css:
body {background:#eaeaea url('../images/bg/sfere.jpg') no-repeat top center fixed;}
.footer {float:left;width:100%;height:67px;background:url('../images/bottom.png') bottom center;bottom:0px;left:0px;}
.container{padding-top:5px;margin-left:100px;margin-right:auto;}
.sidebar {float:left;width:220px;min-height:610px;text-align:center;}
.home {margin:178px 0 0 100px;padding:0 10px 0px 10px;width:800px;float:left;}
.pre-footer {float:left;width:98%;height:100px;position:relative;background:url('../images/pre-footer.png') bottom center;left:15px;bottom:-32px;}
All the elements are appearing fine in layout. However, the problem is when the height of the container is less, the footer elements stick below the container and don't stay in the footer position. Similarly, if I manually fix the height as 600px to make it look like a footer, on browser resize, the footer still stick below the container and doesn't look like a footer.
How do I rectify this problem?
Use fixed position for your footer.
div.footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
max-height: 50px; /* change this as needed */
}
and specify a bottom padding to your body to ensure all content is visible when scrolled.
body {
padding-bottom: 50px; /* change this to the max-height given for your footer */
}
I have the following HTML to build a 900 pixel wide, centered page, with a header, footer and content section:
<body>
<div id="mainMaster">
<div id="main">
<form runat="server">
<div id="header">
</div>
<div id="content">
</div>
</form>
</div>
</div>
<div id="footer">
</div>
</body>
The layout is styled with the following (approx) CSS:
html, body
{
height: 100%;
}
#mainMaster
{
min-height: 100%;
background: url(../Images/Background.png);
}
#main
{
width: 930px;
margin: 0 auto;
height:auto !important; /* real browsers */
height:100%; /* IE6: treaded as min-height*/
min-height:100%; /* real browsers */
}
#header
{
}
#footer
{
background-image:none;
background-color:White;
position: relative;
margin-top: -80px; /* negative value of footer height */
margin-left: auto;
margin-right: auto;
width: 930px;
height: 80px;
clear: both;
}
#content
{
position:relative;
overflow:hidden;
height:100%;
background-image:none;
background-color:White;
}
The CSS was originally based on a layout I found on the internet for 'sticky footers'. It worked perfectly with a sticky footer, but then I came across these problems:
1) The 'content' is never stretched to full size. This is a big problem on some of my pages because internal controls are set to a height of 100%. Since content isn't stretched, the controls show up all squeeshed.
2) I just added a background image and colour. This background should not show up in the middle content panes. Because the 'content' isn't fully stretched I get the background image showing in the wrong places.
I prefer a CSS only fix for this (ie. no hacks or JS). Any help?
I would expect removing the #mainMaster <div> and moving its background image into #main's CSS would sort your problem out:
<body>
<div id="main">
<form runat="server">
<div id="header"></div>
<div id="content"></div>
</form>
</div>
<div id="footer"></div>
</body>
The problem you're running into is that #main's parent (#mainMaster) doesn't have an explicit height declared. Percentage heights only work properly when the elements parent has a height defined.
Try using min-height CSS property to set a minimum height for your content.
Adding a specific background color to #content and #header should prevent the background image from displaying in those areas. Not sure why the content isn't filling up the area, when you say "stretched" do you mean to a height of 100%? Browsers won't recognize a height of 100% without using js.