I am designing a website layout in which all of the content is held in a central column of a fixed width. I want this central column to have a different background color than the rest of the page. I also want the central column to extend from the very top of the browser to the very bottom.
I am able to successfully do this using a background image of dimensions 1000x1, as follows:
html
{
background: #333333 url(./images/global/background.png) repeat-y center;
}
body
{
margin: auto;
width: 1000px;
}
This works great in most browsers, but I would really prefer to be able to do it without an image.
I have tried setting "html" and "body" to have a "height: 100%" and then giving "body" a background color, but if there is enough content to warrant scrolling, the background only has a height equal to that of the browser and when you scroll down, the background stays behind.
Any tips are appreciated.
The solution is to use a wrapper div that has 100% height and a separate content div that will extend if the content inside is long enough both having the background color set. Here is an example (tested in Firefox, Chrome and IE7):
<html>
<head>
<style type="text/css">
html {height: 100%}
body {
height: 100%;
margin: 0;
text-align: center;//for IE7
}
div#wrapper {
background-color: #efefef;
width: 720px;
margin: 0 auto;
height: 100%;
text-align: left;
}
div#content {
background-color: #efefef;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="content">
<div style="height: 2000px">test</div>
</div>
</div>
</body>
</html>
body {
text-align: center;
margin: 5em 0 0 0;
vertical-align: middle;
}
#content {
width: 760px;
text-align: left;
margin: 0 auto;
}
Details here.
Related
I want to know if you can let your site always be at the same size so when you view the site on a bigger screen, it just adds more space/background to the page.
(I don't want media queries so that the style changes when the screen gets bigger)
Using CSS you can center your main div (wrapper).
#wrapper {
width: 500px;
margin: 0 auto;
background: green;
}
body {
margin: 0px;
font-family: Arial;
}
#wrapper {
width: auto; /* You can set the width here, but if you want to make the page smaller on smaller devices you use 'auto' here. */
max-width: 500px; /* Set the maximum width of the webpage. */
margin: 0 auto; /* Center the wrapper */
background: green;
color: white;
}
<body>
<div id="wrapper">
<h1>Welcome to your webpage.</h1>
<h2>Site content goes here.</h2>
</div>
</body>
I am putting entire website inside a div with ID container. The css for container is
#container {
width: 960px;
background: #FFFFFF;
margin: 0 auto;
border: 1px solid #000000;
text-align: left;
}
But the problem is that it also limits the background to 960px. I want to exclude background & allow it to fill entire screen. i.e repeat on x-axis
Use the following code - should work :
CSS
body {
width: 100%;
background: #fff;
}
HTML
<body>
<div id="container">
</body>
To do that,
First set your body's margin(left and right) to "auto", this way anything under the body will be centered.
So,
Here's the first code:
body{
margin: 0px auto;/* Centers your page */
background-color: #898989; /* Add a nice background-color */
}
There, Now for the div,
It is important to have a width defined for the div
so, assuming that your div is having an id called container:
#container{
width: 960px;
}
'
That's it! :D
I hope it's helpful!
Put background on parent element, eg. body.
body {background: url('...') repeat-x};
#container {width: 960px; ...}
just put what you want for background in body tag
body {
background:whatever_you_want;
}
I have tried everything I know, and I still can't get it to work. I want the four images to be like in the screen shot, but a lot bigger (600px centered). When I do this, however, it causes the entire container to be shifted to the left for some reason unknown to me.
HTML snippet:
<body>
<div class="container">
<div class="header">
..
</div>
<div class="menu">
...
</div>
<div class="content">
<div class="photos">
<h2> Here are some photos.....</h2>
<img src="img1">
<img src="img2">
...
</div>
</div>
</div>
</body>
CSS snippet:
body{
margin: 0;
padding: 0;
}
.container{
background-color: #AAC1CC;
max-width: 1440px;
width: 100%;
height: auto;
margin: 0 auto;
padding-bottom: 10px;
}
.content{
margin-left: 20px;
margin-bottom: 100px;
}
.photos {
background-color: pink; /* for testing */
width: 500px; /*for testing - normally 100% */
padding: 0;
margin: 0;
}
.photos img{
width: 100px;
display: block;
border: 2px solid black;
margin: auto;
margin-top: 40px;
margin-bottom: 40px;
box-shadow: 0 0 30px 3px #333;
}
Screenshot:
When the images are small (like 100px) the style is the same across the other tabs. However, if I increase the size of the images > 150px, the entire container shifts to the left by like ~20 pixels. I have tried using <br> between the images instead of display:block but it doesn't make a difference.
Why does this happen?
The only thing I can think of is that when the images are larger they cause the browser to display a scroll bar. As you have set the container width to 100% and the window width is now slightly smaller this could cause the shift that you mention.
I had a similar problem with a large image causing my main container to shift off center. threeandme's post reminded me to experiment with the overflow-y property in the css. I added overflow-y: scroll; into the css for "body" and it stopped it from shifting for me.
I am using HTML and CSS.
I can't display all of my content in the middle of the screen for varying display sizes.
I have attempted to use % in place of PX but it's unsuitable for small screen size such as 800*600 pixels.
Also I have performed web searches but my lack of in-depth knowledge of HTML is hindering my progress.
my code is this:
<style type="text/css">
#Line5
{
color: #7B7BC0;
background-color: #7B7BC0;
border-width: 0px;
}
#wb_Text1
{
background-color: transparent;
border: 0px #8B8B00 solid;
padding: 0;
}
<body>
<hr id="Line5" align="center" style="position:relative;top:28px;width:803px;height:93px ;z-index:0;">
<div id="wb_Text1" style="position:absolute;left:406px;top:58px;width:308px;height:36px;text-align:center;z-index:1;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
can someone correct this piece of code for me?
Don't know what your desired output is like. But check this out.
Click Here for Demo
<div id="wb_Text1">
<span class="head"><strong><em>SAMPLE TEXT</em></strong></span>
</div>
Here updated code and its working fine.
<div id="wb_Text1" style="position:relative;display:table;margin-left:auto;width:100%;height:36px;text-align:center;margin-right:auto;z-index:1;background-color: #7B7BC0;">
<span style="color:#FFFFFF;font-family:Arial;font-size:32px;"><strong><em>SAMPLE TEXT</em></strong></span></div>
Not clear about your question but I think Either of the examples below could work for you ;
if you want it to be standards compliant, use this in your stylesheet:
body {
text-align:center;
}
#mainContainer {
margin:0 auto;
}
the body thing makes it work in IE, the margin:0 auto; makes it center in most other browsers.
you might have to go in and reset some of your main containers to text-align:left; because the body text-align:center sometimes cascades down into the site content, but you can counteract that by adding
text-align:left;
to #mainContainer
Or,
There may be better methods, but this works in all browsers so far :
body {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
or set body width to 100% and then just make a container div for your page
#container {width: /*fixed width or percentage here*/; height: auto; margin: 0 auto; padding: 0; background: #; color: #; font: ; text-align: center;}
Also not quite sure what you're asking for. I'm interpreting it as you wanting the div to be centered vertically and horizontally, so that's what I'm going for.
HTML
<div id="wb_Text1">
<b>SAMPLE TEXT</b>
</div>
CSS
body {
height: 100%;
width: 100%; //these two are so that the automatic margins work for the div.
}
#wb_Text1 {
height: 93px; //or whatever height you want
width: 300px; //or whatever width you want (can be in %)
background-color: #7B7BC0;
border: 0px;
padding: 0px;
font: 32px Arial;
line-height: 93px; //should be same as the height if you've only got one line of text and you want it vertically centered in the div
color: #fff;
text-align:center;
margin: calc(0.5 * (50% - 46.5px)) auto; //first value makes it vertically centered, the second makes it horizontally centered.
margin: -webkit-calc(0.5 * (50% - 46.5px)) auto; //for Safari
}
Here's what's happening inside the calc():
50% gives you half the total height of the page,
46.5px is half of the div's height, which in this case is 93,
50% - 46.5px gives you the amount of space needed to center the div vertically
Fiddle here: http://jsfiddle.net/Shiazure/hA9KB/
i thank all those who helped me. Problem was solved by adding the following code.
<style type="text/css">
div#container
{
width: 990px;
position: relative;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
text-align: left;
}
....
.....
........
<body>
<div id="container">
...
....
Thank you so much that help a rookie !
In a nutshell
I need a CSS solution for the following requirements:
Two vertically repeated background images, one aligned to the left, one aligned to the right
One centered column on top with fixed width and a minimum height of 100%
Cross browser compatibility
A little more details
Today a new requirement for my current web site project came up: A background image with gradients on the left and right side (replaces the current body background image). The challenge is now to specify two different background images while keeping the rest of the layout spec. Unfortunately the (simple) layout somehow doesn't go with the two backgrounds.
My layout is basically one centered column with fixed width:
#main_container {
background-color: white;
margin: 0 auto;
min-height: 100%;
width: 800px;
}
Furthermore it's necessary to stretch the column to a minimum height of 100%, since there are quite some pages with only little content. The following CSS styles take care of that:
html {
height: 100%;
}
body {
background-image: url('old-background.png');
margin: 0;
height: 100%;
padding: 0;
}
So far so good - until the new body background image with gradients arrived. I tried the following solutions
Two absolute positioned divs behind the main container
One image defined with the body, one with the html CSS class
One image defined with the body, the other one with a large div begind the main container
With either one of them, the dynamic height solution was ruined. Either the main container didn't stretch to 100% when it was too small, or the background remained at 100% when the content was actually longer
Modified:
<body>
<div class="container"><div>
<div id="main_content"></div>
</body>
With css:
html {
height: 100%;
}
body {
background: url(left.png) repeat-y top left;
background-attachment:fixed;
height: 100%;
margin: 0;
padding: 0;
}
div.container {
background: url(right.png) repeat-y top right;
height: 100%;
width: 100%;
position:fixed; /* This won't work in all browsers. May need a JS solution for IE6 */
}
#main_content {
height: 100%;
width: 800px;
margin: 0 auto;
background-color: white;
}
Edit:
This version works for browsers that support position:fixed (not ie6).
Example page: http://jsbin.com/ebozi3/4/edit
Using a "layout table", my issue can be solved. A pure CSS solution, however, would be preferred!
Here's a working table-based solution:
table.layout {
border-collapse: collapse;
height: 100%;
margin: 0;
padding: 0;
width: 100%;
}
table.layout td {
margin: 0;
padding: 0;
vertical-align: top;
}
td.layout_left {
background-image: url('background-left.png');
background-position: top left;
background-repeat: repeat-y;
}
td.layout_center {
background-color: white;
width: 800px;
}
td.layout_right {
background-image: url('background-right.png');
background-position: top right;
background-repeat: repeat-y;
}
And the HTML code:
<table class="layout">
<tr>
<td class="layout_left"> </td>
<td class="layout_center">
<!-- content -->
</td>
<td class="layout_right"> </td>
</tr>
</table>
[revamp]
I'm silly. Very.
Problem: body needs to have bg images, #main_container needs to have 800 width and in the center.
(Lousy approach: I was doing #main_container with bg images, not centered, 800px.)
New approach: I suggest a div inside body and a span inside that new div:
<body>
<div>
<span>
<div id="main_container">
Regular contents.
</div>
</span>
</div>
</body>
Then:
body {
background: url(img/bg_left.gif) repeat-y top left;
}
body>div {
background: url(img/bg_right.gif) repeat-y top right;
}
body>div: {
text-align: center;
}
body>div>span {
display: inline-block;
/* IE only likes this rule on elements that are inline by nature, thus the use of span.
I'm not sure 100% height will work on #main_container. */
}
And your regular rules:
#main_container {
background-color: white;
margin: 0 auto;
min-height: 100%;
width: 800px;
}