Learn VBA & Macros in 1 Week!

CSS - Centering Entire Page + Defining Page Width

Full Excel VBA Course - Beginner to Expert

Centering Entire Page + Defining Page Width	View Content

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.

Full Excel VBA Course - Beginner to Expert

Width: 100% Not Filling Entire Page

Similar Tutorials

View Content

I'm using this html:

Code:

<div id="titlebox">
      <div id="title">
        <img src="images/title.png" alt="Garden Pub & Grille" />.
      </div>
</div>

with this css:
Code:

html, body {
  font-family: Century Gothic;
  text-align: center;
  background-color: #DEF9FA;
  height: 100%;
  min-width: 100%;
  margin: 0;
  padding: 0;
  top: 0px;
  position: relative;
}

body > #container {
  height: auto;
  min-height: 100%;
  min-width: 100%;
}

#titlebox div  {
  background-color: black;
  position: absolute;
  min-width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  left: 0px;
  top: 0px;
  height: 64px;
  z-index: 1000;
}

#title div {
  width: 1000px;
  background-color: black;
}

Trying to get a black bar across the top with an image centered in it. Problem is, when the page is smaller than the content and there is a horizontal scrollbar, the black bar only goes to the edge of the window, but when you scroll right, it dissapears and is cut off. I have a similar setup on the bottom of the page that works correctly (a table with links is inside that one). Why is this not working? Thanks.

URL
Image doesn't seem to be showing up, link:
http://img15.imageshack.us/img15/5697/29946518.png

Help Defining Page Border...not Right In Ff/netscape

Similar Tutorials

View Content

Need some help defining a border around my index page. It shows up and works fine in IE but when I switch to FF/Netsxcape the page border is short of the content.

Here is my page:

[Not an actual business...just a learning project]

My Home Page

Here is My CSS file:

My CSS File

Now I ran both my HTML and CSS through the W3C Validators and all comes back perfect.

(I know there is some small "clean-up" issues in my code, but I don't think it's relevant to this border issue...Maybe it is?)

Anywhooo, when this page is displayed in FF or Netscape the bottom 1/3 of page content runs below my border...but shows up fine in IE.

If there is a better way, (than defining the whole <BODY> as a <DIV> element) please enlighten me!

Thanks for helping me learn...(in advance)

PWD

Entire Page Height

Similar Tutorials

View Content

Hi, I'm trying to make a div in my website take up the entire height of the page, or more if the page is longer.
However when I've managed to get the div the full height of the page, the contents leave the div when it's longer than the page.
I want the div to stretch, but be at least as long as the page.

Here is a simplification of my code as an example:
Code:

<html>
<head>
<style>
.contentdiv{
height: 100%;
width: 758px;
top: 0px;
position: relative;
border: 1px solid #89a9c7;
padding-top: 0px;
padding-bottom: 0px;
border-spacing: 5px;
bottom: auto;
}

.footerdiv
{
position: absolute;
bottom: 0px;
background-color: blue;
width: 100%;
height: 20px;
}
</style>
</head>
<body>
<div class="contentdiv">
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />
asdsadsadasd<br />

<div class="footerdiv">a</div>
</div>
</body>
</html>

Div's Not Stretching The Entire Height Of My Page

Similar Tutorials

View Content

Hello all. I am working on a sign on page that uses two divs nested in a table. I have a header above them, and a footer below, and I want the divs (which have a nice gradient background) to stretch all the way down to the footer, regardless of the amount of content. In a simplified format, I have:

Code:

<table cellpadding="0" cellspacing="0" style="height:100%; padding-top:20px; padding-bottom:20px; width:976px;" border="0">
     <tr>
          <td class="wrapper1" id="wrapper1" valign="top">
               <table cellpadding="0" cellspacing="0" border="0" height="100%">
                    <tr>
                         <td valign="top" width="100%" style="border:3px dotted black; height:100%;">
                              <table style="width:100%; height:100%;" border="1">
                                   <tr>
                                        <td valign="top" style="height:100%;">
                                             <xsl:call-template name="bodyContainerTemplate"/>
                                         </td>
                                   </tr>
                               </table> 
                         </td>
                    </tr>
               </table>
          </td>
     </tr>
</table>

The tables stretch just fine. Where I am running into problems is in my bodyContainerTemplate. That template looks like:

Code:

<!--bodyContainerTemplate-->

<div class="bgcolor1" style="width:976px; height:100%; border:2px solid;">
     <div class="login_bg" style="height:100%;" id="login_bg">
          <table width="100%" height="100%" border="0" style="position:relative;">
               <tr>
                    <td>
                           My content goes here
                    </td>
               </tr>
          </table>

For some reason, once it gets into the template, height:100%; doesn't work anymore, and the divs simply stretch big enough to make room for the content. What styles am I missing for those divs to be 100%?

I have messed with:
min-height
height:auto, relative, etc.
margin:0
and a few other things, none of which are seeming to make a difference.

Thanks!

One Css For Entire Site In Each Page Individual Css

Similar Tutorials

View Content

For caching purposes and/or maximum performance would it be more beneficial to have the same large css document referenced in every page on my site or to have a much smaller different one referenced for each page in my site.

Entire Div Column Overlapping Bottom Of Page

Similar Tutorials

View Content

example is at
http://bluewebpages.com/arch.php

I am fairly proficient at coding css and think it's about time to clean(organize) it all up, even though it does validate. Anyway I was wondering if someone could please help me with the overlap problem for the right (smaller) column. I want the entire main content of the page, the part before the footer, to extend down when there is more content to side, not just the left/main content side.

EDIT:
Fixed .. thanks! The `clear:both;` was what it needed

Ajax Loading Message Image Causes Entire Page Content To Shift Down!

Similar Tutorials

View Content

Hi all,
I have written a page with jsp and ajax to dynamically load page contents. I also added a hidden "processing.." message image with the following code:

Code:

<img src="<%=IMAGE_BASE_URL%>/processing-img.gif" id="processing" style="display:none;z-index:2;position:relative;top:250;right:-250">

this img tag was placed right after the <body> tag.

When the user clicks on a link, I turned this css property to display:block so that it shows in the middle of the page. But strangely, when it is showing the processing message image, the entire page content after the <img> tag was shifted down a bit and showing an empty row!

Does anybody know what's wrong with it? I've tried to change the display to inline using javascript but it still won't help...

Any help would be appreciated..thanks..

Help Centering Entire Webpage

Similar Tutorials

View Content

I know it's probably something simple, but I'm having trouble centering my web page in CSS.

I want to center it no matter what resolution a visitor has their monitor set to or the size of their monitor.

I've tried the following to no avail:

Code:

margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;

Any suggestions?

How To Cover The Entire Width Of The Screen?

Similar Tutorials

View Content

hi,

i m trying to design a page with a logo at the top.just like this site.

http://richgirlstore.com/xcart/home.php

but i want the logo to be displayed in a way that it covers the entire width of the browser window when a user opens the page.the screen sizes are different depending on the type of monitor used by people.so how can i fix this problem.thanks...

Getting Footer To Extend Entire Width Of Browser

Similar Tutorials

View Content

Hello, I have a header which extends to 100% the width of the browser. I am trying to get the footer to do the same but it's only about 90% the browser's width.
Here's my CSS for the footer: Code:

#footer { 
	width:100%;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 0 0 -38; /* the auto margins (in conjunction with a width) center the page */
	border: 0px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
} 

#footer_container { 
	width:950px;  /* this will create a container 80% of the browser width */
	background: #327ec1;
	margin: 0 auto; /* the auto margins (in conjunction with a width) center the page */
	border: 0 px;
	text-align: left; /* this overrides the text-align: center on the body element. */
	height:120px;
}

the site ishere

any ideas?
thanks

Please Help Centering Page

Similar Tutorials

View Content

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')">

<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>

</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">

</style>[code]

Centering Div On Page

Similar Tutorials

View Content

Centering A Page With Css?

Similar Tutorials

View Content

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!

Centering Page

Similar Tutorials

View Content

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%;

Need Help Covering Css Horizontal Menu To The Entire Width Of Table...

Similar Tutorials

View Content

Hi,

Here is my problem: I have a horizontal css menu using a list. It is embedded within a table <td> element. The menu is floating to the left as I suppose is inteneded by the css code, but I want the whole list to be centered with respect to the <td> element. I put <td align=center> but that does not center the whole list. It is still flushed against the left side of the <td> element. Also, I want the entire list to cover the entire width of the <table>. How do I accomplish these tasks? I have searched on google without any success. thank you for your help in advance.

Here is the CSS code and Html code for your reference:

CSS:

Code:


<style type="text/css">

.horizontalcssmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.horizontalcssmenu ul li{
position: relative;
display: inline;
float: left;


}

/*Top level menu link items style*/
.horizontalcssmenu ul li a{
display: block;
width: 80px; /*Width of top level menu link items*/
#width: 95px;
_width: 95px;
padding: 2px 8px;
border: 0px solid #202020;
border-left-width: 0;
border-right-width: 0;
text-decoration: none;
/*background: url(http://asc2009.dreamhosters.com/menubg.gif) center center repeat-x;*/
color: white;
font: bold 13px Tahoma;
}


.horizontalcssmenu ul li a:visited{
color:white;
#color:white;
/*background: url(menubgover.gif) center center repeat-x;*/
}

.horizontalcssmenu ul li a:hover{
background: yellow;
color: blue;
#color: blue;
/*background: url(menubgover.gif) center center repeat-x;*/
}

HTML Code:

Code:

<table width="900" height="20" border="0" cellpadding="0" cellspacing="0" style="border-bottom:1px solid black;">
	<tr>

		<td background="menubg.jpg" align="center">
		
<div class="horizontalcssmenu" align="center">
<ul>

<li><a href="default.htm">Home</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">About Us</a></li> 


<li style="border-left:1px solid black"><a href="default.htm" onClick="return clickreturnvalue()" onMouseover="dropdownmenu(this, event, menu1, '150px')" onMouseout="delayhidemenu()">Products</a></li> 

<li style="border-left:1px solid black"><a href="default.htm">Downloads</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Service</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Requests</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">References</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">What's New</a></li> 
<li style="border-left:1px solid black"><a href="default.htm">Contact Us</a></li>

</ul>
</div>
		</td>
	</tr>
</table>

Please visit my site where the menu is currently hosted. the url is http://asc2009.dreamhosters.com You will see my problem. You will notice when you hover your mouse over the last item in the menu, you will notice that the hover color does not go the whole way to the end of the td element. the list is flush to the left of the td element I need it to cover the whole width of the table. any help would be very much appreciated.

Centering The Page Layout

Similar Tutorials

View Content

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!

Centering A Jpeg In Web Page... Css ?

Similar Tutorials

View Content

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>&nbsp;</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>

Centering The Whole Page, 1px Error

Similar Tutorials

View Content

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!!!!

Problem With Centering The Page

Similar Tutorials

View Content

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.

Centering A Div Table On Top Of A Page?

Similar Tutorials

View Content

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.