Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations TouchToneTommy on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

I am trying to center my index.php webpage.. 2

Status
Not open for further replies.
tijerina

tijerina

Vendor
Mar 4, 2003
132
US
Hello all,

Here is a snippit of my inded.php file..

-----start of snippit-----------------------

I would like to center this entire webpage, I am not sure how to do it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Company Incorporated - Consulting, Project Management, Health Care, HIPPA, Government, and Business</title>
<meta name="description" content="certification, MCSE, MCSA, CCNA, CCNP A+, Network+, Adobe Photoshop, Visual Basic, VB, UNIX, Linuxnd, Microsoft Office">
<meta name="keywords" content="Project Management, CISSP, Hacking, Networking, Enterprise, Analyst, Business, CCNA, Microsoft, Cisco, CCNP,
A+, Network+, MCSE, MCSA, MCSA, MCSE Certification, MCSE, Photoshop,
Visual Basic, VB,certification, computer training,
software training, computer training, MCSE Info, Computer Consulting">

<link rel="stylesheet" type="text/css" href="css1.css">
</head>
<SCRIPT language=JavaScript src="wct.js" type=text/javascript></SCRIPT>
<SCRIPT language=JavaScript src="mmenu.js" type=text/javascript></SCRIPT>

<body background="images/companybackground.gif" topmargin="0" marginheight="0" leftmargin="0" marginwidth="0">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" background="vline.jpg" height="139">
<tr>
<td width="100%" height="139">
Also, my topbar.jpg doesn't stretch to cover the full width of the body of my webpage, how do I fix this
<img border="0" src="images/topbar.jpg" width="532" height="140"></td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" id="AutoNumber1" width="804">
<tr>
<td width="61">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </td>
<td width="731">
<br>
<img border="0" src="images/welcome.gif" width="128" height="34"><br>
&nbsp;<br>
<img border="0" src="images/businesspeople.jpg" align="left" width="160" height="98">Company Inc. applies technical expertise to business problems taking your
business to a more productive, more efficient level. Using current, proven
technologies, we facilitate the compilation and movement of information
throughout an organization. When proposing solutions, we look at current
investment in technology, return on investment, longevity, and productivity
gains to select a cost effective technical solution for your business problems.<p>
Some of the services and technology we provide are:</p>
<p>For example, by developing a strategic plan, we can identify
which future investments fit into your long range business goals while taking
advantage of your current IS (information systems) infrastructure. Or, we can
increase your staff's productivity through office automation by analyzing
workflow and redesigning processes to eliminate redundant tasks.</p>
<p>LZT Inc. can provide a &quot;big picture&quot; view of
your business and technology needs.&nbsp; We can then provide a plan and the
means to attain your future business goals.</p>



<p>&nbsp;</td>
<td width="12">
&nbsp;</td>
</tr>
<tr>
<td width="61">&nbsp;</td>
<td width="731">
<p align="center"><font size="1">Copyright 2000-2004 Company Inc..
All rights reserved.</font></td>
</table>

</body>

</html>

-----end of snippit--------------------------

I have defined my issues in color in the snippit above.

Thanks for the help..

 
Sort by date Sort by votes
In the image, change width="532" to width="100%". This may stretch the image. In order to scale it, remove the height parameter.

To center the entire page, right after the <body> tag add "<div align="center">" (no outer quotes). Immediateky before the "</body>" tag, add "</div>"

--Chessbot
 
Upvote 0 Downvote
Thanks but the centering isn't working too well..

 
Upvote 0 Downvote
First table has width="100%"... make it ="804" to fit width of second table and use "align='center'" in both tables.

Also... without background images we can partially guess what you want to achieve. Do you have online example?
 
Upvote 0 Downvote
Point served vongrunt,

I was a little apprehensive about posting the development site for this project, but here it is..


The goal is:

Have the top bar flush with the top of the window. When you go to the site, you will see that the very top blue and yellow bar gaps with the top of the window.

More than likely I will modify the immage because it looks a little distorted, I just want to get this one to fit nicely.. And I will work on the looks of the image itself later.

The bar on the left side, the yellow one, I want to make another one on the right side, so it looks even.

If you have any additional ideas that could make this index.php page look professional, clean and so forth, please let me know..

I will use this style for all other links once I create my buttons. The buttons that I create will be at the bottom of the topbar (the darker blue section of the top blue and yellow bar).

Hope this makes sense...
 
Upvote 0 Downvote
Constructive Criticism:

Your HTML is pretty sloppy. I don't blame you - it's hard to see errors sometimes.

Pop your URL into I just did. It'll tell you a lot of the things you're doing wrong, and maybe just fixing those errors will solve some of your problems.

If you need additional help after making those corrections, feel free to ask!

Hope that helps!

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
Thanks for the suggestion..

I did run it through the code checker and I do not agree with some of the findings. Some of the errors it found were compliancy (standards)issues, not bad code to where it doesn't work.

I just want to get it to work now (this is development, I will work on fixing (following standards) the code up later). I need to get the functionality going, ASAP.. Or at least make it look nice. I could go and use frontpage, but I really want to do this via HTML for learning purposes...

I am almost there, maybe 80%.

What I need help with is:

The goal is:

Have the top bar flush with the top of the window. When you go to the site, you will see that the very top blue and yellow bar gaps with the top of the window.

More than likely I will modify the immage because it looks a little distorted, I just want to get this one to fit nicely.. And I will work on the looks of the image itself later.

The bar on the left side, the yellow one, I want to make another one on the right side, so it looks even.



 
Upvote 0 Downvote
The purpose of the validator is to make sure your HTML is going to work. To say that you don't agree with the validator is, shall we say, a little arrogant. Perhaps that sounds a little harsh (perhaps it is), but I can't think of a better way to phrase it right now.

If you code to meet standards, then you can be reasonably confident that your site will be functional in other browsers and other platforms rather than for your possibly unique set up.

You would be far better served getting it to work properly from the outset, it will make things easier for you in the long run.

What is the point of "getting it to work" if it doesn't work properly, and then spending more time getting it to work properly?

As was also pointed out, clean, tidy HTML makes it easier to avoid errors. Web standards help you write clean, concise code. See the connection?

To misquote something I read earlier,
"It is hard to change your site so it works, but much harder to change the Internet to work with your site."

 
Upvote 0 Downvote
> Have the top bar flush with the top of the window. When you go to the site, you will see that the very top blue and yellow bar gaps with the top of the window.

Sounds simple but... there are some buggy parts in code. BODY tag isn't enclosed, P appears before BODY and image vline.jpg isn't present.
It also seems that topbar.jpg has top/bottom gaps (it is 219px high), so you may crop it with picture editor.

> The bar on the left side, the yellow one, I want to make another one on the right side, so it looks even.

This is tricky part. Users may have different screen resolution, background images cannot stretch, floating DIVs are of no use for this. Because entire code is transitional, perhaps global table with height="100%" width="100%" and 3 columns should do the trick.
 
Upvote 0 Downvote
Forgot this... it might be more helpful for you

If you just want to get the site up quick and hang the code quality.. go ahead and use Frontpage.

A quick fix mightbe for you to enclose the whole page in another table, center the table and apply vertical centering within the cell.
This will center both horizontally and vertically within the browser window.

Code: 
<table align="center" border="1" width="100%" height="100%">
<tr>
<td align="center" valign="center">

    [i]site code here[/i]

</td>
</tr>
</table>

 
Upvote 0 Downvote
Another table-centering suggestion:

Code: 
<html>
<head>
<title>title here</title>
</head>

<body>

<table width="100%" bgcolor="[COLOR=OF THE VERTICAL BAR]"><tr valign="top">
<td width="45%">&nbsp;</td>
<td width="10%">

<table bgcolor="#ffffff"><tr>
<td>
[i]page content here...[/i]
</td>
</tr></table>

</td>
<td width="45%">&nbsp;</td>
</tr></table>

</body>
</html>

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
Jeesh, All I wanted was some help to get my little site working, not to change the entire internet or anything like that.. I am on a learning path and I am sure we all have our own way of learning.. Yeah, arrogant was harsh, not needed in this forum (if you can't think of a better way, then left unsaid is the best way). I was just expressing my "own" view on the code checker. But your tips will be taken literally and they are good points.

vongrunt, thanks a million.. I will apply your suggestions and go from there.

WOW, foamcow I just viewed your site. NICE JOB!! I am very impressed with your eye, to have an eye for graphics and implement them in a fashion that is VERY PLEASING TO THE EYE, is impressive.

Can I contact you via your site, I would like to ask you some questions that relate to your services (if you offer services, it really doesn't state if you offer services or not)..

Thanks..
 
Upvote 0 Downvote
Damn, I should start listing the websites I've created if it's going to score me consulting and development opportunities...

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
LOL, thanks for the complement.
go ahead.

My comments were not meant to be harsh in a condescending way. I appreciate you are on a learning curve... we all are. Anyone that says they know it all is lying ;-)

I thought it a valid way to make my point though, and I stand by it. You will find much more benefit in learning something the right* way than relearning it the right* way.

You need to have a good solid idea of how to write neat, clean HTML as the foundation for your skill set. The validator can help you do that. Sure, sometimes is pinnickety and annoying, but making your pages work within it's criteria will only help you in the long run.

*right as in, what's in vogue at the moment. Though web standards are in my opinion a bit of a godsend.

 
Upvote 0 Downvote
Hello clflava,

I used your code:

<html>
<head>
<title>title here</title>
</head>

<body>

<table width="100%" bgcolor="[COLOR=OF THE VERTICAL BAR]"><tr valign="top">
<td width="45%">&nbsp;</td>
<td width="10%">

<table bgcolor="#ffffff"><tr>
<td>
page content here...
</td>
</tr></table>

</td>
<td width="45%">&nbsp;</td>
</tr></table>

</body>
</html>

-----------------------------------------------

please go to and take a peak at the body..

I tried to modify the code so the body wouldn't be so skinny. Any ideas??
 
Upvote 0 Downvote
Just give the inner table a width.

[tt]<table bgcolor="#ffffff" width="600">[/tt]

Hope that helps.

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote

Note: the inner table's width must be absolute (a number), not relative (a percentage) because the surrounding table already has relative width.

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
No problem.

Try changing your <body> tag to this, see if you like it better.

[tt]<body leftmargin="0" topmargin="0" marginheight="0" marginwidth="0">[/tt]

*cLFlaVA
----------------------------
A pirate walks into a bar with a huge ship's steering wheel down his pants.
The bartender asks, "Are you aware that you have a steering wheel down your pants?"
The pirate replies, "Arrrrr! It's driving me nuts!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

bdwilcox
  • Locked
  • Question
More efficient / manageable way to code this HTA w/ VBScript?
Replies
0
Views
330
bdwilcox
bdwilcox
soni21
  • Locked
  • Question
JavaScript String to Number Conversion in HTML: Seeking Clarification
Replies
4
Views
651
Chris Miller
Chris Miller
Expoverse
  • Locked
  • Helpful tip
Solution to CSS Two Level Horizonal Menu 1
Replies
1
Views
321
pmonett
pmonett
cae154
  • Locked
  • Question
Body of email not appearing in correct font on iPhone and iPad
Replies
1
Views
380
spamjim
spamjim
Mike Lewis
  • Locked
  • Question
How to refresh a Javascript file in the browser's cache?
Replies
4
Views
595
Mike Lewis
Mike Lewis

Part and Inventory Search

Sponsor

Back
Top