Currently I have:
body
{
background-image:url('images/background');
background-color:#000;
background-position:center;
background-repeat:repeat-y;
padding-right: 75px;
padding-left: 75px;
}
How can I get the background to act more like this:
body
{
background-image:url('images/background');
background-color:#000;
background-position:center;
background-repeat:repeat-y;
}
while still having padding for things within the body other than the background?
Basically, I want the background to not be effected by the padding settings, unlike the text, images, etc set within the body.
Rearrange things a little, so you have a new top-level container within your body, so that...
<body ...background goes here ...>
<div id="therealbody" ... padding goes here ...> ... content here ... </div>
</body>
Use Box-sizing property to take care of the padding as well as margins
Related
I would want to insert a button within an image using CSS; the image has a fixed width and height, centered in the page.
The button must remain stationary within the image at different resolution.
CSS doesn't allow other elements inside an <img> tag. My common go-to in this situation is put both your image and button inside two wrapper <div> elements that act like a table (vertically and horizontally centered). Like so;
HTML
<div class="wrapper">
<div>
<img src="[your image src]">
<a class="button" href="[go to page]">Button</a>
</div>
</div>
CSS
.wrapper{
display: table;
width: 100%; /* Add or remove this depending on your layout */
}
.wrapper > div{
display: table-cell;
vertical-align: middle;
text-align: center;
}
As long as the image has no size constraints this should sit flush in the center of the image :). Enjoy!
EDIT ---
Alternatively, remove the <img> tag and put it as a background-image of .wrapper and use background-size: cover; to center it :). Then you can control the height and width of the image really easily.
Remember to use vendor prefixes too. I have a handy list of them here although they are in Sass.
in your CSS:
myImage {
background-image:url('image.jpg');
background-size:cover;
}
be sure to give your button an ID
in your HTML
<button id='myImage' type='submit'> </button>
To put the button in the position where you want it, simply give it some margins:
.wrapper button {
margin-left:81%; margin-top:3%;
}
But I believe you want the div with the background image to never be larger than the window, right? In that case, you will need some more CSS: set a max-width and a max-height on the div, and then you will also need to set both html and body to a fixed width and height, otherwise max-width and max-height won't know what they ought to be relative to.
So, that's
html, body {width:100%; height:100%; margin:0; padding:0;}
.wrapper {
(..)
margin:0 auto;
max-width:100%; max-height:100%;
}
See updated fiddle.
I'm making a website with the title in a div box at the top of the page. The issue is that when i put a heading in the box it doesn't stay in the box
<div style="width:1000px;height:40px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
When you create a HTML file, each browser interpret the elements on its way. For example: some browsers have an extra margin config at an <p> or some different line-height property. Because of that, normally, the developers use a Reset CSS (example: http://meyerweb.com/eric/tools/css/reset/). It reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
In your case, h1 by default have some configs that make it go out of the div box (margin and padding, as I checked). You can solve it using: margin: 0; padding: 0; at <h1> element. My suggestion for future projects: use a Reset CSS and you'll have more control in things like that.
Another suggestion: use a CSS file to organize your own styles. Inline styling isn't a good thing when you've a common thing to modify and have to go file by file to do that. With CSS you only change the file and it reflects at all HTML that uses it.
Well, my CSS fix suggestion is:
HTML:
<div>
<h1>Welcome to a Website </h1>
</div>
CSS:
div {
/* Make title go to entire screen*/
width: 100%;
display: block;
/* You visual config */
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin: 0;
padding: 0;
text-align:center;
}
I used width:100%;display:block instead of width:1000px because I assumed that you want a block that occupies 100% width from screen. Working demo: http://jsfiddle.net/brunoluiz/NyLAD/
Well, good luck with HTML and CSS studies!
You can set the margin of your h1 to 0, also note that you should place the styles in some CSS file or right inside the page (between the <style> tags):
div {
width:1000px;
height:40px;
background:grey;
border:3px solid;
border-radius:10px;
opacity:0.85;
overflow:hidden;
line-height:40px;
}
div h1 {
margin:0;
}
Working demo.
Because you specified a specific height for the box in the style. Try removing the "height:40px;" part.
Now the div style looks like this:
style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;"
Fiddle
It looks like the height of the size of the header is too big for the height you set on your div. Try taking out the height from the div's style, like so:
<div style="width:1000px;background:grey;border:3px solid;border-radius:10px;opacity:0.85;overflow:hidden;">
<h1 style="text-align:center;">
Welcome To A Website
</h1>
</div>
I want to build a page that has an image at the top that reaches the side of the page. Like this link
http://www.workoutmeals.com.au/menu
Every time I try I have a gap at the edges. How do I make a div background reach the side of the page while having another background image in the body.
My Attempt
<body>
<div id='banner'>
Test
</div>
</body>
CSS
body
{
background: url(../images/background.jpg);
margin:0;
padding:0;
}
#banner
{
background: url(../images/top_bg.jpg) no-repeat;
margin:0, padding:0;
width: 100%;
height: 661px;
}
Your CSS reset it wrong. You have a comma between margin:0 and padding:0, which should be a semicolon:
/*margin:0, padding:0;*/
margin:0;
padding:0;
If you fix that, it will work as expected:
http://jsfiddle.net/y36cE/
Advice: don't put two style definitions on the same line, even for small ones like this. It makes your CSS less readable, and it's easier to overlook a small error like this.
I made this:
HTML:
<body>
<div id="header" >
</div>
<div id="main" >
</div>
<div id="footer" >
</div>
</body>
CSS:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
margin:0 auto;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/2/
But as you can see, the main div doesn't have a height.
Then I replaced my css by that:
body
{
margin:0px;
}
#header
{
width:100%;
background-color:black;
height:60px;
}
#main
{
width:300px;
border:1px dotted black;
position:absolute;
margin:0 auto;
bottom:60px;
top:80px;
}
#footer
{
width:100%;
background-color:black;
height:40px;
position:absolute;
bottom:0px;
}
http://jsfiddle.net/VpwQQ/1/
But then, the horizontal center doesn't work.
How can I do this design (div centered and that takes all the page in height between the header and footer with a 20 px magin) ?
I'm not sure what you're trying to do, but I'll give my explaination of what's going to happen with your code:
Your #main div doesn't have a height because it doesn't have a height CSS property, nor does it have any content.
You should add either a height: 100px or just add some content and you will see it gets a height.
The reason why I ask what you want to do is because you're not very clear as to what you want your final product to look like.
You're going to have another problem with the footer. If you use position absolute it sticks to the bottom at the moment. Set the height of the #main div to something ridiculously high and you'll see that when you have to scroll down the page the footer stays where it is. See http://jsfiddle.net/VpwQQ/3/
You should use position: fixed but this will keep it on the bottom of the WINDOW and not the DOCUMENT. So then you get into the problem of having to use Javascript in order to measure the document height and setting positions appropriately. Not sure what you're trying to do, but if you're just trying to lay out a website then use standard relative positioning to push the footer down naturally below the #main div.
Edit:
See http://jsfiddle.net/VpwQQ/4/ if you're just trying to set up a normal website layout.
If you want the footer to "stick" to the bottom of the page all the time then you will need to use position: fixed but I don't think this works across all browsers. See http://jsfiddle.net/VpwQQ/6/
Lastly, to get both footer and header to "stick" see http://jsfiddle.net/VpwQQ/8/
I added a div inside #main.
Main now has a 100% width.
Inside, put a div of 300px, with no absolute position.
I forked your fiddle: http://jsfiddle.net/8U9P6/
Personnally I prefer the javascript solution and not using the absolute position. But this solution seems to work.
Add and overflow to contain the content in the inside div: http://jsfiddle.net/M2nZc/
Note that the page will not grow as it is absolute position.
You can't use automatic margins on an absolutely positioned element, as it's not in the document flow any more.
Use width: 100% on the #main div, then put another element inside it that you center using automatic margins.
Demo: http://jsfiddle.net/Guffa/VpwQQ/9/
Note: You may need to use height: 100% on the body and html elements for the bottom sizing to work on the #main element.
Once you fill your #main div with content, it will automatically gain height according to the content. You can simply fill it with a few paragraphs of lorem ispum to simulate content. You can now remove the absolute position and positioning CSS.
Centering a div using the "0 auto" shorthand only works when the parent element (which, for the #main div, is the body element) has a defined width. To do this, try giving your body element a width of 100%. Doing this is something that you might want to make a habit of in you CSS.
To have your #main div always be 20px below the #header div, simply add 20px of margin-bottom to your #header div. Do the same below the #main div to space the footer.
Summed up (without the footer at the bottom, for now) your CSS might read something like this:
body {
width: 100%
margin: 0px;
}
#header {
width: 100%;
height: 60px;
margin-bottom: 20px; /*here we space the header 20px from the next element*/
background-color: black;
}
#main {
width: 300px;
margin: 0 auto 20px auto; /*we append the margin to include 20px of spacing at the bottom*/
border:1px dotted black;
}
#footer {
width:100%;
height:40px;
background-color:black;
}
Example: http://jsfiddle.net/WEx3j/
If you want the footer to be 'sticky' (always be at the very bottom of your website), I advise you to employ this method.
I hope this clarified a few things.
I cant seem to get this to work.
http://www.keironlowe.host56.com
What I need is the banner with the low opacity image on it to be centered no matter the resolution, Ive tried a wrapper but because the wrapper is a width of 800 it cuts of the image, i've tried margin:0 auto; and i've even tried using the tag but it still doesnt center in higher resolutions.
You shouldn't need the tags in #Logan's example. That tag is deprecated anyway. Setting a width (not auto) and setting margin-left and margin-right to 'auto' in your stylesheet should handle the centering just fine.
Try taking the centering and pic out of the CSS and into the HTML. the css would look like this:
#banner {
background-color:#000000;
height:350px;
width:auto;
margin:0 auto;
}
and your HTML would look like this:
<div id="banner">
<center>
<img src=".....">
</center>
</div>
That is what I would do.
First, get rid of that <center> tag you have around the <div id="banner"></div>. You don't need it and it's deprecated.
Then, swap out your current CSS of the following block:
#banner {
background-color:#000000;
background-image:url(../IMG/Banner_BG.png);
background-repeat:no-repeat;
height:350px;
width:auto;
margin:0 auto;
}
For this:
#banner {
background:url("../IMG/Banner_BG.png") center #000000 no-repeat;
height:350px;
margin:0 auto;
}
Swapped out the many background attributes for the shorthand. Since you're showing the image as a background, added in the background-position property of center. This will now bullseye your image into the centre.