Learn VBA & Macros in 1 Week!

HTML - Centering Graphic

Full Excel VBA Course - Beginner to Expert

Centering Graphic	View Content

I'm attempting to center the logo / table located at the top of the page. I tried several various forms of alignment commands, all with no success. Any help is appreciated.

Site: http://blog.camhabib.com

Full Excel VBA Course - Beginner to Expert

Ie7 Graphic Glitch

Similar Tutorials

View Content

I'm starting to develop a (rudimentary) website for my sis. I've noticed a little graphic glitch in IE only. What's the best forum to post my question? HTML? CSS?

Here's the page in question:

http://www.coldvalleyfarm.com/sheep.htm

In IE only, at the bottom of the left row of pictures, there's a small white square with a white dot in the middle. Any idea what could be causing that? I've validated the pages, but I know IE isn't always compliant. This is with IE 7.0, btw.

Thanks in advance!

Automaric Graphic Changes By Date

Similar Tutorials

View Content

OK what I need to do is find a way to make a specific graphic change automatically on a certain date and change again on another date.

A client of mine is having me design his logo so that the logo resembles the season eg:

On Christmas his logo would include a Santa Clause and on Halloween there would be a pumpkin within his logo etc...

You get the idea... I want to design each logo and have them change at the appropriate time of year.

Thank you all in advance

Changing Site Graphic

Similar Tutorials

View Content

On some websites where you type in the link and you are on the site in front of the link where normally E for the internet they change it to an image. Here is an example http://www.bf2player.com click on the link and look at the address bar.

HOW CAN I DO THAT. Please Help MCBGamer.

Odd Problem / Graphic Distorted

Similar Tutorials

View Content

In Opera, IE 8, and Chrome, a single graphic image on my webpage apprears distorted.
It looks fine in Firefox.

The website is the main page of cousincouples.com and the problem is the yellow pixels/yellow line at the very bottom left of the page (Left of the copyright information). One of the graphics appears to wrap within the cell!

If anyone could point me in the right direction, I would appreciate it.

Problem With Graphic Alignement

Similar Tutorials

View Content

Hi

Am here to look for some help about a problem I can't seem to "overcome" in the layout of my website.

I put the background in bright pink so the problem kinda "jumps" to the eye. It is available here :

http://www.guitarbattle.fr/gb_test.html

or you can also copy and paste this code in an HTML document and see how it behaves (this is a full copy of the source code of that page linked above) :

HTML Code:

<HTML>

<HEAD>
	<TITLE>Guitar Battle</TITLE>
</HEAD>
<body  bgcolor=ff00ff>
	<br><br>
<center>
<table CELLSPACING="0" CELLPADDINg="0" BORDER="0">
	<tr>	
			<TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_haut.jpg"> </TD>
	</tr>		
	<tr>
			<TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_gauche.jpg"> </TD>
			<TD> 			  <img src="http://www.guitarbattle.fr/interface_situ.jpg"> </TD>
			<TD> 			  <img src="http://www.guitarbattle.fr/interface_prin.jpg"> </TD>
			<TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_video.jpg"> </TD>
			<TD rowspan="2"> <img src="http://www.guitarbattle.fr/interface_droite.jpg"> </TD>
	</tr>		
	<tr>
			<TD colspan="2"> <img src="http://www.guitarbattle.fr/interface_part.jpg"> </TD>
	</tr>	
	<tr>	
			<TD colspan="5"> <img src="http://www.guitarbattle.fr/interface_bas.jpg"> </TD>
	</tr>
</table>
</center>
</HTML>

I hope someone can tell me what mistake I did that makes the various parts not well aligned and loosing 1 to 3 pixels here and there.

Thanks a lot !

Help! Div Containing Graphic Not Aligning Correctly!

Similar Tutorials

View Content

Hi guys,

I'm very new here - literally just searched the web for help on this problem which has been plaguing me for some time...

I'll post the code below, but basically, the div_id centre_image, the body text and the right hand side graphics are correctly formatted just in the wrong place! I need them to be to the right hand side of the Left hand menu... I'm hoping I make sense!? There is CSS as well but not sure whether or not this is a CSS issue or html!

I would be really greatful if someone could help me out. I'm fairly new to website design but am trying my best using various tutorials on the web and compile something half decent!

Thanks in advance,

Graham.

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>Double Glazing | Windows | Doors | Conservatories | Rooftrim</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>

<div id="header">
<div id="email_header"><a href=" mailto: xxxx@zurichtitanium.com">xxxx@zurichtitanium.com</a></div>
</div>

<div id="blue_banner">

  <h1>Double Glazing Worcester</h1>
</div>
<div class="cleaner"></div>

<div id="menu_wrap">


<div id="tabs">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Windows</a></li>
<li><a href="#">Doors</a></li>

<li><a href="#">Conservatories</a></li>
<li><a href="#">Rooftrim</a></li>
<li><a href="#">Get a Quote</a></li>
</ul>
</div>

</div>

<div id="holder">
<div id="lhs_menu_wrap">

<div id="windows_menu">
<ul>
<li><a href="#">Sleek White</a></li>
<li><a href="#">Woodgrain Collection</a></li>
<li><a href="#">Specialist Finishes</a></li>
<li><a href="#">Security</a></li>
<li><a href="#">Energy Saving</a></li>
<li><a href="#">Maintenance Free</a></li>
<li><a href="#">The Logical Choice</a></li>
</ul>
</div></div>  
    
    
    
<div id="centre_image">
	<div id="centre_LHS_pic"></div>
    <div id="centre_RHS_pic"></div>
    <div id="getquote_button"><a href="#">Get a Free Quote...</a></div>
</div>


<div id="RHS_Content">

<div id="rhs_window_offer">Double Glazed Windows...<div id="win_text1"><a href="#">Get Quote</a></div></div>
<div id="rhs_cons_offer">Your New Conservatory...<div id="win_text2"><a href="#">Get Quote</a></div></div>
<div id="rhs_trim_offer">Transform Your Roofline...<div id="win_text3"><a href="#">Get Quote</a></div></div>

<div class="guarantee_logo"></div>
</div>


<div id="body_text">
  If you are considering enhancing your home, you owe it to yourself to  get a professional consultation. At Zurich Titanium we pride ourselves  on giving you exactly what you want. Whether it be treating yourself and your home to new <h2>double glazing windows</h2>, <h2>doors</h2> 
  or a <h2>conservatory</h2>, invite us to show you what we can do. We guarantee you won't be disappointed.
  <p>We offer a fully customisable suite of Home Improvement Products, tailor made for your home, to ensure you get what you want and need, and not wasting money on features you'll never use. With our own highly skilled installers, we are able to keep quality control in house, enabling us to give, as standard, the unrivalled <b>Zurich Titanium 10 Year Guarantee</b> on all work undertaken.</p> <p>Our bespoke quotation service, available totally free of charge, will allow you to design the windows or doors, conservatory or roofline, most suited to your home, give you an accurate assessment of the work involved, and of course an exact price.</p>

<div id="body_footer"></div>
</div>

</div>

<div id="footer">Zurich Titanium Home Enhancements Ltd, Registered in England and Wales xxxxxxxx. xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</div>


</body>
</html>

And CSS to follow... It may be somewhat rough around the edges; different hints and tips put together from across the web!

Thanks so far Michael...

Graphic Logo Positioning Problems

Similar Tutorials

View Content

Hey guys I'm having a terrible time getting some graphic logos to layout. I know the coloring right now is not looking up to par either so don't judge me too bad I have a header div with a nav div inside and then a content div below this with a swf slide show inside. Basically inside the header div I have 5 graphics and then a nav div nested inside below that. My problem is that I want 2 of the logos aligned to the left and close to centered up/down inside the header div, then I want the main masthead logo centered in the middle of the header div up/down and left/right, and finally I want the other 2 logos floated right and centered up/down. I'm trying various methods and the best I have so far shows the middle masthead logo not correctly centered, and the 2 left logos floating left, but the far 2 right logos do not show up at all. The page is located at http://www.atlanta-web.com and I'll past all of my code below.

index.html snippet
Code:

<body  bgcolor="#FFFFFF"  text="#000000" link="#0000FF" vlink="#000080"  alink="#800000" leftmargin="0"  topmargin="5" marginleft="0" margintop="5">

<script type="text/javascript" src="fsmenu_commented.js"></script>
<script type="text/javascript" src="menuset.js"></script>

<link rel="stylesheet" type="text/css" href="listmenu_h.css" />
<link rel="stylesheet" type="text/css" href="listmenu_h_settings.css" />

<style type="text/css">

#navitoolbarcontainer a {
	line-height: 16px;
	}

</style>

<div id="header">
<img class="award1" src="nahb.gif" /><img class="award2" src="gahomebuilders.gif" />
<center><img src="Jhomes.jpg" /></center>
<img class="award3" src="southernlivingmember_sm.gif" /><img class="award4" src="lobb.gif" />


<!-- START TOP TOOLBAR -->
<!--<div id="heightcontainer"></div>-->

<div style="width: 100%;" id="navitoolbarcontainer">
<div style="margin: 0px; padding: 0px; width: 100%;">
		  <div id="navitile" style="width: 100%;">
				<ul class="menulist" id="listMenuRoot" style="height:22px;">

				 <li style="margin-top:0px;">
				  <a class="gt" href="index.html" style="font-size: 10px; font-family: arial,verdana,helvetica; text-decoration:none;"> <b>Jeffery Homes Inc.</b> </a>
				  <ul id="listMenu-id-1">

.
.
.
     NAV Bar HTML Cut for space sake

.
.
.

		<div style="margin-top: 0px;" id="lightgrey">

		</div>
	</div>
	</div>
	</div>


</div>

<div id="content" style="width: 100%; background-color: #6B6637">

<div id="slideshow">
<object width="600" height="350">
<param name="movie" value="slideshow1.swf" wmode="transparent">
<embed src="slideshow1.swf" width="600" height="350" wmode="transparent">
</embed>
</object>
<br />
<br />
</div>

</div>


<!-- END TOP TOOLBAR -->

css file1
Code:

@charset "UTF-8"; 

a.gt{ text-decoration:none}

a.gt:hover{text-decoration:none}

a.gt:visited{text-decoration:none}

a.gt:link{text-decoration:none}

a.gt:active{text-decoration:none}

#header { margin: 0px; padding: 0px; width:100%; min-width:830px; width:100%; background-color: #AFAB73; position: absolute; left: 0px; top:0px;  font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 0}

.award1 { float:left }

.award2 { float:left }

.award3 { float: right }

.award4 { float: right }

#navitile{width:820px; margin-left:0px; height:22px; background-repeat:repeat-x; position:absolute; color: #F2FFE4; left:0px; top: 0px; font-family:arial,verdana,helvetica; font-size:8px; white-space:nowrap; }

#navtile a{ color: #F2FFE4 }

#navitoolbarcontainer{width:100%; min-width:830px; width:100%; height:22px; position:absolute; top: 100px; left:0px; font-family:arial,verdana,helvetica; font-size:8px; background-image:url('background_end_fixed.png'); background-repeat:repeat-x; white-space:nowrap; margin:0px; padding:0px; z-index:1000}

#navitoolbarcontainer a{color: #F2FFE4}

#content {margin: 0px; padding: 0px; width:100%; min-width:830px; width:expression('100%'); position: absolute; left: 0px; top: 122px; font-family: arial, verdana, helvetica; font-size: 8px; white-space: nowrap; z-index: 1}

#slideshow {
margin: 0 auto;
position: relative;
top: 30px;
height: 480px;
width: 600px;
}

#heightcontainer{position:relative; height:17px; width:99%; background:transparent;}

#globalform{padding:0px; margin:0px}

#lightgrey{text-align:left; color: #F2FFE4; text-indent:5px;     background-image:url('background_end_fixed.png')}

#lightgrey .inputglobal{font-size:9px; font-size:expression('8px'); text-align:left; margin-top:0px; margin-left:2px;  background-repeat:no-repeat}

#lightgrey .inputglobal:hover{font-size:9px; text-align:left; margin-top:0px; background-color:#ccc}

#lightgrey a{font-family:sans-serif; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; top:1px; top:expression('-2px'); position:relative}

#lightgrey a:link{text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px}

#lightgrey a:visited{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}

#lightgrey a:active{display:inline; text-decoration:none; color: #F2FFE4; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}

#lightgrey a:hover{display:inline; text-decoration:none; color:#fcf2ca; text-decoration:none; FONT-SIZE:10px; padding:0px; margin:0px}

A lot of this css is for the menus that i found on a site and have highly modifed, but I've used class/id's for most of everything so it should be easy to see what is what.

Thanks for any help that you all can provide. This site has been a godsend for getting help.

Sliced Graphic / Navigation Improperly Displayed

Similar Tutorials

View Content

I created a sliced image / navigation in Fireworks CS5 and implemented it on a page with success. I then attempted to implement the same code to the header of a WordPress theme, giving me some issues. The actions work correctly, but the images are significantly lower, blocking a portion of the remaining page, and not correctly aligned with one another. I checked for conflicts in the CSS, as well as other simple errors, but couldn't really find what the cause was. Any suggestions?

Homepage (correctly displayed graphic): http://camhabib.com
WordPress (incorrectly displayed): http://blog.camhabib.com

Changing Graphic Links To Text Links - How Hard Would It Be?

Similar Tutorials

View Content

Hi everyone, I hope I have posted this in the right area. This is my first time posting here. I currently have my main pages listed at the top of my site as graphics (see fussybaby.ca). I would like to potentially remove these graphics and use text links instead - I had the graphics designed for me, so I can't just go in and make new ones, however I'd like to change/rearrange the links and add some new ones.

So my question is: How hard is this to do? Is this something I need to hire someone to do for me?

Thanks in advance for any advice!

Help With Centering

Similar Tutorials

View Content

I have a website and I used css to make my Div tags set to absolute. The only problem is that when you open it in a browser, the browser won't open big enough and wil block out some of my content (forcing me to scroll to the left or maximize the borswer to see the whole page) . How do i make the divs always appear in the center of the page always. Also how do i make it so when you change the siz of the browser my divs will change with it to remain in the center. I tried doing the margin auto trick but it still doesn't work. Here is my stle sheet code and the web page html code... any help would be appreciated.
/* CSS Document */

#wrapper {margin-right: auto;
margin-left: auto;
margin-top: 20px;
margin-bottom: 0;;}

body {
margin : 0px 0px 0px 0px;
background-color: #E1AE5A;
background-repeat: repeat;
}
#top {
position: absolute;
height: 48px;
width: 900px;
left: 250px;
top:3px;
border:0px none;
z-index:1;
color: #000033;
}

#main {
position: absolute;
top: 542px;
left: 328px;
z-index:5;
width: 745px;
color: #FFFFFF;
height: 28px;
}

#flash {
position: absolute;
top: 130px;
left: 299px;
z-index:4;
width: 803px;
color: #FFFFFF;
height: 419px;
}

.style1 {

font-family: Eurostile;
color: #FFFFFF;
}

.style2 {
font-family: Helvetica;
}
#Layer1 {
position:absolute;
left:300px;
top:121px;
width:804px;
height:540px;
z-index:3;
background-color: #000033;
border: medium solid #FFFFFF;
}

.style3 {
font-family: Eurostile;
}

#Layer2 {
position:absolute;
left:111px;
top:170px;
width:71px;
height:124px;
z-index:4;
}

.style4 {color: #000000}

#Layer3 {
position:absolute;
left:482px;
top:72px;
width:37px;
height:56px;
z-index:2;
}
#Layer4 {
position:absolute;
left:652px;
top:72px;
width:24px;
height:31px;
z-index:2;
}
#Layer5 {
position:absolute;
left:822px;
top:72px;
width:84px;
height:58px;
z-index:2;
}
#Layer6 {
position:absolute;
left:992px;
top:72px;
width:95px;
height:50px;
z-index:2;
}

#Layer7 {
position:absolute;
left:331px;
top:139px;
width:750px;
height:446px;
z-index:9;
}

#Layer11 {
position:absolute;
left:319px;
top:72px;
width:12px;
height:10px;
z-index: 2;
}

#Layer8 {
position:absolute;
left:302px;
top:98px;
width:791px;
height:48px;
z-index:10;
}
#Layer9 {
position:absolute;
left:299px;
top:40px;
width:32px;
height:20px;
z-index:0;
}
#Layer10 {
position:absolute;
left:1016px;
top:595px;
width:24px;
height:26px;
z-index:10;
}

and the html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" land="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="styles.css" rel="stylesheet" type="text/css">

</head>
<body>
<div id="top">
<h1 align="center" class="style3 style4">on The side, Inc. </h1>
<p align="center" class="style3"> </p>
</div>

<div class="style2 style3" id="main">on The side is a value added promotional marketing organization focused on working with companies to make them more market-facing. We take time to learn about our clients' business model, industry and previous marketing agendas before taking a next step OR leap - if necessary.</div>
<div id="Layer1"></div>
<div id="flash" align="center">
<object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="425" height="400">
<param name="movie" value="main.swf">
<param name="quality" value="high">
<embed src="main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="425" height="400"></embed>
</object>
</div>
<div id="Layer3"><a href="who.html"><img src="who.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer4"><a href="what.html"><img src="what.jpg" width="100" height="70" border="0"></a></div>

<div id="Layer5"><a href="ideas.html"><img src="ideas.jpg" width="100" height="70" border="0"></a></div>
<div id="Layer6"><a href="why.html"><img src="why.jpg" width="100" height="70" border="0"></a></div>
</body>
</html>

Centering Nav

Similar Tutorials

View Content

how can i center the nav on this page?

http://fantasyfootball.pzproductions.com/testing

Centering A Div Within A Div...

Similar Tutorials

View Content

so what is the easiest and best way to center a div within a div? or a div within anything else for that matter.

How do you center vertically?

and

How do you venter horizontally?

Centering Image Help Please

Similar Tutorials

View Content

Hi all
i have been trying to center a group of four images using html.
the code is:
PHP Code:
<img src="tennis.jpeg"align="center"width="100" height="100" title="Equipment needed for playing tennis." >
    <img src="snooker.jpeg"align="center" width="100" height="100" title="Snooker table within a snooker club where you play the sport ">
     <img src="Golf.jpeg" "align="center"width="100" height="100 title="The Famous last hole on the old corse St Andrews">
     <img src="Badminton.jpeg"align="center" width="100" height="100" title="Equipment needed for playing Badminton">

some how its not quite right any ideas where im going wrong?

TI AV.

Gaz.

I Need Help Centering My Website.

Similar Tutorials

View Content

Here is the code i have for the only(and first) page of the website.

HTML Code:

<!DOCTYPE html>
<html>
<body background="piginsun.png">
<div id="container" style="width:1903px">
<div align="center">

<div id="header" style="position:relative;width:100%;margin-top:0px;margin-bottom:0px;text-align:center">
<h1 style="margin-bottom:0;">
</div>

<div style="width:340px;text-align:left;align:center;">
	<a href="http://www.w3schools.com"><img width="868" height="90" src="mcad.png" alt="html.html" style="border:0;margin-top:0px;"></a>


<div id="menu" style="height:315px;width:120px;float:left;">
<b><a target="_top" href="html.html">Home</a></br></br>
<b><a target="_top" href="html_forums.asp">Server Forums</a></br></br>
<b><a target="_top" href="html_updates.asp">Server Updates</a></br></br>
<b><a target="_top" href="html_videos.asp">Server Videos</a></br></br>
<b><a target="_top" href="html_staff.asp">Server Staff</a></br></br><b><a target="_top" href="html_pics.asp">Server Pictures</a></br></br>
<b><a target="_top" href="html_donate.asp">Donations</a></br><b></br><a target="_top" href="html_contact.asp">Contact Us</a>


</div>

<div id="content" style="height:940px;width:1200px;text-align:center;">
<font size=40px;font color="#7373FF">Random</font><font size=40px;font color="#CB59E8">Craft</font></br>
<i>A Minecraft Server</i>
</br>

<div id="content" style="height:598px;width:1200px;text-align:center;">

</br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br></br>




<div id="footer" style="clear:both;text-align:center;">
Copyright &#xae;RandomCraft Server</div>

</div>

</body>
</html>

I need some help centering the whole thing. It looks good now but is off to the side, i need it centered. If someone could show me how to do that, that would be awesome. Thanks

Centering <div>'s And Falling Below.

Similar Tutorials

View Content

Hi,
I'm trying to develop a fluid layout for a webpage - and I have two 50% <divs> that have images in them, and the width of these <divs> add to 100% of course. So from my resolution and slightly smaller ones it looks like they are centered.
However, when I scale the browser down to a smaller size, they get squished together because they float left.
How can I make it so one falls below the other and they become centered on the page at the same time?

Cheers...

Help With Centering Images + Ie9

Similar Tutorials

View Content

Hello, I'm having real trouble aligning images to the 'exact' centre in different browsers. I'm using <div align="middle"> </div> around the whole code at the moment, which aligns horizontally in Chrome and Firefox, but not IE9. But even this does not vertically align as well.

Afraid I don't know much about CSS or any other div tags.
I built the site in Dreamweaver - this is the code straight from site:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div align="middle">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>www.test.com</title>
<style type="text/css">

</style></head>

<body>
<img src="comet3.jpg" width="933" height="658" border="0" align="middle" usemap="#Map" />
<map name="Map" id="Map"><area shape="circle" coords="885,123,9" href="comet2.html" /><area shape="circle" coords="916,124,9" href="comet4.html" /><area shape="rect" coords="785,71,904,103" href="contact.html" /><area shape="rect" coords="665,70,756,109" href="about.html" />
<area shape="rect" coords="371,73,462,112" href="index.html" />
<area shape="rect" coords="499,70,632,111" href="portfolio.html" />
<area shape="poly" coords="891,118" href="#" />
</map>
</body>
</html>
</div>

Really need some help with this!
Thanks for any assistance
Cheers
J

Help Centering Images

Similar Tutorials

View Content

OK, just put my new site up etc.
I'm just finishing it with images etc for my friends:

http://bparch.freehostia.com/

When you look at the images on the front page, is there a way of centering them?
Here is the CSS for the gallery:

Code:

ul#gallery {
     margin:0 auto;
     padding:0;
     list-style-type:none;
     width:90%;
     font-family: verdana, arial, helvetica, sans-serif;
     text-align: center;
     
}

ul#gallery li {
     float: left;
     margin:5px;
     text-align: center;
}

ul#gallery li p {
     text-align: center;
     margin:5px 0;
}

Here is the CSS for the other parts:
Code:



body {
	margin:0px;
	padding:0px;
	font-family:verdana, arial, helvetica, sans-serif;
	color:#333;
	background-color:#ccccff;
	}
h1 {
	margin:0px 0px 0px 0px;
	padding:0px;
	font-size:28px;
	line-height:28px;
	font-weight:900;
	color:#666666;
        text-align: center;
	}
h2 {
        font-size:22px;
        text-align: center;
        }

p {
	font:11px/20px verdana, arial, helvetica, sans-serif;
	margin:0px 0px 16px 0px;
	padding:0px;
	}

#Content>p {margin:0px;}
#Content>p+p {text-indent:30px;}


a {
	color:#09c;
	font-size:11px;
	text-decoration:none;
	font-weight:600;
	font-family:verdana, arial, helvetica, sans-serif;
	}

a:link {
        color:#00009c;}

a:visited {
        color:#00009c;}

a:hover {
        color:#ccccff ;
        background-color:#FFFFFF;
        border-style:dashed;
	border-color:black;
        border-width:1px 0px	
        }

.headings {
        color: #000000;
        text-decoration: underline; 
        font-size: 20px;
        font-weight: bold;
}

#Header {
	margin:50px 0px 10px 0px;
	padding:17px 14px 14px 20px;
	/* For IE5/Win's benefit height = [correct height] + [top padding] + [top and bottom border widths] */
	height:33px; /* 14px + 17px + 2px = 33px */
	border-style:solid;
	border-color:black;
	border-width:1px 0px; /* top and bottom borders: 1px; left and right borders: 0px */
	line-height:11px;
	background-color:#eee;
        text-align: center;

/* Here is the ugly brilliant hack that protects IE5/Win from its own stupidity. 
Thanks to Tantek Celik for the hack and to Eric Costello for publicizing it. 
IE5/Win incorrectly parses the "\"}"" value, prematurely closing the style 
declaration. The incorrect IE5/Win value is above, while the correct value is 
below. See http://glish.com/css/hacks.asp for details. */
	voice-family: "\"}\"";
	voice-family:inherit;
	height:14px; /* the correct height */
	}
/* I've heard this called the "be nice to Opera 5" rule. Basically, it feeds correct 
length values to user agents that exhibit the parsing error exploited above yet get 
the CSS box model right and understand the CSS2 parent-child selector. ALWAYS include
a "be nice to Opera 5" rule every time you use the Tantek Celik hack (above). */
body>#Header {height:14px;}

#Content {
	margin:0px 50px 50px 200px;
	padding:10px;
        background-color:#eee;
	border:1px dashed #666666;

	}

#Menu {
        text-align: center;
	position:absolute;
	top:110px;
	left:20px;
	width:172px;
	padding:10px;
	background-color:#eee;
	border:1px dashed #666666;
	line-height:17px;
/* Again, the ugly brilliant hack. */
	voice-family: "\"}\"";
	voice-family:inherit;
	width:150px;
	}
/* Again, "be nice to Opera 5". */
body>#Menu {width:150px;}

Thanks -- Chris

Centering Problem

Similar Tutorials

View Content

Help With Centering Template

Similar Tutorials

View Content

I'm currently using this for my blog template (i didn't make it) and it's currently aligned to the left. How would i make it so that it centers automatically regardless of window size/screen resolution? The right column has a position.

Any help is appreciated.

Code:

<html><head>
<title>17. everything i'm not</title>

<style type="text/css">
#navbar-iframe {display: none;}
::-moz-selection {background-color:#e3e3e3;color:#666666;}
a:link,a:active,a:visited{color:#999999; text-decoration: none;}
a:hover{text-decoration: none; color: #91B1BD; text-decoration:none;}  

body{background-color: #fdfdfd; background-image: url('http://i53.tinypic.com/1jvi34.jpg'); color: #666666; font-family: arial; font-size: 8pt;}
blockquote{font-family:arial; border-left: 5px solid #91B1BD; background-color:#f9f9f9; color: #666666; padding: 10px;}

.side{background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;}

.h1 {
font:normal 12pt courier new; 
color:#91B1BD;
text-align:left;}

.h2 {
font:normal 8pt courier new; 
color:#999999; 
border-bottom: 1px dashed #e3e3e3;
text-align:left;
padding:3px;}

</style><noembed>
</head></noembed>
<noembed><body>
</noembed>

<div style="left:0px; top:0px; position:absolute;">
<img src='http://i51.tinypic.com/152oqpk.jpg' width="700px" >
</div>

<div style="position:absolute; left:0px; top:350px; width:545px; background:#ffffff; padding:10px; filter: alpha(opacity=70); moz-opacity:.70; opacity:.70;">
<blogger>
<div class="h1">▶ <$BlogItemTitle$></div>
<div class="h2"><BlogDateHeader><$BlogDateHeaderDate$></BlogDateHeader> // <$BlogItemDateTime$></div><br>
<$BlogItemBody$><br>
</blogger>
</div>

<div style="width: 250px; left:580px; top:290px; position:absolute;">
<div style="color:#91B1BD; font-family:courier new; font-size:14pt;">'cos she's everything, <br>everything im not.</div><br>
<div class="side">
<div class="h1">▶ こんにちは</div>
a warm welcome to your blog ? music players, hit counters, nuffnang ?
</div><br>

<div class="side">
<div class="h1">▶ 私について</div>
konnichiwa, watashi no namaewa deniisu desu. your sexy profile here hoho.
</div><br>

<div class="side">
<div class="h1">▶ 何か言う</div>
some space for your tagboard, max width 250px.
</div><br>

<div class="side">
<div class="h1">▶ ともだち</div>
<a href="http://" target="_blank">one</a> 
<a href="http://" target="_blank">two</a> 
<a href="http://" target="_blank">three</a> 
<a href="http://" target="_blank">four</a> 
<a href="http://" target="_blank">five</a><br>
links to your friends ? if you have any.
</div><br>

<div class="side">
<div class="h1">▶ ありがとう</div>
Layout and header image by <a href="http://blogskins.com/me/mymostloved" target="_blank">mymost</a><a href="http://heavilyybroken.blogspot.com" target="_blank">loved*</a> 
with raw image from popsister scan by <a href="http://sushi-cat.net/" target="_blank">sushi-cat</a> and background from <a href="http://fivepointsapart.blogspot.com" target="_blank">fivepointsapart</a>.<br> 
</div>
</div>
</body>
</html>

It Stopped Centering

Similar Tutorials

View Content

http://www.jesdeis.com/index2.php

the image window area WAS centered. and should still be. all i did was change the menu. but i cant figure out why its no longer centered.

also. the funky character in front of the copyright. that is NOT in my source.