first time, and confused... [Archive]

winterdude

04-20-2006, 05:14 PM

I'm starting to make my new webpage and I have no clue why things aren't lining up. The page im playing around with is at (http://symphoniasearch.tripod.com/beta/aspensearch.html). I want to know how to make the logo and the search box align instead of being diaganol from eachother..any help would be great!

felgall

04-20-2006, 07:20 PM

Well you only have a fragment of a page there. No DOCTYPE, no <html>, no <head>, no <body> and a lot of the tags you do have were deprecated long ago eg <center> was replaced by <div align="center"> which was replaced by the margin:0 auto; stylesheet command.

To get a web page to display the way it is supposed to you need to include all of the necessary HTML and stylesheet commands that define how it is to be laid out and make sure that the code is valid so that browsers don't have to guess what you are trying to do.

I have some HTML and CSS tutorials at http://www.felgall.com/net2f.htm and http://www.felgall.com/net2e.htm that will show you how HTML and CSS are supposed to be coded to make a web page.

Chalk4Brains

04-20-2006, 07:25 PM

I'm starting to make my new webpage and I have no clue why things aren't lining up. The page im playing around with is at (http://symphoniasearch.tripod.com/beta/aspensearch.html). I want to know how to make the logo and the search box align instead of being diaganol from eachother..any help would be great!This depends entirely on how you want the logo and search box to be aligned. I am assuming that you would like them both left aligned. This is easily done. All it requires is the creation of a "layer" using the HTML <div> tag to specifiy a logical division (or section) in your HTML page.

Here is the code you need to be looking at. This is where the logo image and search form start and end:

<img src="http://static.flickr.com/47/132058381_ba810559a5_o.png">
<form method="GET" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<table bgcolor="#FFFFFF">
<tr>
<td>
<input type="img" name="q" size="31" maxlength="255" value="">
<font size="1" face="Abadi MT" color="gray">powered by <a href="http://www.google.com">google search</a></font>
<br>
<input type="image" src="http://static.flickr.com/48/132062523_b48b242848_o.png" name="btnG" value="">
</td></tr>
</table>
</form>
Now for the alignment. Look at the altered code below. The parts I have added are shown in RED:


<div align="left">
<img src="http://static.flickr.com/47/132058381_ba810559a5_o.png">
<form method="GET" action="http://www.google.com/search">
<input type="hidden" name="ie" value="UTF-8">
<input type="hidden" name="oe" value="UTF-8">
<table bgcolor="#FFFFFF">
<tr>
<td>
<input type="img" name="q" size="31" maxlength="255" value="">
<font size="1" face="Abadi MT" color="gray">powered by <a href="http://www.google.com">google search</a></font>
<br>
<input type="image" src="http://static.flickr.com/48/132062523_b48b242848_o.png" name="btnG" value="">
</td></tr>
</table>
</form>
</div>

Looking at my example you see how simple it is. However, just for clarity, let me break it down:

The div tag creates a layer on your page (as mentioned above) then the align="left" tag attribute tells the browser that everything contained in this layer should be aligned to the left. The </div> end tag simply tells the browser to stop rendering the layer and continue rendering the rest of the document.

You may have noticed the coding starting with "". These are nothing to do with the positioning, they are HTML comments and are used when you want to comment on something in your code to refer to later on or simply to divide between sections in your page. I used comments here so that you can easily distinguish between your logo/search box code and the rest of the coding in your document.

If you wanted the logo and search box to be positioned in another way, just let me know and I'll see if I can help. Hope it helps :)

Regards,
Becky

Charles

04-20-2006, 08:17 PM

Well you only have a fragment of a page there. No DOCTYPE, no <html>, no <head>, no <body> and a lot of the tags you do have were deprecated long ago eg <center> was replaced by <div align="center"> which was replaced by the margin:0 auto; stylesheet command.

To get a web page to display the way it is supposed to you need to include all of the necessary HTML and stylesheet commands that define how it is to be laid out and make sure that the code is valid so that browsers don't have to guess what you are trying to do.

I have some HTML and CSS tutorials at http://www.felgall.com/net2f.htm and http://www.felgall.com/net2e.htm that will show you how HTML and CSS are supposed to be coded to make a web page.The HTML, HEAD and BODY start and end tags are optional. <div align="center"> was never acceptable. And your tutorial gets wrong the idea of a namespace in XHTML. Please, please read the specifications.

winterdude

04-20-2006, 10:34 PM

thanks guys, but another forum gave me a much simpler way...

<img src="http://static.flickr.com/47/132058381_ba810559a5_o.png" style="float:left;">

I just had to add the style thing and it worked perfectly, thanks anyways!

felgall

04-20-2006, 11:54 PM

The HTML, HEAD and BODY start and end tags are optional. <div align="center"> was never acceptable. And your tutorial gets wrong the idea of a namespace in XHTML. Please, please read the specifications.

The html, head, and body tags may be optional but you can't expect all browsers to display the page properly without them - how does the browser know it is html without the <html> tag. Also just because something is optional it doesn't mean that a sensible person would leabe it out (eg. semi-colons on the end of statements are optional in Javascript but anyone who loeaves them out is just making more trouble for themselves).

<div align="center"> was used by a lot of people as the replacement for <center> when that tag was deprecated because the align attribute was not deprecated until long after the center tag was. There are lots of sites that still use that because the owner knows that <center> is long gone but hasn't started using stylesheets properly yet.

My tutorial can't have the concept of a namespace wrong because I haven't got that far through writing the tutorials that explain that yet and the ones at the start just show the tags that you need to define a basic web page into which all of the other things can be added without explaining what they do. The first tutorial where those tags are mentioned (but not explained) explains the following two tags.

<title>Hello World</title>
<p>Hello World.</p>

Since one of these goes in the <head> and the other in the <body> those tags are needed too.

The only mention of namespace on any of the 1100+ pages on my site (and which isn't in the XHTML tutorials) simply states that namespace needs to be taken into account when writing Javascript to work with properly served XHTML pages.

Charles

04-21-2006, 05:49 AM

The html, head, and body tags may be optional but you can't expect all browsers to display the page properly without them - how does the browser know it is html without the <html> tag. Also just because something is optional it doesn't mean that a sensible person would leabe it out (eg. semi-colons on the end of statements are optional in Javascript but anyone who loeaves them out is just making more trouble for themselves).Of course you can expect browsers to work just fine without those tags. That what "optional" means. Give it a try. By definitiion you will not find a browser that has difficulty. HTML has a set of rules. A browser is something that follows those rules. Look it up, optional tags are some of the rules. Browsers know that they are getting HTML before they get the document, from either the OS or the HTTP headers. And they know from the rules:
<!ENTITY % html.content "HEAD, BODY">

<!ELEMENT HTML O O (%html.content;) -- document root element -->
<!ATTLIST HTML
%i18n; -- lang, dir --
>So if the browser encounters a something other than a HEAD element as the first child of the HTML then the HEAD element will be created automatically by the browser. Likewise with the P element. Its closing tag is optional and it cannot contain blockk level elements like itself. So we know that <p>Foo<p>Bar</p> resolves as <p>Foo</p><p>Bar</p> and not <p>Foo<p>Bar</p></p>.

In JavaScript I omit the ";" at the end of the line as a rule. And I haven't run into trouble yet.

The world has enough rules as it is. Please stop running around makeing new ones simply to suit your fancy.

Charles

04-21-2006, 05:54 AM

<div align="center"> was used by a lot of people as the replacement for <center> when that tag was deprecated because the align attribute was not deprecated until long after the center tag was. There are lots of sites that still use that because the owner knows that <center> is long gone but hasn't started using stylesheets properly yet.The CENTER element and the "align" attribute were both depricated at the same time and by the, now superseded, HTML 4.0 Specification of 24 April 1998.

Charles

04-21-2006, 05:56 AM

My tutorial can't have the concept of a namespace wrong because I haven't got that far through writing the tutorials that explain that yet and the ones at the start just show the tags that you need to define a basic web page into which all of the other things can be added without explaining what they do. From your tutorial
The html container has one attribute xmlns which needs to be coded exactly as shown...