...

View Full Version : How to keep a button fixed



anhyee
05-02-2011, 01:22 AM
So this is my site that I have so far, http://andynguytest.hosterbox.net/
And I noticed that my buttons jump lines if the screen becomes to small.
http://screensnapr.com/-/uploads/WHq0Sh.png

I was wondering what I can do to make the buttons stay fixed on one line.

This is my code, can someone critique and tell me what I'm doing wrong?
I just compiled a bunch of tips I found on google for this site.



<!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" />
<head>
<title>Andy Nguy - Photography</title>
</style>
</head>
<body style="background: #000 url('images/background.jpg') no-repeat fixed">
<br>
<center>
<img src="images/banner2.png"/>
<br>
<img src="images/home3.png"/><img src="images/about1.png"
onmouseover="this.src='images/about2.png'"
onmouseout="this.src='images/about1.png'"><img src="images/portfolio1.png"
onmouseover="this.src='images/portfolio2.png'"
onmouseout="this.src='images/portfolio1.png'"><img src="images/contact1.png"
onmouseover="this.src='images/contact2.png'"
onmouseout="this.src='images/contact1.png'">
</center>
</body>
</html>

AndrewGSW
05-02-2011, 01:58 AM
You should validate and correct your HTML first:

You need a !DOCTYPE declaration,
Your 'body' tag starts within the 'head',
You haven't properly closed the 'body' tag.

bullant
05-02-2011, 02:03 AM
What AndrewGSW said
and the w3c validator is at http://validator.w3.org/

If you don't declare a doctype your browser will probably go into quirksmode.

anhyee
05-02-2011, 02:24 AM
ooo I never knew about that tool! Thanks a lot, that really helped.

so here's the updated version


<!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" />
<head>
<title>Andy Nguy - Photography</title>
</style>
</head>
<body style="background: #000 url('images/background.jpg') no-repeat fixed">
<br>
<center>
<img src="images/banner2.png"/>
<br>
<img src="images/home3.png"/><img src="images/about1.png"
onmouseover="this.src='images/about2.png'"
onmouseout="this.src='images/about1.png'"><img src="images/portfolio1.png"
onmouseover="this.src='images/portfolio2.png'"
onmouseout="this.src='images/portfolio1.png'"><img src="images/contact1.png"
onmouseover="this.src='images/contact2.png'"
onmouseout="this.src='images/contact1.png'">
</center>
</body>
</html>

bullant
05-02-2011, 04:22 AM
ooo I never knew about that tool! Thanks a lot, that really helped.

so here's the updated version


no problem :) but your updated code is still not valid html and has lots of errors in it. Maybe use that tool to help you fix your html first like Andrew suggested.

If you run your code through the validator, it will tell you what your errors are.

AndrewGSW
05-02-2011, 11:00 AM
Impressive to have 16 errors in 23 lines of HTML :thumbsup:

teedoff
05-02-2011, 02:14 PM
More to the point of your initial question, ideally you would have a navigation bar in an unordered list. You dont have that. You also dont have ANY containing elements other than to use the outdated deprecated <center> tag.

When you say your images "jump" when the screen becomes smaller. Thats because you dont have them in an element with a specified width that will force them to stay inline where you want them. So if they were in an unordered list within a div, then you could set the width if the <ul> to say 400px or whatever suits your needs, then they wouldnt break out of their containing element.

But, if you expect to have cross browser compliant code, you NEED to fix your errors.

coothead
05-02-2011, 02:56 PM
Hi there anhyee,

check out the attachment for a possible solution to your problem. ;)

coothead
&#160;

anhyee
05-03-2011, 03:57 AM
Thanks coothead!
That is the solution (:
I really appreciate it, I ignored the use of CSS ):

Thanks again!

coothead
05-03-2011, 08:27 AM
No problem, you're very welcome. ;)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum