Learn VBA & Macros in 1 Week!

CSS - Css Newbie, Centering Problem And Keyword Question.

Full Excel VBA Course - Beginner to Expert

Css Newbie, Centering Problem And Keyword Question.	View Content

hi, just started with css and im having trouble centering 3 columns in a container.

Code:

<div id="container">
        <div id="content">
                <h1>Title Header</h1>
                <div id="top">
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Lorem ipsum est cu voluptatum efficiantur deterruisset, nec et solum lucilius argumentum, eum ei regione bonorum suavitate. Lorem nonummy suscipiantur sit cu, id eum soluta putant. Sale porro rationibus mei no. Vis ut primis virtute nostrud, sea an malis menandri definiebas, his agam ancillae delectus ei. Ei deleniti noluisse interesset quo, vis at quem scriptorem cotidieque. Sit an virtute gubergren expetendis, at ludus dolor accusam per.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Ferri docendi nec ut. Viris tamquam ad quo, nam admodum facilisis adolescens ut, usu meis iriure tractatos at. Ei duo eros qualisque elaboraret, paulo vivendo inciderint an duo, mea eius exerci constituam cu. Ne facer exerci appetere vis, id dicat malorum mel, an sed ferri ludus aliquyam. Ut omnis meliore praesent usu, te sit quas tempor moderatius, accusam voluptua eam at. Duo agam etiam facilisi eu, cum an aeque congue contentiones, id omnium persecuti sadipscing sit. Ne eum invidunt laboramus, eum error nostro ad.</p>
                    </div>
                    <div class="col">
                        <h2>Section Header</h2>
                        <p>Quem feugiat adipisci no sed, simul solet mandamus ut sea, no vocent corrumpit argumentum per. Cu iisque facilisi insolens est, posse nonummy adipisci vel ut. An has nibh natum dissentias, te lorem legere posidonium eam, te quodsi prompta euripidis sed. Ne noluisse petentium cum, sed utroque offendit recteque eu. Te cum petentium disputando, id duo oratio fuisset gloriatur, in sed timeam ponderum.</p>
                    </div>
                </div>
                <div class="clear"></div>
        </div>
        <div id="footer">
            <h3>Footer Header</h3>
        </div>
    </div>

css:
Code:

* {
    margin: 0;
    padding:0;
    border: 0;
}  

body {
    background-color: gray;
    text-align:center;
}

#container {
    width:  900px;
    background-color:white;
    margin: auto;
}

#content {
}

#top {
    margin: auto;
}

.col {
    margin: auto;
    width: 267px;
    float: left;
    text-align: left;
}

.clear {
    clear: both;
}

#footer {
    clear: both;
}

this obviously doesnt work. and has some serious issues. if not, coded wrong altogether.

im free to any suggestions as far as my div markups and what i should be doing to keep code efficient.

i also am wondering what the keyword 'auto' mean in css. ive searched all around and never found a good exp or example explaining what it is.

again, the css is pretty screwed. i added and deleted so much that i cant even remember what i did and getting a little frustrated in the process.

thanks in advance for the response.

Full Excel VBA Course - Beginner to Expert

Centering But Not Quite, Question

Similar Tutorials

View Content

im updating a site, and figure ill start from scratch just using nice tidy css.
im keeping all the design elements (well for the most part), just updating the code.(its pretty cluncky and haphazard as it is) Its been hashed apart by different folks working on it.

there is a design strip that's supposed to always sit on the left of the page, the menu bar and content is suposed to be centered but not cross over the design strip on the left. the design strip is styled in the body tag

any help is appreciated

william

Ie6 Centering Question

Similar Tutorials

View Content

I will preface this with the fact I am a newbie with CSS.

Site location - I would tell you where site was but against rules!

Question - site looks OK on everything except IE6 and lower. The body should be centered under the header image however it is pushed/alligned left. The CSS is below.

Can anyone see why this is happening and what a good fix would be?

Thanks

/* CSS Document */

body{
padding:0;
margin:0;}
form, div, p , ul, span, h2, h3, h4, h1,input, img{
padding:0;
margin:0;}
p{
color:#3D3B45;
font: 12px/normal Verdana, Arial, Helvetica, sans-serif}
ul{
list-style-type:none
}
img {
border:none;
}
.spacer{
font-size:0; line-height:0; clear:both;
}
/*---------------header-------------------------------*/
#main{
width:780px;
margin:0 auto 0 auto;
background:#FFFCEC;
}

#main #header{
width:780px;
height:175px;
background:#FFFCEC url(images/header.jpg) no-repeat 0 5px;
position:relative;
}

#header a.title{
position:absolute;
left:23px;
top:37px;
width:228px;
height:25px;
display:block;
}
#header h1.title a{
display:block; text-decoration:none;
}
#header ul.nav{
position:absolute;
left:566px;
top:5px;
background:url(images/nav.gif repeat-x 0 0 #FFFEE4;
width:213px;
padding:0px 0 18px 0;
margin:0;
}
#header ul.nav li{
background:url(images/h_line.gif) repeat-x left bottom;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#484848;
width:197px;
padding:5px 0 5px 0;
}
#header ul.nav li a{
background:url(images/arrow.gif) no-repeat 0 5px;
margin:0 0 0 15px;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#484848;
text-decoration:none;
padding:0 0 0 15px;
}
#header ul.nav li a:hover{
color:#000000;
}
/*------body-------*/
#main #left{
background:url(images/v_line.gif) repeat-y right top;
width:543px;
margin:0 0 0 0;
padding:15px 0px 0px 23px;
float:left;
}

#left h2.contact{
background:url(images/contact_wp.gif) no-repeat 0 0;
width:518px;
height:16px;
text-indent:-200000px;
}

#left h2.survty{
background:url(images/survty.gif) no-repeat 0 0;
width:518px;
height:32px;
text-indent:-200000px;
}

#left h2.welcome{
background:url(images/welcome_to_wp.gif) no-repeat 0 0;
width:518px;
height:35px;
text-indent:-200000px;
}

#left p.weltxt{
font: 12px/normal Verdana, Arial, Helvetica, sans-serif;
color:#3D3B45;
text-align:justify;
width:518px;
margin:0px 0 0 0;
}
#left p.weltxtsp{
font: 12px/normal Verdana, Arial, Helvetica, sans-serif;
color:#3D3B45;
text-align:justify;
width:518px;
margin:16px 10px 10px 0;
}

#left p.headingtext{
font: 12px/normal Verdana, Arial, Helvetica, sans-serif;
color:#3D3B45;
text-align:justify;
width:518px;
margin:10px 0px 10px 0;
}

#left p.weltxt a.more{
float:right;
padding:25px 0 21px 0;
color:#3D3B45;
text-decoration:none;
font-weight:bold;
}
#left p.weltxt a:hover{
color:#990000;
text-decoration:underline;
}
#left h2.rest{
background: url(images/catering.gif) no-repeat 0 0;
width:516px;
height:29px;
line-height:0;
font-size:0;
margin:20px 0 0 0;
text-indent:-200000px;
clear:both;
}
#left div.menu{
background:url(images/menu_bg.gif) repeat-x 0 0;
width:516px;
height:123px;
padding:11px 0 0 7px;
}
#left div.menu ul.brown{
float:left;
width:94px;
margin:0 8px 30px 0;
display:block;
}
ul.brown li{
background:url(images/brown.gif) no-repeat 0 8px;
padding:0 0 13px 10px;
color:#3D3B45;
}
ul.brown li a{
text-decoration:none;
color:#3D3B45;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
}
ul.brown li a:hover{
color:#990000;
text-decoration:underline;
}
#left h2.order{
background:url(images/directions2.gif) no-repeat 0 0;
width:513px;
height:26px;
text-indent:-200000px;
clear:both;
}
#left ul.image{
margin:15px 0 0 0;
width:520px;
}
#left ul.image li{
height:153px;
width:95px;
text-align:center;
margin:0 6px 0 0 ;
background:url(images/order_now.gif) no-repeat 14px 134px;
float:left;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
color:#3D3B45;
}
#left ul.image li span{
color:#B57D0A;
}
#left ul.image li a{
margin:0 0 0 0;
text-decoration:none;
color:#990000;
}
#left ul.image li a:hover{
color:#000000;
text-decoration:underline;}
/*------right----*/
#main #right{
width:200px;
background:url(images/right_bg.gif) repeat-x left bottom #FFFEE4;
float:left;
padding:25px 0 97px 13px;
}
#right h2.our{
background: url(images/location.gif) no-repeat 0 0;
width:145px;
height:15px;
text-indent:-200000px;
}
#right p.ourtxt{
font: 12px/normal Verdana, Arial, Helvetica, sans-serif;
color:#3D3B45;
text-align:justify;
width:168px;
margin:18px 0 0 0;
}
#right img{
margin:13px 0 0 0;
}
#right p.border{
width:178px;
height:5px;
margin:23px 0 0 0;
font-size:0;
line-height:0;
background:#FCF2B8;
}
#right p.ourtxt span{
color:#8F1401;
font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma;
}
#right p.ourtxt a{
color:#B57D0A;
font:bold 12px/normal "Trebuchet MS",Helvetica, sans-serif, Tahoma;
text-decoration:underline;
}
#right p.ourtxt a:hover{
color:#000000;
}
/*----footer-----*/
#footer{
width:780px;
position:relative;
background:url(images/footer_bg.gif) repeat-x 0 0 #FDF6D2 ;
clear:both;
height:168px;
}
#footer ul.foot{
position:absolute;
top:21px;
left:140px;
width:522px;
}
#footer ul.foot li{
float:left;
margin:0 14px 0 0;
color:#232323;
font:bold 11px/normal Arial, Helvetica, sans-serif, Tahoma;
}
#footer ul.foot li a{
text-decoration:none;
text-transform:uppercase;
color:#232323;
}
#footer ul.foot li a:hover{
color:#990000;
}
#footer p{
position:absolute;
top:43px;
left:324px;
text-align:center;
color:#232323;
font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma;
}

#footer p a{
color:#232323;
font:normal 11px/20px Arial, Helvetica, sans-serif, Tahoma;
text-decoration:underline;
}

#footer p a:hover{
text-decoration:none;
}

Quick Question About Centering My Site

Similar Tutorials

View Content

For IE, I have used text-align:center; to define the body tag, which allows the entire website to be centered no matter the browser window size.

That method doesn't seem to be working for Firefox, yet I have seen it done before.

A few of my divs are using absolute positioning (NOT absolute to the document, mind you, but to a parent div). Could this affect anything?

Again, it works fine in IE, but not in Firefox or Safari

If body {text-align:center;} is not a good centering tool, I would love any other suggestions.

Thanks!

Newbie Question

Similar Tutorials

View Content

Newbie Css Question

Similar Tutorials

View Content

Hello all...
it's been brought to my attention that css is a solid method to build sites.

my question is this;
would css work well for a website that displays a variety of products stored in a database and brought up via php.

the page length would vary depending on the number of products per section etc...

also, i typically generate my pages in photoshop/image ready (being a designer ahead of a developer)...are sliced images easily useable in css?

Thanks in advance!

Newbie Div-question

Similar Tutorials

View Content

I need to build web page like this. Is it possible to make it with divs. I believe it is, but I can't manage how.

Can you please help me with my little problem?
Thanks in advance!

Css Newbie Question

Similar Tutorials

View Content

hi there

i am quite new to css and i would appreciate your help. i would like to make the following thing :

my gallery contains 10 images (600/400 pixel)
i would like to make one single page that shows only one photo at a time and has (text or icon) links to the other 9 images ... of course it would be nice to have some minimalistic transition effect between the images too but if its too much for you i am mainly interested in the functionality part

if this (as so many things) has been made as a tutorial i will be glad to get a link too

thanks
zs

Newbie Question Bout <ul><li>

Similar Tutorials

View Content

hey all, ive got a newbie question here, just got a book and am trying some things but can figure out this..

i have the following
Code:

ul, li {
		display: inline;
        margin: 10;
        padding: 15;
        font-weight: bold; 
        font-style: italic;
}

    <ul>
      <li><span align="center" class="normal">Image 1</span></li>
      <li><span align="center" class="normal">Image 2</span></li>
      <li><span align="center" class="normal">Image 3</span></li>
      <li><span align="center" class="normal">Image 4 </span></li>
      <li><span align="center" class="normal">Image 5</span></li>
    </ul>

and the prints

age 1 Image 2 Image 3 Image 4 Image 5

which is good but ide like to have the following

age 1 Image 2 Image 3 Image 4 Image 5
age 1 Image 2 Image 3 Image 4 Image 5

i have tried this

Code:

    <ul>
      <li><span align="center" class="normal">Image 1</span></li>
      <li><span align="center" class="normal">Image 2</span></li>
      <li><span align="center" class="normal">Image 3</span></li>
      <li><span align="center" class="normal">Image 4 </span></li>
      <li><span align="center" class="normal">Image 5</span></li>
    </ul><br>
	    <ul>
      <li><span align="center" class="normal">Image 1a</span></li>
      <li><span align="center" class="normal">Image 2a</span></li>
      <li><span align="center" class="normal">Image 3a</span></li>
      <li><span align="center" class="normal">Image 4a </span></li>
      <li><span align="center" class="normal">Image 5a</span></li>
    </ul>

but it isn't quite right, basically i want to implement a 2 row 5 colum table using this method...is there another way of doing it??

thanks in advance

RF

Newbie 100% Height Question

Similar Tutorials

View Content

I keep seeing the same things online

"Make the body container 100%" Tried that and it still isn't working.

Site is http://www.columbusindiearts.com/indexfull.html

and here is the code
Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<style>
			body
			{
				background-color: #999999;
				height:100%;	
				width:100%;
			}
			div#outer
			{
				background-color: #FFFFFF;
				display: table;
				width:600px;
				height:100%;
				margin-left:auto;
				margin-right:auto;
			}
			
		</style>
	</head>
	<body>
		<div id="outer">
			test
		</div>
	</body>
</html>

What am I doing wrong? need it to work in IE7 and Firefox. Hosted on linux Apache

Super Newbie Question

Similar Tutorials

View Content

Could someone take a look at http://nexleads.com/projdemos/fc/test.html

and tell me why it;s fine in IE and not in firefox ??

I undertsand that firefox is right and IE isn't, but could you point me to the right direction ?

Thanks !!

Newbie Link Question

Similar Tutorials

View Content

I have one link on a web page that I want the default colors to appear on. How do I turn off A:link, A:visited, A:active, & A:hover styles for one single link? I want all the other links to remain as they are presently set with CSS. Also, I want the font attribute(s) to remain set for the link in question.

Thanks,
Thad

Newbie Pop Out Menu Question

Similar Tutorials

View Content

Hey everyone! I'm brand spankin' new to the forum, but hopefully I'll become a regular fixture here! I have a real estate agent client that I am doing SEO for, but my duties have expanded (a little outside my expertise) into the website itself.

I can't post hyperlinks (which precludes me pasting code here) so this should be an interesting task of explaining my problem!

Currently, there is a vertical navigation bar on the left side of the page that is simply an < ul > of hyperlinks. So, for example, if the list item was "Brooklyn", it would return a search of the MLS listings for the city of Brooklyn.

The client wants these hyperlinks to instead go to pop-out menus. So, the tab would still say "Brooklyn", but there would be two popout items "Brooklyn Brownstones" and "Brooklyn Apartments" for example. The original tab would no longer hyperlink to search results, but the pop outs would link to results for their specific parameters.

The current template is using <ul class="navSec"> to accomplish the nav bar.

I cannot write code (aside from HTML) from scratch. I can, however tweak and edit existing code in .css, .php, .js etc.

If there is any way you can help me, I'd appreciate it. Since I can't link the site, I can tell you it is Maui Just Listed (all one word) with the dot and then the com.

Eileen

So Like, -total Newbie At Css Question-

Similar Tutorials

View Content

As the title says, I just started learning HTML/CSS, cause our robotics group need to have a website, and all that. Sooo....first, I did a basic (photoshop) outline of how it should look like, and all. -since I can't post picture links for some reason, I'm not sure how can I explain this...-

And so, I tried my hands on CSS, and all. And well...I succeeded, and failed...ish.
Basically, I tried to make the menu. While it looked fine and all, I think I mis assigned my CSS styling, so whatever I type in the <html> is now considered part of it. I tried to id the links out, but I don't think I did it correctly, or that's the wrong way to do it. >__> . To be specific, I want to place some text around, but they start at midway down for no reason, and the same goes for images with hyperlink. So I'm assuming it's still thinking whatever I'm typing is still considered part of the "menu". So is there a way to well, isolate the menu out, or something?

Code:


</body>
</html>
<html>
<head>
<style type="text/css">

a:link,a:visited
{
display:block;
font-weight:500;
font-family:Arial;
letter-spacing: 1px;
color:#FFFFFF;
background-color:#3366cc;
width:145px;
text-align:center;
padding:6px;
text-decoration:none;
position:relative;
left:8px;
bottom:-83px;
}
a:hover,a:active
{
background-color:#99ccff;
}


</style>
</head>

<head>
<style type="text/css">
body
{
background-image:url('http://img220.imageshack.us/img220/3707/backgroundtesteq.jpg');
background-repeat:no-repeat;
}

</style>
</head>



<html>




<a href="http://facebook.com" target="_blank">ABOUT US</a>

<a href="http://google.com" target="_blank">JOINING US</a>

<a href="http://youtube.com" target="_blank">THE FRC</a>

<a href="http://tvtropes.org" target="_blank">OUR ROBOT</a>

<a href="http://fanfiction.net" target="_blank">2011</a>

<a href="http://thegame.youlostit.com" target="_blank">EVENTS</a>

<a href="http://ihotrobotics.org" target="_blank">PREVIOUS YEARS</a>

<a href="http://aischool.org" target="_blank">COMMUNITY</a>

<a href="http://questionmark.com" target="_blank">SPONSORS</a>



</html>

So uh, can anyone help tell me what's the problem? =x Thank you very much.

Newbie Css Question... Please Forgive Me If I'm Being Stupid

Similar Tutorials

View Content

Hi guys,

I'm new to CSS so pleaz forgive me if the following questions are stupid.

1/ Let's say we have in traditional HTML this:
<img src="..">French Jokes
 
<img src="..">French (Freedom) Fries
 
<img src="..">F*** Jacques Chirac
 
<img src="..">A bas la France

Now how should I write that in plain CSS? (I know I cannot use , nor tags). I suppose the tag, correct?

Something like:

<img src="..">French Jokes
 
<img src="..">French (Freedom) Fries
 
<img src="..">F*** Jacques Chirac
 
<img src="..">A bas la France

My problem with CSS is not the table design with float and so on but rather how to lay out a page combining many fonts (some on the same line), some and some 's, some font tags etc. (should I choose rather than ?, <div>, rather than , or , etc, etc ,etc)

Thank you for your help.

Cheers
Andreas

Newbie Question About Vertical-align

Similar Tutorials

View Content

hi all. i am trying to leave the world of table formatting and need a bit of help

i have a container div with two divs in it

the first div has an image in it that should sit at the bottom, like so:

_____________________
logo div

____IMG______________|

__nav div_____________|

i have the following code as my css:

#container{
margin-left:60px;
border:1px dotted black;
}
#logo{
margin-top:60px;
width: 395px;
height: 140px;
background-color:#EBEBEB;
padding: 10px 0px 0px 20px;
}
#nav{
margin-top:5px;
height: 25px;
width: 395px;
background-color:#FFFF00;
padding: 10px 0px 0px 20px;
}
img {
display: block;
border: 0;
}
img.bt {
display: block;
vertical-align: bottom;
}
and my html:

<div id="container">
<div id="logo"><img src="i/logotype.gif" class="bt"></div>
<div id="nav">Practice Areas | Firm Profile | News | Attorneys</div>
</div>

it is not vertical aligning to bottom. can anyone help me? i am testing on mac ie5 and safari for super @ssyness!! but i want it to work everywhere if possible.

i am sure it is something simple, but im not sure what it is

thanks a lot everyone.

Another Newbie Question: Aligning Graphics

Similar Tutorials

View Content

Hi,

First, before you get on my case, I'm using a table, because that's what the teacher wanted. And as I've never worked with CSS, let alone divs, I was more comfortable with it anyhow.

Okay, the question I have is probably very dumb, and the answer very simple, but I'm not getting it. I'm just trying to get an image aligned to the top of a cell.

http://esdcar.org/web/test/templatem2.html

I could use valign in the cell tag, and it almost works (but it doesn't quite align at the top, about 5px short), but I'd like to do it with CSS, especially as I'm going to have a different header image on every page.

The cell has its own id of contentm. Inside the img src tag, I put class="pageheader." In the stylesheet, I gave .pageheader an attribute of vertical-align: top.

But, it's not working. What am I doing wrong?

Newbie Positioning Question - Right Align Sidebar

Similar Tutorials

View Content

Hello and thanks for your patience.

I have a page here that is having a positioning problem for "sidebar2".

I can't seem to get it to stick to that right side of the page in a fixed position.

Code:

@charset "UTF-8";
* {
	margin: 0px;
	padding: 0px;
}
body {
	text-align: center;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 0.8em;
	color: #32240C;
	line-height: 1.5em;
}
a:link {
	color:#C42617;
}
a:hover {
	color: #687ABB;
}
a:visited {
	color:#C42617;
}
a:active {
	color: #687ABB;
}
h2 {
	font-size: 1.2em;
	line-height: 2.3em;
	color: #34260b;
	border-left-width: thin;
	border-left-style: double;
	border-left-color: #34260b;
	text-indent: 10px;
	background-repeat: no-repeat;
	}
	
#clear {
	clear: both;
}

#welcome {
	color: #325084;
	float: left;
	width: 590px;
	text-align: left;
	padding: 15px;
	border: thin solid #D0DAEF;
	background-color: #FFF;
	margin-left: 25px;
	margin-right: 5px;
}
#welcome h2 {	
	padding-left: 2px;
}
#welcome p {
	padding-left: 2px;

}
input {
width: 185px;
}
/* reset width for non-text inputs */
input.radio, input.checkbox, input.submit, input.dropdown {
width:auto;
}
/* display labels next to form elements add a class for when you want them to stack */
label {
	float: left;
	margin-right: 1em;
	}
label.top {
	display: block;
	float: none;
	}

.sidebar2 {
	position:absolute;
	top:182px;
	right: 150px;
	text-align:left;
	width: 255px;
	padding-top: 0px;
	padding-right: 0;
	padding-bottom: 10px;
	padding-left: 10px;
	margin-top: 0px;
}
.sidebarheader {
	color:#D75500;
	padding-bottom: 5px;
	font-weight: bold;
	font-style: italic;
	font-size: 16px;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

img {
    border: none;
} 
/*- Menu 3--------------------------- */
	
#menu3 {
	width: 250px;
	border-style: solid solid none solid;
	border-color: #BCD2E6;
	border-size: 1px;
	border-width: 1px;
	margin-top: 0px;
	margin-right: 10px;
	margin-bottom: 10px;
	margin-left: 0px;
	font-size: 12px;
	}
	
#menu3 li a {
	height: 32px;
  	voice-family: "\"}\""; 
  	voice-family: inherit;
  	height: 24px;
	text-decoration: none;
	}	
	
#menu3 li a:link, #menu3 li a:visited {
	color: #325084;
	display: block;
	background:  url(menu3.gif);
	padding: 8px 0 0 10px;
	}
	
#menu3 li a:hover {
	color: #627EB7;
	background:  url(menu3.gif) 0 -32px;
	padding: 8px 0 0 10px;
	}
#affiliates {
	color: #325084;
	float: left;
	width: 580px;
	text-align: left;
	margin-left: 25px;
	margin-right: 15px;
}
#affiliates table td {
	padding: 15px;
}

Can you tell me how format that div?

Centering Div Problem

Similar Tutorials

View Content

I have a lblock, mblock and rblock div tags inside the content div tag. I am trying to center block tags so there will be 10px free space on each side of content div tag.

You can check it at:
http://www.refinethetaste.com/html/

PHP Code:
#content    { width:796px; margin: auto;}
#lblock    { width:198px; float:left; }
#mblock    { width:200px; float:left; margin-left:2px;}
#rblock    { width:375px; float:left; margin-left:1px;}

Centering Problem

Similar Tutorials

View Content

I'm having a problem centering the table so that its centered in the browser. Below is the code.

Code:

<html>
<head>
<title>Untitled-3</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
<!--

#Table_01 {
	position:absolute;
	left:0px;
	top:0px;
	width:1196px;
	height:892px;
}

#TopAdLeft {
	position:absolute;
	left:0px;
	top:0px;
	width:140px;
	height:415px;
}

#LeftSpace {
	position:absolute;
	left:140px;
	top:0px;
	width:8px;
	height:840px;
}

#LogoSpace {
	position:absolute;
	left:148px;
	top:0px;
	width:900px;
	height:177px;
}

#index-04 {
	position:absolute;
	left:1048px;
	top:0px;
	width:148px;
	height:1px;
}

#RightSpace {
	position:absolute;
	left:1048px;
	top:1px;
	width:8px;
	height:839px;
}

#TopAdRight {
	position:absolute;
	left:1056px;
	top:1px;
	width:140px;
	height:415px;
}

#CenterMiddleSpace {
	position:absolute;
	left:148px;
	top:177px;
	width:900px;
	height:5px;
}

#CalendarSpace {
	position:absolute;
	left:148px;
	top:182px;
	width:900px;
	height:658px;
}

#LeftMiddleSpace {
	position:absolute;
	left:0px;
	top:416px;
	width:140px;
	height:9px;
}

#RightMiddleSpace {
	position:absolute;
	left:1056px;
	top:416px;
	width:140px;
	height:9px;
}

#BottomAdLeft {
	position:absolute;
	left:0px;
	top:425px;
	width:140px;
	height:415px;
}

#BottomAdRight {
	position:absolute;
	left:1056px;
	top:425px;
	width:140px;
	height:415px;
}

#BottomLeftSpace {
	position:absolute;
	left:0px;
	top:840px;
	width:148px;
	height:52px;
}

#EmailSpace {
	position:absolute;
	left:148px;
	top:840px;
	width:900px;
	height:52px;
}

#BottomRightSpace {
	position:absolute;
	left:1048px;
	top:840px;
	width:148px;
	height:52px;
}

-->
</style>
<!-- End ImageReady Styles -->
</head>
<body style="background-color:#000000; margin-top: 0px; margin-bottom: 0px; margin-left: 0px; margin-right: 0px; ">
<!-- ImageReady Slices (Untitled-3) -->
<div id="Table_01">
	<div id="TopAdLeft">
		<img src="images/LeftTopAd.jpg" width="140" height="415" alt="">	</div>
	<div id="LeftSpace">
		<img src="images/LeftSpace.jpg" width="8" height="840" alt="">
	</div>
	<div id="LogoSpace">
		<img src="images/logo.jpg" width="900" height="175" alt="">	</div>
	<div id="index-04">
		<img src="images/index_04.jpg" width="148" height="1" alt="">
	</div>
	<div id="RightSpace">
		<img src="images/RightSpace.jpg" width="8" height="839" alt="">
	</div>
	<div id="TopAdRight">
		<img src="images/TopAdRight.jpg" width="140" height="415" alt="">
	</div>
	<div id="CenterMiddleSpace">
		<img src="images/CenterMiddleSpace.jpg" width="900" height="5" alt="">
	</div>
	<div id="CalendarSpace">
		<iframe name="I1" id="I1" title="Hollywood Drink Specials" src="http://www.calendarwiz.com/" align="center" frameborder="0" height="658" width="900"></iframe>
	</div>
	<div id="LeftMiddleSpace">
		<img src="images/LeftMiddleSpace.jpg" width="140" height="9" alt="">
	</div>
	<div id="RightMiddleSpace">
		<img src="images/RightMiddleSpace.jpg" width="140" height="9" alt="">
	</div>
	<div id="BottomAdLeft">
		<img src="images/BottomAdLeft.jpg" width="140" height="415" alt="">
	</div>
	<div id="BottomAdRight">
		<img src="images/hob.jpg" width="140" height="415" alt="">	</div>
	<div id="BottomLeftSpace">
		<img src="images/BottomLeftSpace.jpg" width="148" height="52" alt="">
	</div>
	<div id="EmailSpace">
		<img src="images/EmailSpace.jpg" width="900" height="52" alt="">
	</div>
	<div id="BottomRightSpace">
		<img src="images/BottomRightSpace.jpg" width="148" height="52" alt="">
	</div>
</div>
</body>
</html>

Problem Centering With Css

Similar Tutorials

View Content

I have been learning css and have got my page together but i want my page to be centered and i just cant seem to get it to move.It is stuck close to the left and I have tried to mess around with it with no joy.Can anyone help me please.Here is the css I have used:-

DIV.wrap_page {
PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; WIDTH: 772px; PADDING-TOP: 8px
}
DIV.wrap_page2 {
PADDING-RIGHT: 9px; PADDING-LEFT: 9px; BACKGROUND: #b4ad9b repeat-x; PADDING-BOTTOM: 8px; PADDING-TOP: 8px; POSITION: relative
}

Any help would be very appreciated many thanks,stevo!