|
CSS - Centering Floated Columns On Page
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! Similar TutorialsHowcome: 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. In Firefox, I've got a right div that is not repsonding to an auto width in FF. I am not a pro a CSS (yet ) and I hope that someone can give me the one line solution that I am missing. I've included a screen shot of the problem, any help is greatly appreciated. - K CSS Code Code:
#MainContainer
{
float: left;
width: auto;
}
#Main
{
margin-right: 0.2em;
}
#MainContent
{
padding: 0.5em 0.5em 0.5em 0.5em;
}
#SidebarContainer
{
float: right;
width: 250px;
border-top: 1px solid #C0C0C0;
padding-top: 5px;
clear: right;
}
#Sidebar
{
padding-bottom: 5px;
background: #ADADAD;
background-image: url(../images/SidebarBackground.jpg);
background-repeat: no-repeat;
clear:left;
}
#SidebarContent
{
margin: 0.2em 0.2em 0.2em 0.2em;
}
Hello, Is it possible to create a CCS stylesheet that will not only produce a printer-friendly HTML page, but create that page in the form of columns like a newsletter? What I don't want are columns like a web page, that simply read straight down to the end of the page, giving little regard to the fact that text in column one extends to the next page before continuing to subsequent columns. I want the text to read down from the left column to the right column, and then continue to each subsequent page, always reading from the left column to the right column--just like a newsletter. I know I can use PDF, but I find those file huge and combersome, and would prefer to create this in HTML & CSS if possible. I searched this board using "printer version" & columns, and when I found nothing I searched just "printer version" and found nothing. I could search just using columns, but wading through several postings about creating columns for a screen doesn't seem productive. Thanks in advance. Angie 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] 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%;
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! 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>
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!!!! 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. 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. 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! 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! Hi, My site is divided into 2 columns: The left column is 760px in width. I want the right column to take up the remaining space of the screen - no matter what resolution i'm on. Here's the page: http://www.3003online.com/demos/ecoceylon/ As you can see, the left column is 760px wide, but the right column (which is currently a simple background black colour) isn't filling up the rest of the space There's even a height problem - On IE, the width of that right column is 100% on the backgorund colour. But on Firefox, it isnt... Here's the code: Code: <div id="container"> <div id="logo"> <div class="hide">test</div> </div> <div class="spacer"> </div> </div> <div id="bgcolor_area"> </div> And the CSS: Code:
body {
color:#FFFFFF ;
font-family: Trebuchet MS, Arial ;
font-size:9pt ;
font-weight:normal;
line-height: 18px;
background-color: #FFFFFF;
margin:0px;
width:100%;
height:100%;
}
#bgcolor_area {
background: #000000;
height: 100%;
width: auto;
float: left;
}
#container {
text-align: left;
width: 760px;
float: left;
}
#logo {
height: 89px;
width: 760px;
background: url(../images/0_top.jpg) no-repeat;
margin: 0;
}
Does anyone know what I'm doing wrong? Thanks a lot! 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 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;
}
Hello, I'm working now on div layout that contains 3 sections (header, body, footer) in one centered wrapper with border (divs with background imgs). My problem is: - divs that are in fact borders (id="l_outerborder_b" and id="r_outerborder_b") don't stretch when main container (id="body_content_text") grows. Here is a html code: Code: <!--BEGIN TEMPLATE HEADER -->
<!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>
<link href="template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="template.js" />
</head>
<body onload="onloadprocedures()">
<div id="main_container">
<div id="template_header">
<div id="tl_outerborder"></div>
<div id="t_outerborder"></div>
<div id="tr_outerborder"></div>
<div id="l_outerborder_h"></div>
<div id="header_content">
<div id="logo"><img src="img/logo.png" alt="" /></div>
<div id="slogan"><img src="img/slogan.png" alt="Centrum zdrowia" /></div>
</div>
<div id="r_outerborder_h"></div>
</div>
<!-- END TEMPLATE HEADER -->
<!-- BEGIN TEMPLATE BODY -->
<div id="template_body">
<div id="l_outerborder_b"></div>
<div id="body_content">
<div id="body_content_text">
<p>TEST</p>
</div>
</div>
<div id="r_outerborder_b"></div>
</div>
<!-- END TEMPLATE BODY -->
<!-- BEGIN TEMPLATE FOOTER -->
<div id="template_footer">
<div style="clear:both"></div>
<div id="l_outerborder_f"></div>
<div id="footer_content"></div>
<div id="l_outerborder_f"></div>
<div id="bl_outerborder"></div>
<div id="b_outerborder"></div>
<div id="br_outerborder"></div>
</div>
</div>
</body>
</html>
<!-- END TEMPLATE FOOTER -->
and CSS: Code: @charset "utf-8";
/* CSS Document */
body {
background-color:#FFFFFF;
font-family:Tahoma, Verdana, "Times New Roman", Arial;
font-size:12px;
}
a:link {text-decoration: none} /* unvisited link */
a:visited {text-decoration: none} /* visited link */
a:hover {text-decoration: none} /* mouse over link */
a:active {text-decoration: none} /* selected link */
#main_container {
position:relative;
margin:auto;
width:960px;
height:auto;
}
#template_header {
float:left;
position:relative;
width:960px;
height:300px;
}
#header_content {
float:left;
position:relative;
width:900px;
height:270px;
}
#logo {
width:310px;
height:130px;
position:relative;
float:left;
top:0px;
left:0px;
}
#slogan {
width:580px;
height:100px;
position:relative;
float:left;
top:0px;
left:0px;
}
#tl_outerborder {
float:left;
position:relative;
background-image:url(img/tl_outerborder.png);
width:30px;
height:30px;
}
#t_outerborder {
float:left;
position:relative;
background-image:url(img/t_outerborder.png);
width:900px;
height:30px;
}
#tr_outerborder {
float:left;
position:relative;
background-image:url(img/tr_outerborder.png);
width:30px;
height:30px;
}
#l_outerborder_h {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#r_outerborder_h {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:270px;
}
#body_content {
float:left;
position:relative;
width:900px;
overflow:hidden;
}
#body_content_text {
float:left;
position:relative;
width:600px;
margin: auto;
overflow:hidden;
}
#l_outerborder_b {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_b {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#l_outerborder_f {
float:left;
position:relative;
background-image:url(img/l_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#r_outerborder_f {
float:right;
position:relative;
background-image:url(img/r_outerborder.png);
background-repeat:repeat-y;
width:30px;
height:inherit;
}
#template_body {
float:left;
position:relative;
width:960px;
overflow:hidden;
}
#bl_outerborder {
float:left;
position:relative;
background-image:url(img/bl_outerborder.png);
width:30px;
height:30px;
}
#b_outerborder {
float:left;
position:relative;
background-image:url(img/b_outerborder.png);
width:900px;
height:30px;
}
#br_outerborder {
float:left;
position:relative;
background-image:url(img/br_outerborder.png);
width:30px;
height:30px;
}
Thanks in advance for info how to stretch those doomed divs EDIT: Here is layout concept. URL hTTp://qsrc.pl/layout.jpg As always IE woes... Anyway I have a design that I'm currently reworking into a css/div positioned site. I'm almost done with it, but the problem I'm having is that I have 2 floated divs below a horizontal navigation bar. In IE these two floated divs are not positioning themselves directly beneath the nav bar like they do in FF. There looks to be a 3px or so gap between them. I will post screenshots for a better idea of what I'm talking about. The HTML is: Code:
<div id="container">
<div id="top"></div>
<div id="brands">
....stuff here....
</div>
<div id="slides"></div> <!-- Slides and Vert_nav are not appearing directly below brands in IE-->
<div id="vert_nav">
....stuff here....
</div>
</div>
CSS Code:
/* CSS Document */
html, body {
background: #000000;
padding: 0px;
margin: 0px;
color: #FFFFFF;
}
#container {
width: 760px;
padding: 0px;
margin: 0px;
}
#top {
width: 760px;
height: 239px;
background: url(../images/top.jpg) top left no-repeat;
}
#brands {
width: 760px;
height: 31px;
}
#slides {
width: 667px;
height: 350px;
float: left;
background: url(../images/slides.jpg) top left no-repeat;
T}
#vert_nav {
width: 93px;
height: 350px;
float: right;
}
should.jpg is how the page is supposed to look. shouldnt.jpg is how it is appearing in IE. |
|||||||