I've used the search function and it just will not center as I cannot make sense of some suggestions and those I can do not work. Google leaves me no results either.
I want to use 1 div as a 'background as such' so that the first 150px of the screen down are blue.
Then I want the logo in a centered box 950px wide by 150px down.
The 'logo div' (I've called it headercontent) needs to be 'on top' of the headerbackgroundblue div, which I have managed.
However it will not center the box within that div (950px wide centered will store all content so that it looks good on all screens, however the blue is 1920px wide to make the website look better on larger resolutions.
CSS
body {
padding: 0;
margin: 0;
}
.headercontent {
z-index: 2;
position: absolute;
height: 150px;
width: 950px;
margin-right: auto;
margin-left: auto;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin-right: auto;
margin-left: auto;
background-color: #3c56a6;
z-index: 1;
position: absolute;
}
HTML
<!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>Kleenzone - Commercial Cleaning Services</title>
<link href="style/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="bluebackgroundtop"></div>
<div class="headercontent">
<H1> KLEENZONE </H1>
</div>
</body>
</html>
You need to have the .headerContent inside of the .bluebackgroundtop div, and then style like this:
* {
padding: 0;
margin: 0;
}
.headercontent {
height: 150px;
width: 950px;
margin:0 auto;
text-align:center;
}
.bluebackgroundtop {
height: 150px;
width: 1920px;
margin:0 auto;
background-color: #3c56a6;
}
DEMO
Related
I started writing my first website, and tried to center the container id in CSS using various methods found on the web (the most common of which being margin-left:auto; margin-right:auto;) but it simply won't work, and I have no idea why, or what could I do about it (I know, I could make a table with three columns in the html file, but I don't want to mix and match tables and divs)
My code so far looks like this:
HTML:
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="content">
hello world!
</div>
</body>
</html>
CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
Solution #1:
Replace position: absolute; with position: relative; in #content(CSS).
JSFiddle - DEMO and Full Screen View
body, html {
background-color:#FFF;
height:100%;
}
#content {
width:980px;
height: 100%;
background-color:#FCC;
position: relative;
display: block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
text-align:center;
}
<div id="content">hello world!</div>
More Info about margin: 0 auto; center to work:
What, exactly, is needed for margin: 0 auto; to work?
Solution #2:
Add left: 50%; and margin-left: -490px; (half width of #content div) to #content
JSFiddle - DEMO and Full Screen View
#content {
width: 980px;
background-color: #FCC;
position: absolute;
display: block;
top: 0px;
bottom: 0px;
margin-left: -490px;
left: 50%;
text-align: center;
}
Container is in center you need to align text in the center if you want,
align:center
should be
text-align:center;
Demo
Are you trying to center the "Hello world" text?? If add
text-align: center;
Instead of
align:center;
You can't center something with position: absolute; on it, as far as I know. position: absolute; means, that the div has an absolute positioning to something.
If you want to center it, then you could wrap the container, in a div, with position: relative; on it, and then center that one.
Like this:
<!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>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
</head>
<body>
<div id="wrapper">
<div id="content">
hello world!
</div>
</div>
</body>
</html>
With this CSS:
#charset "utf-8";
/* CSS Document */
body {
background-color:#FFF;
}
#wrapper {
position: relative; /* Needs to be there, for the #content-container to know,
what it's relative to. */
width: 100px; /* Needed as well */
display: block; /* For older browsers */
overflow: hidden; /* For older browsers */
margin: 0 auto 0; /* Adds the margin that centers it. */
}
#content {
width:980px;
background-color:#FCC;
position: absolute;
display:block;
margin-left: auto;
margin-right: auto;
top: 0px;
bottom:0px;
align:center;
}
The other way is just to replace this from your code:
position: absolute;
top: 0px;
bottom:0px;
With this:
position: relative;
Then your code should work as well...
Why do you want to center it, with position: absolute; ? Perhaps you want to achieve something, that there is another way of doing...
I am attempting to make a standard website layout with a header, a navigation bar a body (on the right of the navigation bar) and a footer.
Now I have so far done this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
.header {
float: top;
width: 100%;
height: 75px;
}
.navbar {
float: left;
width: 20%;
height: 100%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
.footer {
float: bottom;
width: 100%;
}
</style>
</head>
<body>
<div class="header"> Header </div>
<div class="navbar"> Nav Bar </div>
<div class="body"> Body </div>
<div class="footer"> Footer</div>
</body>
</html>
which produces this:
Now if we check the CSS:
.navbar {
float: left;
width: 20%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
.body {
float: right;
width: 80%;
height: 100%;
min-height: 100%;
overflow: scroll;
}
As you can see I have tried to set the height and min-height of both the body and nav bar to fill the remaining vertical space i.e:
Yet it doesnt affect it. However if I do height: 500px it resizes like expected (of course this now wont be very good practice as different screen sizes etc would show a different portion or view of the page):
So basically I am asking how would I be able to make the divs fill the vertical space that's left over without using some hard-coded value i.e 100px rather I would want to do it in percentages thus the page will look the same on all browsers
add this code to your body,html:
body,html{
height:100%;
}
and make your navbar <div id="navbar"> instead of <div class="navbar">
then add height: 100%; to your navbar
#navbar{
height:100%
// rest of your code
}
Same to your content
call it something like content, because body is already used.
#content{
height:100%
// rest of your code
}
now all the divs will have a height of 100% so the full browser height.
EDIT: your full code would look like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body{
padding: 0;
margin: 0 auto;
height: 100%;
}
#header {
width: 100%;
height: 75px;
}
#navbar {
float: left;
width: 20%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#content {
float: right;
width: 80%;
height: 100%;
min-height:100%;
overflow: scroll;
}
#footer {
width: 100%;
}
</style>
</head>
<body>
<div id="header"> Header </div>
<div id="navbar"> Nav Bar </div>
<div id="content"> Body </div>
<div id="footer"> Footer</div>
</body>
</html>
Use absolute positioning for each content block (header, footer, sideber, body), and for the body and nav-bar divs, set both top and bottom position properties, rather than specifying the height property. This will force them to fill the remaining viewport height.
More detail here
...and for supporting IE5 and IE6, here's an improved version using only CSS (no javascript).
I'd like to create a layout that acts like a titlebar from iphone:
I tried to put together the following example, but I'm not sure how to get the middle column to expand in width so it uses all left over space. I can do this in javascript at runtime, but wondering if there's a css solution. Here it is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
display: inline;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">title</div>
<div id="colRight">right</div>
</div>
</body>
</html>
Thank you
A simpler way to approach this is to use an HTML structure like this:
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
title
<div id="colRight">right</div>
<div>
Float the left and right divs to the appropriate sides and set the text align on the parent to center. Any styles from the middle div for text, etc can be applied to the parent.
I'm a bit late in the answer, but see if this is more like what you need, without the need to sacrifice the middle <div>:
You'll have to float the 3 columns and make the inner column have a 100% width. Then, setting the inner column's margin (based on left and right columns' widths), you achieve the result.
Have a look at this fiddle: http://jsfiddle.net/fabio_silva/d7SFJ/
The HTML/CSS:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style type="text/css">
html, body {
margin: 0px;
padding: 0px;
}
#parent {
background-color: #eee;
width: 100%;
}
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 100px;
float: left;
}
#colMiddle {
height: 48px;
text-align: center;
float: left;
width: 100%;
margin-left: -100px; /* negative colLeft width */
margin-right: -150px; /* negative colRight width */
}
#colMiddleInner
{
margin-left: 100px;
margin-right: 150px;
height: 48px;
background: #c9ffc3;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 150px;
float: left;
}
</style>
</head>
<body>
<div id="parent" style="width:100%">
<div id="colLeft">left</div>
<div id="colMiddle">
<div id="colMiddleInner">
title
</div>
</div>
<div id="colRight">right</div>
</div>
</body>
</html>
You need to define the widths...
#colLeft {
background-color: #ff8b8b;
height: 48px;
width: 50px
display: inline;
}
#colMiddle {
background-color: #c9ffc3;
height: 48px;
display: inline;
width: auto;
text-align: center;
}
#colRight {
background-color: #c3d0ff;
height: 48px;
width: 50px;
display: inline;
}
Note: default value for width is auto.
I've looked at 20 threads at least so far so sorry if this has been answered before but I couldn't find a solution that suits my particular css layout.
I want to set the height of 2 columns equal to each other in a way that the leftcolumn equals the contentcolumn. I've tried using multiple javascripts like this :
`
$(document).ready(function() {
// get the heights
l = $('#contentcolumn').height();
// get maximum heights of all columns
h = Math.max(l);
// apply it
$('#leftcolumn').height(h);
});
And:
document.getElementById("leftcolumn").style.maxHeight = document.getElementById("contentcolumn").style.height;
And:
$("#contentcolumn").height($("#leftcolumn").height())
The problem with the first code is that it drops the left div to some really long height which I don't even know. The second and third codes change nothing at all.
Can someone please help me I know there's probably a really simple solution to this problem but I just can't find and I just can't go to sleep until I do !
New webpage after clean up:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn">
</div>
</font>
</body>
</html>
New CSS after clean up:
body,
html {
background: #cacaca url(img/bg.png) repeat-x;
}
#maincontainer {
width:1000px;
margin:0 auto;
background: url(img/bg5.png) repeat-x;
}
#topsection {
background: #ffffff url(img/bg4.png) repeat-y;
height: 10px;
}
#leftcolumn {
float:left;
height: 100%;
width: 145px;
background: url(img/bg2.png) repeat-y;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 800px;
height: auto;
background: #dbdbdb url(img/bg3.png) repeat-x;
padding:10px;
}
You can do this without javascript--in a cross-browser way, even. This takes advantage of absolutely-positioning elements within relatively-positioned elements. If you set your #maincontainer div to position: relative and your #leftcolumn div to position: absolute, you can then set both top and bottom on #leftcolumn, so it always assumes the height of its parent (#maincontainer), even though #maincontiner's height is being set by its children (#contentcolumn in this case). Use this jsfiddle demo and play with #contentcolumn's height to see how #leftcolumn responds.
HTML:
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
</head>
<body>
<div id="maincontainer">
<div id="topsection"></div>
<div id="leftcolumn"></div>
<div id="contentcolumn"></div>
</div>
</body>
</html>
CSS:
body,
html {
background: #cacaca;
}
#maincontainer {
position: relative;
width:500px;
margin:0 auto;
background: #000;
}
#topsection {
background: #ffffff;
height: 10px;
}
#leftcolumn {
position: absolute;
top: 10px; /* room for #topsection */
bottom: 0;
left: 0;
width: 145px;
background: red;
}
#contentcolumn {
margin-left: 145px; /*Set left margin to LeftColumnWidth*/
min-height: 500px;
height: auto;
background: #dbdbdb;
padding:10px;
}
I’m struggling withthis of few hours new, and can’t get it right. My CSS skills a pure, so please understand.
So what I want to achieve is I have image on web site and when I change size of the browser window, image size has to adjust to a browser size, so whole image can be seen. Also image has to be in the center of the page.
Thanks for any help.
index.php:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<title>James Laycock</title>
</head>
<body>
<div id="main">
<div id="content">
<div id="image_container">
<img src="images/01.jpg" class="image" /></div>
</div></div></body></html>
style.css:
body{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;}
#main {
height: 90%;
width: 1000px;
position: absolute;
border: 0px;
padding: 0;
margin: 0 auto;}
#content{
height: 90%;
width: auto;
margin-top: 10px;
margin-right:10px;}
#image_container{
height: 100%;
max-height:100%;
width: auto;}
.image{
height: 100%;
width: auto;}
Try putting on the image container
text-align: center
And, on the actual image put height/width in percentage.
Edit: don't forget also centering the image container, or setting it's width to full screen.