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.

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.

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

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

Quote:

Originally Posted by anhyee

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

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

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.