|
CSS - Centering A Division Within The Page.
I know how to center a division horizontily in a page with this:
Code: #division {
width:800px;
left:50%;
margin-left:-400px;
}
Now I havent been able to center it both horizontilly and vertically, in a fashion that will resize the division based on the resolution. In other words I do not want to use absolute left or right locations. Any help would be appreciated, thanks! Similar TutorialsI know this is in the archives. I thought I understood how to do this but I can't seem to get it to work correctly. As always it's ie that won't render it correctly. I have one division inside another. The outer division will center but the nested division will not. I've set html and body to text-align:center , I've added the text-align:center to the body tag and then the division to text-align: left . It's just not working. Here's the example code: Code:
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type='text/css'>
HTML { align-text:center;}
body { align-text:center;}
#wrapper { margin: 50px auto; text-align: left; height:124px; width: 250px; }
.upper { margin: 15px auto; width: 50%;}
</style>
</head>
<body bgcolor="#FFFFFF" text="#000000" style="text-align:center">
<DIV id="wrapper">
<DIV class="upper">Just some text. Just some text. Just some text. Just some text. Just some text. Just some text.</div>
Text to show the area.
</div>
</body>
</html>
Help Also, why is it necessary to have the text-align=center definition in both the embedded sheet and the in-line. Howcome: html, body { color: #06F; background-color: #000; font-size: 16px; text-align: center; width: 768px; } Doesn't center the page in the browser? How can I center it? Output example on my website here. First off all, I am new to CSS so please go slow on me! I am trying to center a Wordpress website wich has 2 colums. #content and sidebar. I want the page to center according the users screen resolution. A good example of how I wood like to see it work is http://www.xterior.nl If you resize the window the site responds to it. Website adres: http://www.accent-aes.com Any help is highly appreciated. Many thanks in advance. Jeroen My current CSS file: Code: body {
background: url(images/qpwilm-bkgrnd.jpg) repeat-x top left fixed;
background-color: #f1f0e5;
font: 12px "Helvetica Neue", helvetica, tahoma, arial;
color: #000000;
margin:0px;
padding:0px;
}
a {
color: #000000;
text-decoration: underline;
font-weight:bold;
}
a:hover {
text-decoration:none;
}
/********************************************************************************/
/*wp admin bar plugin*/
#wp-admin-bar {margin:0; padding:5px; background:#f9f9f9; border:1px solid #666; clear:both; text-align:center;}
#wp-admin-bar ul {margin:0; padding:0;list-style:none;}
#wp-admin-bar ul li {list-style:none; display:inline; margin:0 10px; padding:0;}
/********************************************************************************/
/*Structure*/
#header{
position:relative;
margin:0px;
padding:0px;
background: url(images/qpwilm-header-bkgrnd.jpg) repeat-x top left;
width:100%;
height:150px;
}
#headerimg {
float:left;
margin:0px;
padding:0px;
width:100%;
height:150px;
background: url(images/qpwilm-header.jpg) no-repeat top left;
}
#header ul {position: absolute; bottom: 0; left: 55px;}
/********************************************************************************/
/*nav menu*/
ul#nav {list-style: none; font-size: 1em; margin:0; padding:0;}
ul#nav li { float: left; list-style: none; }
span.slash { margin-left: 10px; margin-right: 10px; color: #999;}
ul#nav li a { display: block; color: #2078ba; text-decoration: none; background-color: #f1f0e5; margin-right:5px; padding: 5px 10px;}
ul#nav li a:hover { color: #fff; background-color: #2078ba;}
/********************************************************************************/
/* #wrapper { padding-left: 30px; margin: 30px auto 0; } */
#wrapper {
padding-left: 30px; margin: 30px auto 0; }
#content {
width: 705px;
text-align: left;
float: left;
margin: 5px;
padding: 0px 20px 30px 20px;
background: url(images/qpwilm-trans.png) repeat top left;
}
.sidebar {
text-align: left;
padding: 20px;
float: left ;
margin: 5 px;
}
#sidebar-1 {
width: 156px;
background: url(images/qpwilm-trans.png) repeat top left;
}
#sidebar-2 {
width: 156px;
background: url(images/qpwilm-trans.png) repeat top left;
}
.sidebar ul li{
padding-bottom:15px;
}
.post, .page {
padding-top:30px;
padding-bottom:30px;
}
.post img, .page img {
background-color:#FFFFFF;
padding: 9px;
border: 1px solid #ffffff;
margin: 0 5px 5px 0;
}
.post img:hover, .page img:hover {
border: 1px solid #858482;
}
.post-title, .page-title {
font-size: 1.4em;
color:#ffffff;
margin: 0 5px 5px 0;
float:left;
}
.page-title {
margin-bottom: 30px !important!;
}
.post-date-meta {
float:left;
margin: 0 0 25px 0;
}
.comments-title-meta {
float:left;
margin: 0 0 20px 0;
}
span.date, .comments-title {
font-size: 0.9em;
margin:0;
padding:0;
font-weight:bold;
}
.postmeta, .comments-meta {
font-size: 0.7em;
font-weight:bold;
}
/**********************************************************************************/
/*Typography*/
/*Header text Option 1 - blog title text replaced with logo image.
This code hides the plain text blog title and description and adds an image or logo.
It's on by default. To disable it, just comment out the following "h1", "h1 a" and".description" tags
and uncomment out one of options 2 or 3.
*/
h1 {
float:center;
margin:0 43% 0 57%;
background: url(images/qpwilm-header-logo.png) no-repeat center left;
text-indent: -4000px;
width:80px;
height:105px;
}
h1 a {
display:block;
width:91px;
height:114px;
}
.description {
position: absolute;
font-size: 0;
left: -4000px;
}
/* end Option 1 */
/*Header text Option 2 - blog title in red box with live text. Blog description hidden.
This code uses the live text Blog Title and puts it in a nice red box, it also hides the blog description.
It's off by default. To enable it, just uncomment out the following "h1", "h1 a" and".description" tags
and comment out options 1 & 3.
h1 {
float:center;
margin:0 43% 0 57%;
background-color: red;
width:80px;
padding: 5px 5px 10px 5px;
text-align: center;
}
h1 a {
display:block;
bottom:0;
margin-top: 60px;
font-size: 0.5em;
color: #fff;
text-decoration: none;
}
h1 a:hover {
text-decoration: underline;
}
.description {
position: absolute;
font-size: 0;
left: -4000px;
}
/* end Option 2 */
/*Header text Option 3 - Plain text blog title and description
This code displays the Blog Title and Description in plain boring live text.
It's off by default. To enable it, just uncomment out the following "h1", "h1 a" and".description" tags
and comment out options 1 & 3.
h1 {
float:center;
font-size: 3em;
margin: 50px 0 0 55px;
}
h1 a {
text-decoration: none;
color: #fff;
display: block;
}
h1 a:hover {
color: #f0160c;
}
.description {
float:center;
margin: 0 0 0 55px;
font-size: 1.5em;
color: #fff;
}
*/
/**********************************************************************************/
/*Typography continued*/
h2 { margin-top: 20px; margin-bottom: 0; line-height: 1.5em;}
h2 a { color: #ffffff; text-decoration: none; background-color:#f0160c; padding: 5px 10px;}
h2 a:hover { color: #f0160c; background-color:#ffffff;}
.sidebar h2 {
font-size: 1.1em;
color:#f0160c;
}
.sidebar {
font-size: 1em;
}
.post h3, .page h3, .archive-title, div.page .archives-month a, #postcomment {
margin-top: 27px;
font-size: 1em;
color:#f0160c;
display:block;
padding: 5px 10px;
background-color:#ffffff;
clear:left;
font-weight: bold;
}
div.post h2 span.nobreak {
white-space: nowrap;
}
p { clear:both; font-size: 1em; line-height: 1.5em; margin: 1.2em 0; }
ol, ul {
font-size: 0.8em;
line-height: 1.5em;
margin: 1.2em 0 1.2em 0;
}
ul li,
ol li{ margin-bottom: 0.2em; }
.sidebar ul, .sidebar ol {
font-size: 1em;
}
img, a img{ border:0px;}
.sidebar a { text-decoration: none; }
#sideblog-1 a,
.textwidget a,
.widget widget_meta a,
.posts-nav a { text-decoration: underline !important!; }
#sideblog-1 a:hover,
.textwidget a:hover,
.widget widget_meta a:hover,
.posts-nav a:hover { text-decoration: none !important!; }
blockquote {
margin: 0px;
padding: 0 30px;
border-left: 4px solid #ffffff;
font-size: 0.9em;
}
pre{
display: block;
margin: 1.0em 1.5em 1.0em 0;
padding-left: 0.8em;
border-left: 1px solid #ccc;
background-color: #eee;
overflow: auto;
}
code{font-family: monospace; font-size: 11px; background-color: #eee;}
pre code{ line-height: 1.3em;}
kbd{
background-color: #ddd;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
font-size: inherit;
font-family: inherit;
padding: 0 3px 2px 4px;
}
del, del * { text-decoration: line-through; }
.comments-link, .tags, .small{
font-size: 0.7em;
}
ol.postspermonth, ul.postspermonth {
line-height: 1.5em;
margin: 1.2em 0 1.2em 0;
font-size: 0.7em;
}
ul.postspermonth li, ol.postspermonth li{ margin-bottom: 0.2em; }
.update {
color: #f0160c;
font-weight: bold;
}
.posts-nav {
margin-top: 27px;
font-size: 1em;
color:#f0160c;
padding: 5px 10px;
background-color:#ffffff;
font-weight: bold;
}
.alignright {
float: right;
}
.alignleft {
float: left
}
/***********floating images***************/
/* Using 'class="alignright"' on an image will (who would've
thought?!) align the image to the right. And using 'class="centered',
will of course center the image. This is much better than using
align="center", being much more futureproof (and valid) */
img.centered {
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignright {
padding: 4px;
margin: 0 0 2px 20px !important!;
display: inline;
}
img.alignleft {
padding: 4px;
margin: 0 20px 2px 0 !important!;
display: inline;
}
/* End Images */
/***********comments***************/
#comment {
width: 100%;
}
.comments {
background: url(images/qpwilm-trans.png) repeat top left;
padding:10px;
margin-top:5px;
margin-bottom:5px;
}
.comments-alt {
background: url(images/qpwilm-trans2.png) repeat top left;
}
.comments ol, .comments ul {
line-height: 1.3em;
margin: 1.2em 0 1.2em 56px;
font-size: 0.8em;
}
.comments ul li,
.comments ol li{ margin-bottom: 0.2em; }
.comments li:hover{ background-color: #ffffff; }
.comments-title {
margin-top: 10px;
margin-bottom:2px;
}
.comments-meta {
padding-top: 1px;
}
.comments p {
margin: 15px 56px;
font-size: 0.8em;
}
/**********gravatar***************/
.gravatar {
float:left;
}
.gravatar img{
background-color: #ffffff;
padding: 5px;
margin-right:5px;
}
/*********Privado-comments***************/
.comments-author {
border:1px solid #B2FF66;
background-color: #95FFCE;
padding:5px;
margin-top:5px;
margin-bottom:5px;
}
.comments-author li {
border:1px solid #B2FF66;
background-color: #95FFCE;
padding:5px;
margin-top:5px;
margin-bottom:5px;
}
.comments-author li:hover{ background-color: #ffffff; }
/*********sidebars***************/
.sidebar h2 {
margin: .5em 0 0.6em 0;
display:block;
padding: 5px 10px;
background-color:#ffffff;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.sidebar ul ul {
margin: 1.0em 0 1.5em 0;
border-top: 1px solid #858482;
}
#sideblog-1 ul {
border-top: 0;
}
.sidebar ul ul li {
padding: 0 0 0 10px;
border-bottom: 1px solid #858482;
}
.sidebar ul ul li a {
display: block;
margin: 0 0 0 -10px;
padding: 2px 10px;
font-weight:normal;
}
.sidebar ul ul li a:hover {
color: #f0160c;
background-color: #ffffff;
}
#flickr img, #runforcover img {
margin: 0 6px 6px 0;
padding: 5px;
background-color:#ffffff;
border: 1px solid #ffffff;
}
#flickr img:hover, #runforcover img:hover {
border: 1px solid #858482;
}
}
/**********formularios*********/
input, textarea, select {
border: 1px solid #C1C0B5;
background-color: #ffffff;
color: #000000;
font-size: 0.9em;
}
/**********************************************/
#searchform{
width:100%;
I hate to sound like a newbie. I am using dreamweaevr and I am trying to center a page using css. here is my html (I know it is ugly!) [code] <body onLoad="MM_preloadImages('/images/m2.jpg','/images/m1_over.jpg','/images/m3_over.jpg','/images/m4_over.jpg','/images/m5_over.jpg','/images/m6_over.jpg','/images/m7_over.jpg','/images/m8_over.jpg','/images/m1.jpg')"> <!-- Save for Web Slices (01_home.psd) --> <div id="Table_01"> <div id="logo"> <img src="images/logo.jpg" width="980" height="105" alt=""> </div> <div id="id01-home-02"> <img src="images/01_home_02.jpg" width="970" height="1" alt=""> </div> <div id="header-bgd1"> <img src="images/header_bgd1.gif" width="1" height="46" alt=""> </div> <div id="id01-home-04"> <img src="images/01_home_04.jpg" width="9" height="46" alt=""> </div> <div id="id01-home-05"> <img src="images/01_home_05.jpg" width="20" height="77" alt=""> </div> <div id="m1-act"> <img src="images/m1.jpg" width="114" height="45" id="Image2" onMouseOver="MM_swapImage('Image2','','images/m1_act.jpg',1)" onMouseOut="MM_swapImgRestore()"></div> <div id="id01-home-07"> <img src="images/01_home_07.jpg" width="4" height="77" alt=""> </div> <div id="m2"> <a href="#"><img src="images/m2.jpg" alt="" width="114" height="45" border="0" id="Image1" onMouseOver="MM_swapImage('Image1','','images/m2_over.jpg',1)" onMouseOut="MM_swapImgRestore()"></a> </div> <div id="id01-home-09"> <img src="images/01_home_09.jpg" width="4" height="77" alt=""> </div> <div id="m3"> <img src="images/m3.jpg" alt="" width="114" height="45" border="0" id="Image3" onMouseOver="MM_swapImage('Image3','','images/m3_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-11"> <img src="images/01_home_11.jpg" width="4" height="77" alt=""> </div> <div id="m4"> <img src="images/m4.jpg" alt="" width="114" height="45" border="0" id="Image4" onMouseOver="MM_swapImage('Image4','','images/m4_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-13"> <img src="images/01_home_13.jpg" width="4" height="77" alt=""> </div> <div id="m5"> <img src="images/m5.jpg" alt="" width="114" height="45" border="0" id="Image5" onMouseOver="MM_swapImage('Image5','','images/m5_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-15"> <img src="images/01_home_15.jpg" width="4" height="77" alt=""> </div> <div id="m6"> <img src="images/m6.jpg" alt="" width="114" height="45" border="0" id="Image6" onMouseOver="MM_swapImage('Image6','','images/m6_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-17"> <img src="images/01_home_17.jpg" width="4" height="77" alt=""> </div> <div id="m7"> <img src="images/m7.jpg" alt="" width="114" height="45" border="0" id="Image7" onMouseOver="MM_swapImage('Image7','','images/m7_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-19"> <img src="images/01_home_19.jpg" width="4" height="77" alt=""> </div> <div id="m8"> <img src="images/m8.jpg" alt="" width="114" height="45" border="0" id="Image8" onMouseOver="MM_swapImage('Image8','','images/m8_over.jpg',1)" onMouseOut="MM_swapImgRestore()"> </div> <div id="id01-home-21"> <img src="images/01_home_21.jpg" width="10" height="45" alt=""> </div> <div id="id01-home-22"> <img src="images/01_home_22.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-23"> <img src="images/01_home_23.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-24"> <img src="images/01_home_24.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-25"> <img src="images/01_home_25.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-26"> <img src="images/01_home_26.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-27"> <img src="images/01_home_27.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-28"> <img src="images/01_home_28.jpg" width="114" height="32" alt=""> </div> <div id="id01-home-29"> <img src="images/01_home_29.jpg" width="114" height="32" alt=""> </div> <div id="header-bgd2"> <img src="images/header_bgd2.jpg" width="20" height="32" alt=""> </div> <div id="head-img1-01-01"> <img src="images/head_img1_01_01.jpg" width="595" height="246" alt=""> </div> <div id="head-img1-01-02"> <img src="images/head_img1_01_02.jpg" width="385" height="246" alt=""> </div> <div id="id01-home-33"></div> <div id="id01-home-34"></div> <div id="banner1"></div> <div id="id01-home-36"></div> <div id="id01-home-37"></div> <div id="id01-home-38"></div> <div id="id01-home-39"> <img src="images/01_home_39.jpg" width="980" height="73" alt=""> </div> <div id="id01-home-40"> <img src="images/01_home_40.jpg" width="979" height="36" alt=""> </div> <div id="id01-home-41"> <img src="images/01_home_41.jpg" width="1" height="36" alt=""> </div> </div> <!-- End Save for Web Slices --> </body> [code] I have tried using the tutorials on other sites and have had no luck. Can someone please help? Here is my CSS: [code]@charset "utf-8"; /* CSS Document */ <style type="text/css"> <!-- body { text-align: center; } #Table_01 { position:absolute; left:0px; top:0px; width:980px; height:987px; text-align:left; } #logo { position:absolute; left:0px; top:0px; width:980px; height:105px; } #id01-home-02 { position:absolute; left:0px; top:105px; width:970px; height:1px; } #header-bgd1 { position:absolute; left:970px; top:105px; width:1px; height:46px; } #id01-home-04 { position:absolute; left:971px; top:105px; width:9px; height:46px; } #id01-home-05 { position:absolute; left:0px; top:106px; width:20px; height:77px; } #m1-act { position:absolute; left:20px; top:106px; width:114px; height:45px; } #id01-home-07 { position:absolute; left:134px; top:106px; width:4px; height:77px; } #m2 { position:absolute; left:138px; top:106px; width:114px; height:45px; } #id01-home-09 { position:absolute; left:252px; top:106px; width:4px; height:77px; } #m3 { position:absolute; left:256px; top:106px; width:114px; height:45px; } #id01-home-11 { position:absolute; left:370px; top:106px; width:4px; height:77px; } #m4 { position:absolute; left:374px; top:106px; width:114px; height:45px; } #id01-home-13 { position:absolute; left:488px; top:106px; width:4px; height:77px; } #m5 { position:absolute; left:492px; top:106px; width:114px; height:45px; } #id01-home-15 { position:absolute; left:606px; top:106px; width:4px; height:77px; } #m6 { position:absolute; left:610px; top:106px; width:114px; height:45px; } #id01-home-17 { position:absolute; left:724px; top:106px; width:4px; height:77px; } #m7 { position:absolute; left:728px; top:106px; width:114px; height:45px; } #id01-home-19 { position:absolute; left:842px; top:106px; width:4px; height:77px; } #m8 { position:absolute; left:846px; top:106px; width:114px; height:45px; } #id01-home-21 { position:absolute; left:960px; top:106px; width:10px; height:45px; } #id01-home-22 { position:absolute; left:20px; top:151px; width:114px; height:32px; } #id01-home-23 { position:absolute; left:138px; top:151px; width:114px; height:32px; } #id01-home-24 { position:absolute; left:256px; top:151px; width:114px; height:32px; } #id01-home-25 { position:absolute; left:374px; top:151px; width:114px; height:32px; } #id01-home-26 { position:absolute; left:492px; top:151px; width:114px; height:32px; } #id01-home-27 { position:absolute; left:610px; top:151px; width:114px; height:32px; } #id01-home-28 { position:absolute; left:728px; top:151px; width:114px; height:32px; } #id01-home-29 { position:absolute; left:846px; top:151px; width:114px; height:32px; } #header-bgd2 { position:absolute; left:960px; top:151px; width:20px; height:32px; } #head-img1-01-01 { position:absolute; left:0px; top:183px; width:595px; height:246px; } #head-img1-01-02 { position:absolute; left:595px; top:183px; width:385px; height:246px; } #id01-home-33 { position:absolute; left:0px; top:429px; width:980px; height:40px; background-color:#363d3e; } #id01-home-34 { position:absolute; left:0px; top:469px; width:600px; height:208px; background-color:#363d3e; } #banner1 { position:absolute; left:600px; top:469px; width:360px; height:157px; background-image:url(images/banner1.jpg); } #id01-home-36 { position:absolute; left:960px; top:469px; width:20px; height:208px; background-color:#363d3e; } #id01-home-37 { position:absolute; left:600px; top:626px; width:360px; height:51px; background-color:#363d3e; } #id01-home-38 { position:absolute; left:0px; top:677px; width:980px; height:201px; background-color:#4a585a; } #id01-home-39 { position:absolute; left:0px; top:878px; width:980px; height:73px; } #id01-home-40 { position:absolute; left:0px; top:951px; width:979px; height:36px; } #id01-home-41 { position:absolute; left:979px; top:951px; width:1px; height:36px; } --> </style>[code] Hi, I'm in the construction phase of a site and have come into a bit of trouble.. The page is centered horizontally using a master <table align=center> that holds all the page content within it. I'm trying to put in some help widgets that appear or disappear based on an onClick event.. The only way I can find to have the help widgets layered over top of the already-displayed page is to use the position:absolute style, but this bases the position on the left and top edges of the window, rather than the left and top edges of the master table (of course). I'm wondering if there's any way I can set the style to base the absolute location of the help widgets on a figure such as the center of the window or something like the width of the window divided in half. I tried using javascript to set the element's style.left to (window.innerWidth/2)-(width of master table/2) but that only seems to work in FireFox as IE doesn't seem to recognize innerWidth. Any crafty solutions would be greatly appreciated! Hi friends, I'm trying to center this page with CSS, but no idea where my code is wrong? in screen resolution 800 it looks fine but in 1024 and above it remains on left side of the page. Here is a page url http://gooo.ueuo.com/ and CSS code is given below. Code:
<style type="text/css">
#container{
margin-left: auto;
margin-right: auto;
}
#logo {
position:absolute;
left:-1px;
top:-2px;
width:200px;
height:60px;
background-color: #003399;
}
#description {
position:absolute;
left:19px;
top:140px;
width:760px;
height:530px;
z-index:1;
}
#Layer5 {
position:absolute;
left:243px;
top:151px;
width:395px;
height:45px;
z-index:4;
}
.style2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
font-weight: bold;
color: #990066;
font-size: 18px;
}
#paragraph {
position:absolute;
left:243px;
top:206px;
width:397px;
height:200px;
}
.style3 {font-family:Verdana, sans-serif;
font-size: 11px;
color:#000000;
line-height: 18px;
padding: 6px;
}
#system {
position:absolute;
left:29px;
top:379px;
width:200px;
height:80px;
z-index:5;
}
.style4 {
font-family: Verdana, sans-serif;
font-size: 12px;
}
.style5 {font-size: 10px;}
.style6 {font-size: 10px;}
#footer {position:absolute;
left:0px;
top:680px;
width:799px;
height:175px;
background-color:#0D75D2;
}
.style7 {
font-family: Verdana, sans-serif;
font-size: 10px;
list-style-type: none;
}
.style9 {
font-family: Verdana, sans-serif;
font-size: 11px;
}
.style10 {
font-weight: bold;
font-size: 14px;
font-family: Verdana, sans-serif;
color: #990066;
}
</style>
I am trying to center the blocks into the middle of the page but all the traditional methods seem to be failing. I've tried centering the body, making a wrapper and aligning and many other methods but the page still clings to the left of the page. If anyone could give help it would be appreciated. It probably requires the most simple of solutions but, as a relatively new user of CSS, even these seem to be hard to discover... CSS Code Code:
/* Usual Selectors */
div.wrapper {
margin-left: auto;
margin-right: auto;
height: 100%;
text-align: center;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
color: #FFFFFF;
background-color: #000000;
text-align: center;
}
p {
width: 100%;
text-align: left;
}
h1 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 18px;
font-weight: bold;
color: #FFFFFF;
}
h2 {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
font-weight: bold;
color: #FFFFFF;
border-bottom: 1px solid #E0E0E0;
}
/************************* Identification *************************/
#header {
position: absolute;
width: 950px;
height: 46px;
margin: 0;
margin-top: 50px;
padding: 0 0 50px 0px; /*top right bottom left*/
text-align: left;
}
#footer {
width: 950px;
text-align: center;
}
#t_navigation {
position: absolute;
z-index: 10;
width: 50%;
height: 50px;
margin: 0;
margin-top: 68px;
padding: 0 0 50px 250px; /*top right bottom left*/
font-weight: normal;
text-align: left;
}
#search_frame {
position: absolute;
z-index: 10;
margin: 0;
margin-top: 35px;
padding: 0 0 0 250px; /*top right bottom left*/
width: 740px;
text-align: left;
}
#search_box {
background-color: #FFFFFF;
height: 28px;
text-align: left;
}
#search_box #s {
float: left;
padding: 0;
margin: 6px 0 0 6px;
border: 0;
background-color: #FFFFFF;
font-color: #000000;
width: 70%;
text-align: left;
}
#search_box #go {
float: right;
margin: 3px 4px 0 0;
font-color: #000000;
text-align: left;
}
#l_navigation {
position: absolute;
z-index: 10;
width: 210px;
height: 600px;
margin: 0;
margin-top: 100px;
padding: 0 0 50px 0px; /*top right bottom left*/
border-right: 1px solid #E0E0E0;
font-weight: normal;
text-align: left;
}
#centerDoc {
position: absolute;
z-index: 15;
padding: 0 0 50px 250px; /*top right bottom left*/
margin-top: 100px;
margin-right: 10%;
text-align: left;
width: 740px;
}
Thanks. I am trying to center the page layout horizontally. I used margins: 0 auto; align: center; and it works properly in foxfire, but in IE it is aligned left. How can I make it center in IE too?? Thanks! I'm working on a new design for my family site and I'm having trouble with the centering of the page. The Site I love the way it looks so far, but if you adjust the size of your browser(any browser, doesn't matter...) window horizontally, certain elements fail to line up properly due to what appears to be a "remainder" error on the centering, i.e. whether there is an even or odd number of pixels to work with. Any idea how to solve this issue? I did find this at Position is Everything, but I'm not exactly clear on how to implement the proposed "solution" or if it would even work in my case... Note that the linked css in the page, is actually just a place holder, all the css is embedded at the top. Thanks... BTW - I'm just getting going on the family site now (even though I've had the domain for a while) because my wife and I just found out we are having a baby!!!! This might be tricky, but I'm sure it's possible using Javascript. When you position a JPEG in a web page, you can give it a left position, right position, top position.... 100px from the Left, 50 px from the top etc. What I'm after is a top/centred position... Before you guys say it... yes I know you can centre it easily, but I'm after something with a difference. Please see the JPEG attached. I'd like it so that no matter what size the browser window is, big or small, the RED DOT in the middle of the image stays DEAD CENTRE in the top middle of the browser window. This means that the left and right sides of the JPEG image would be cut off at the edges, which is what I want. The important bit is that the "This is a test" text and red dot must stay dead centre. At the moment, when the browser window is made smaller, the JPEG image stays fixed againt the left hand side and the menu options saying "This is a test" get cut off. I am guessing I need some bit of JS code that judges the centre position by calculating the width of the browser window and halving it... then judging the size of the image, halving that and working out where the Image should go. I hope this makes sense ! This is the code I am currently using : Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> </head> <body bgcolor="#ffffff" style="margin:0;overflow:hidden;"> <div align="center"><img src="LongerHeader.jpg" width="1500" height="100" alt="" ""> </div> </body> </html> Actually, I found this code, which might be of use to people trying to suss this problem out. It opens a new window in the centre by judging the width of halving the monitor window and positioning accordingly. Similar thing I guess. Any ideas folks ?! Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
<script language="JavaScript" type="text/JavaScript">
<!--
var win4=null;
function GoogleWindow(mypage,myname,w,h,scroll,pos){
if(pos=="center"){LeftPosition=(screen.availWidth)?(screen.availWidth-w)/2:50;TopPosition=(screen.availHeight)?(screen.availHeight-h)/3:50;}
else if((pos!="center" && pos!="random" && pos!="default" && pos!="top") || pos==null){LeftPosition=0;TopPosition=20;}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',l ocation=no,directories=no,status=yes,menubar=no,toolbar=yes,resizable=yes';
win4=window.open(mypage,myname,settings);
if(win4.focus){win4.focus();};}
// -->
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div align="center">
<p> </p>
<p><font size="3" face="Arial, Helvetica, sans-serif"><strong><a href="http://www.google.co.uk" target="_parent" onFocus="this.blur()"
onClick="GoogleWindow(this.href,'Detailed','780','520','no','center');return false"><span>>CLICK HERE</span></a> </strong></font></p>
</div>
</body>
</html>
Hey guys. http://fairplaygamers.com/fifa/application.php if you look there you will see my banner which is 760px. I want to make the whole entire rest of the page to be within those margins. How can I achieve this? Pretty much itd be like having a 1 cell table with everything in between. Hi, Im having a problem centering a DIV table exactly how i want it too. I want to be use the DIV table so that it will be only a few pixel away from the top.. so lets say 80px from the top and being centered horizontaly, so that it will display the samething for both 1024x768 & 800x600. ps: the DIV table needs to be aligned to the right so that the image will appear on the right in both 1024x768 & 800x600 I have included/attached a image to kinda give a better idea. I have my site centred in the browser window, yet if you resize the window (as if emulating 800 x 600 or smaller) then the scroll bar appears on the right as it should. But the web page has the top section cut off and is not accessible, is this my code? or is this because of the size of the web site? The page can be viewed he http://www.spanishguitar.co.uk If you make your height of your browser window smaller, you will see that the top of the site gets cut off. How can I fix this? My css for this is: Code:
#PageDiv {
position:absolute;
left: 50%;
top: 50%;
width: 770px;
height: 600px;
margin-top: -300px; /* half of the height */
margin-left: -385px; /* half of the width */
border: 1px solid #000;
}
I have two problems with template I am creating. I could not center the page whatever I tried and for some reason list-style do not appear correct. edit: Actually just realized list styles does not appear at all. http://efetuncel.win.aplus.net/ryt/new/ I'm trying to replicate the layout of an existing site as part of a long-term move to a new CMS. It's mostly working like I want, except for centering some columns in the layout. test page here, but I can't hyperlink as a newbie http://postdotnet.com/habitat/ 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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test page</title>
<style type="text/css">
body{ text-align: center; background: #A4CEF5; }
div .body { margin: 0px auto; width: 1000px; }
div .top { background: url("header-rooftop.png") top center transparent no-repeat;
height: 50px;
padding: 0px !important;
}
div .header {
background: url("maincontent-bg-white.png") top center repeat-y;
padding: 0px !important;
}
div .header img { text-align: center; }
div .nav {background: url('nav-bg-full.png') top no-repeat !important;
height: 93px;
}
div .container {
margin: 0px 0px 0px 0px;
z-index: 10;
}
div .content {
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
z-index: 10;
height: 500px;
background: url("maincontent-bg-white.png") top center repeat-y;
position: relative;
}
div .columns {
width: 1000px;
overflow: auto;
clear: both;
display: inline;
}
div .content-bottom {
clear: both;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
z-index:15;
position: relative;
background: url('maincontent-bg-bottom-white.png') top center no-repeat;
}
.footer-grass {
height: 169px;
width: 100% !important;
background: url('footer-grass-2.png') top center repeat-x transparent !important;
position: relative;
margin-top: -125px;
z-index: 0;
}
.footer-wrapper {
background: url('footer-bg-grad.png') top left repeat-x #7D7369 !important;
}
div .colleft {
float: left;
width: 250px;
border: 1px solid red;
height: 400px;
}
div .colright {
width: 750px;
border: 1px solid blue;
height: 400px;
float: left;
}
</style>
</head>
<body>
<div class="body">
<div class="container">
<div class="top">
</div>
<div class="header">
<img src="habitat-nwhc-logo-262px.png" alt="Habitat for Humanity Northwest Harris County" />
</div>
<div class="nav"></div>
<div class="content">
<div class="columns">
<div class="colleft"> </div>
<div class="colright"> </div>
</div>
</div>
<div class="content-bottom"> </div>
</div>
<div class="footer-grass"></div>
<div class="footer-wrapper"> </div>
</div>
</body>
</html>
The red & blue columns should be centered on the white background. I'm trying to replicate the basic layout used he http://habitatnwhc.org/ I've been reading numerous articles on how to do CSS columns, and have tried dozens of different things, but nothing seems to work. I'm a programmer, not a UI guy, so I'm actually proud that I've made it this far on my own. I'd really appreciate any hints on how to solve this. thanks! I have a division on my web page. I've set the width to 800 and the height to 100. Inside of the division I have 3 nested divisions The first holds a logo and is positioned absolutely within the wrapping division so that it appears on the left side. The division has a background image and the word "HTML" that is centered both vertically and horizontally within the nested division. The second nested division is positioned so that the text within it appears in the upper right of the wrapper. The third nested division is positioned so that the text displays in the lower right hand. The problem is that in IE I am getting alot of white space between the bottom of the wrapper and the bottom of the third nested division. This does not happen in firefox. Can anyone tell me what is hapening here. after just getting my site fixed up, I have encountered a small problem with the divs, where the middle div (the main content) just ignores the right div (where im going to put adds). I was hoping someone could take a quick look at it and tell me how i could fix this small problem. http://funnyguys99.tripod.com/index.htm There are better details of the errors on my page, if you didn't quite get the problem. Hi, these forums have being a godsend to me so far, providing really useful information on my road to becoming a webdesigner, I wondered if someone could help me with a CSS problem I am having. I want to have a green background behind some text, however, I want the background to just be behind the text not to extend all the way across the screen. I think that the best way to do this is to have a division that I set the length of using CSS and include the text in there, my code so far is as follows: <style type="text/css"> body {background-color:} h1 {background-color: #00ff00} p {background-color:} h2 {background-color: transparent} div.block {style=width:300px} </style> <div style="width: 300px"} <p><h1>THIS TEST</h1></p> </div> <div class="block"> <p><h1>THIS TEST</h1></p> </div> For some reason the div is not tallying with the div.block in the style sheet, if I specify the width of the division in the actual html tag within the body its working fine, can anyone spot what I might be doing wrong. I will give some time back at this forum helping others when I am finished on my current project in exhange for the time people have given up for me. Thanks Ok what i have been asked to do is set up a webpage with three divisions ( i think), in a column structure. Title at top then seperate divisions? for each of my books which will be getting added. Now the books should be contained as the book title, author, publisher etc with an image to the right of all this information. However the author, title and publisher have all different formats, the author should be bold, the title in italics etc etc. I am finding it difficult to know what tag to use to split up this information. Just now i have created a <div> section labelled book1 for the first book. How do you go about splitting up the txt within this division tag as i will be writing a CSS sheet to manipulate the author, title and publisher with all different formats. Thanks |
|||||||