Can Someone Tell Me What HTML code

@BrendiJan 29.2007

Can Someone Tell Me What HTML code, or other code that will work, to insert in the following to make the page fit all browser sizes? I can make it work with a display of 1280 x 768, but not any higher. X’s were added to protect information……………
Brendi

<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>
<html>
<head>
<meta name=”KEYWORDS”
content=”xxxxxxxxxxxxxxxx <meta http-equiv=”Content-Type”
content=”text/html; charset=UTF-8″>
<title>xxxxxxxxxxxxxxxxx</title>
</head>
<body style=”background-image: url(Sky.jpg);”>
 
     
           
       
           
       
           
       
         
         
 
       
           
           
       
           
       
           
       
        <br>
<div style=”text-align: center;”>
<div style=”text-align: center;”><big
style=”font-weight: bold; font-style: italic;”> 
           
   <img style=”width: 213px; height: 56px;”
alt=”” src=xxxxxxxxxxxxxxxxx>     <big><span
style=”font-family: Bookman Old Style;”>xxxxxxxxxxxx</span></big><span
style=”font-family: Bookman Old Style;”>
</span></big><span
style=”font-style: italic; font-weight: bold;”> 
          </span><span
style=”font-style: italic; font-weight: bold;”><small> 
       
       
           
       
           
       
         
  
           
       
           
       
           
         
           
         <big><big>xxxxxxxxxxxxxxxxxxxxxxx</big></big></small></span></div>
</div>
<center>
<table style=”text-align: left; width: 738px; height: 27px;”
border=”1″ cellpadding=”2″ cellspacing=”2″>
<tbody>
<tr>
<td style=”text-align: center; font-weight: bold;”> <a
href=”index.html”>HOME PAGE</a></td>
<td style=”text-align: center;”><a
style=”font-weight: bold;” href=”xxxxxxxxxxx”>xxxxxxxxxxx</a></td>
<td style=”text-align: center; font-weight: bold;”><a
href=”contactinformation.html”>CONTACT INFORMATION</a></td>
<td style=”text-align: center; font-weight: bold;”><a
href=”xxxxxx.html”>xxxxxxxxxxxxxxxx<br>
</a></td>
<td style=”text-align: center; font-weight: bold;”><a
href=”miscellaneous.html”>MISCELLANEOUS</a></td>
</tr>
</tbody>
</table>
</center>
           
           
           
           
           
     
<center style=”font-weight: bold;”>
<center style=”font-weight: bold;”><span
style=”font-family: Times New Roman,Times,serif;”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </span></center>
<center
style=”font-weight: bold; color: rgb(0, 0, 0); font-family: Times New Roman,Times,serif;”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</center>
<center style=”font-weight: bold;”><span
style=”color: rgb(0, 0, 0); font-family: Times New Roman,Times,serif;”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</span><br>
<small>
</small>
<center><span
style=”color: rgb(0, 0, 0); font-family: Times New Roman,Times,serif;”><center
style=”font-weight: bold; color: rgb(0, 0, 0); font-family: Times New Roman,Times,serif;”>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</center>
</center>
</body>
</html>

to post a comment

HTML

23 Comments(s) _↴

@blutterJan 29.2007 — #The first step is going to be inserting a proper doctype:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> [/CODE]

Also, a description of the problem would help. Almost half the problems posted on this entire forum are cross browser compatibility issues, so if you sincerely want help a little more effort than "Ctrl-a Ctrl-c Ctrl-v" just to paste your code is gonna need to be made. I'm not trying to be a dick, I'm helping you help us to help you.

@CharlesJan 29.2007 — #[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> [/CODE][/QUOTE]No way, the transitional DTDs are outdated. Use instead:

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd"&gt;

@BrendiauthorJan 29.2007 — #This is what shows: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> I used NVU. The problem is that the background (used a .jpg image) will not work if the display setting is anything higher than 1280 x 768.

Brendi

@blutterJan 30.2007 — #I know that doctype was given by a program, I use a program (don't ever use visual editors) that gives me that same stupid doctype, but anyway, here's the proof that that's wrong:

http://www.w3schools.com/tags/tag_doctype.asp

When you say the image "doesn't work" at high resolutions, do you mean it looks all funny, or it just doesn't show up at all? Also, have you tested this on Firefox and Internet Explorer?

@BrendiauthorJan 30.2007 — #What the page does at resolutions higher than 1280 x 768 is the .jpg starts show all over again, as though it has two images. This is in IE 7. I don't have Firefox.

Brendi

@blutterJan 30.2007 — #Oh, okay, the way I would solve this is using css. If you're not familiar this what it will look like:

The html:

<div id="container">



</div>

And then in the .css file you'll have:

#container{width: 1280; /*Or whatever the width of your image is*/

margin: 0px auto;

background:url('mybackgroundimage.jpg') no-repeat;

}

That "no-repeat" is going to solve the problem you described. Also, if you don't know what css is then you're going to need a little more help with this. Learning css is a very important hurdle in learning webdesign. Also, if you're using a visual editor YOU WILL REGRET IT LATER if you do stick with this and actually learn how to write webpages.

@BrendiauthorJan 30.2007 — #Okay, now I'm almost completely lost. I don't know css. Let me try something & I'll be right back.

Brendi

@BrendiauthorJan 30.2007 — #Nope, still can't get it to work..... any ideas????? or should I just not worry about those who may have their resolution set to higher than 1280 x 768?

Brendi

@aussie_girlJan 30.2007 — #there wouldn't be many people who would have resolution higher than that I wouldn't think ,mine is 800x 600

@JPnycJan 30.2007 — #1024 is now the most common res. on the web. Plenty of people have higher res. than that. I use 1152, and I know a number of people who use 1200 and 1600

@blutterJan 30.2007 — #You should worry about it, that is if it is important that everyone who gets to your site can read it. I'm in the middle of a ****storm of homework, but I'll be sure to post a solution to this problem. Basically what you'll want to do is create a .css file with what I told you in it before and wrap your whole content in that div container tag. In the head of the document you'll put: <link rel="stylesheet" type="text/css" href="mystylesheet.css"> It doesn't matter what you call your stylesheet as long as it has the .css extentsion and for the way I wrote that <link> tag make sure the style sheet is in the same directory as your page(s). If you're really lost on style sheets look in the CSS forum on this site and you'll find a lot of posts with links to learning how to work with stylesheets.

@BrendiauthorJan 30.2007 — #Hi aussie_girl.... my resolution is set at 800 x 600 also. But there are some, such as my son, who have it set higher. I don't see why...it just strains the eyes to have anything too small. I finally got the page to where it works in all IE browser sizes, though I don't think the image quality is a good as it should be. I'll try working on it with Photoshop. Thanks. If you have any additional hints/tips, I'd be happy to read them.

Brendi

@Tweak4Jan 31.2007 — #I don't see why...it just strains the eyes to have anything too small.[/QUOTE]

The thing you are not considering is the size of the user's monitor. If you're at 800x600 and comfortable, I'd guess you're using a 15" or 17" monitor at best.

In my office, I use a 23" LCD monitor, so if I set it to 800x600, each desktop icon would be the size of a silver dollar. Therefore, I keep it set to 1600x1200, to keep things reasonably sized as well as to give me more desktop space to work with.

At home, I use twin 21" LCDs, so my total resolution there is 2560x1024.

The point is, you have no idea what you're users screen resolution is, and you also don't know if they surf with the browser maximized or not. Therefore, you need to consider every possibility, and design your sites to flow correctly, regardless of display size.

@WebJoelFeb 01.2007 — #We seriously need to get rid of the " " to 'position things'...

Here is a better template to start with that I wrote-up, loosely based upon what you have there. This works in IE and Firefox. Some variations with the widths of the content would make it variable to browser screen-width: instead of 500px, make it 75% for instance.

[code=html]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
 <html><head>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
 <meta http-equiv="Content-Style-Type" content="text/css" />
 <meta http-equiv="Content-Script-Type" content="text/javascript" />
 <title></title>
 <style type="text/css">
 *	{border:0; padding:0; margin:0;}/* Set everything to "zero" */
 body {height:100%; font-size:1.0em; padding-bottom:25px;}/* Assist IE rendering */
 body {background-color:#ececec;}
 
 h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif;
 font-style:normal; font-variant:normal; font-weight:normal; margin-left:16px;}/* indent all, 16px */
 h1{font-size: 1.93em; margin-top:7px;}
 h2{font-size: 1.72em; margin-top:7px;}
 h3{font-size: 1.52em; margin-top:7px;}
 h4{font-size: 1.42em; margin-top:7px;}
 h5{font-size: 1.32em; margin-top:7px;}
 h6{font-size: 1.21em; margin-top:7px;}
 
 #navigation {background-color:white; width:620px; height:50px; margin:5px auto; border:2px solid green;}
 #navigation ul {width:515px; margin:0 auto; height:35px; padding:16px 0 0 30px; display:block;}
 #navigation ul li {display:inline; padding:5px 7px 5px 7px; margin:0 2px 0 2px; border:3px double blue;}
 
 </style>
 
 <script type="text/javascript"><!--
 // -->
 </script>
 </head>
 <body>
 <div style="background-color:white;position:relative; width:700px; height:100px; border:3px double gray; text-align:center; margin:20px auto;">
 <img src="images/pic.gif" alt="this is an image" style="position:absolute; left:20px; top:10px; width:175px; height:75px; border:1px solid red;" /><h1 title="Banner Text Goes Here" style="margin-top:20px;">Banner Text Goes Here</h1>
 <h2 title="....for all of your styling needs" style="margin-left:170px; font-style:italic; letter-spacing:0.03em;">....for <span style="font-weight:bold; color:silver; border-bottom:1px solid red;">all of your</span> styling needs</h2>
 </div>
 
 <div id="navigation">
 <ul>
 <li><a href="#">First Link</a></li>
 <li><a href="#">Second Link</a></li>
 <li><a href="#">Third Link</a></li>
 <li><a href="#">Fourth Link</a></li>
 <li><a href="#">Fifth Link</a></li>
 </ul>
 </div>
 
 <div style="background-color:white; width:75%; height:auto; margin:0 auto; text-align:center; border:1px dotted silver; padding:6px 10px 25px 10px;">
 <h1 style="white-space:nowrap;">Some Top-level Header here</h1>
 <p>Your text goes here to say whatever you want to. Tell us about yourself. 
 Are you going to write about something fun, perhaps? Gosh, -I hope so! Like reding <span title="fun! web pages" style="color:red; font-style:italic; font-weight:bold; margin-left:2px;">fun</span> web pages!</p>
 <p>Some more text, links, whatever you want. This can be about anything that you want to write about...</p>
 <h2>Some Second-level text here</h2>
 <p>Some more text, links, whatever you want</p>
 <p>This is for your text, content, whatever you want.</p>
 <h3>Some third-level text, etc...</h3>
 <p>Some more text, links, whatever you want</p>
 </div>
 
 <div style="position:relative; width:520px; height:26px; padding-top:2px; margin:25px auto; text-align:center; border:1px dashed gray;">
 <p>Copyright &copy; Your Site: 2007</p>
 </div>
 
 </body>
 </html>[/code]

@BrendiauthorFeb 01.2007 — #WebJoel,

So if I get rid of all the " " will that be enough to get me by for now? The company I'm doing the page for would like to have it ASAP.

Brendi

@BrendiauthorFeb 01.2007 — #I'll still try working with the script you sent.... thanks. I guess it's in HTML????

Brendi

@BrendiauthorFeb 01.2007 — #Also, WebJoel.... how or (which program) do you use to compose & view webpages you create? On the script you sent (which I appreciate) when I view it in NVU it all stays to the left of the screen. How can I fix that?

Brendi

@WebJoelFeb 02.2007 — #Also, WebJoel.... how or (which program) do you use to compose & view webpages you create? On the script you sent (which I appreciate) when I view it in NVU it all stays to the left of the screen. How can I fix that?

Brendi[/QUOTE] Not familair with NVU, but my code [I]works on browsers[/I] ? , so unless your clients are using NVU to view the site, -[U]I'd[/U] bet on [I]the browser's view[/I] as being 'correct'. ?

But as to [I]why[/I] the NVU-view is left-aligning my work when viewed... -I couldn't venture a guess beyond that NVO being 'open source' might not be 'complete'... that is, it isn't obeying something that is valid html... Just my guess, tho'.. It wouldn't be the first time that an 'open source code' was 'incomplete'... (that isn't a crime. think of it as ...a challenge??).

Does NVU retain the valid !doctype that I used? If it strips it away, or places any junk in front of it, -then there is why... you need a valid !doctype to make the 'centering' work using the [B]width:xxx; margin:0 auto;[/B] method as I did. There cannot be [I]anything[/I] 'before' the valid !doctype statement... -It's a browser thang! ? Some 'editors' and 'freehosts' like to throw their garbage in front of the first line of code (one "geocities.com" springs into mind...)

I downloaded NVU for my Linux OS, but haven't properly set it up yet. For my 'Windows' hard-drive, I use "[B]EDITPLUS2[/B]". This is an HTML-editor. It has a 'quick-view' feature that you can switch from 'code-view' to 'browser-view', although the 'default browser view' is IE6's view. You CAN set it up to 'view in favorite browser', -but I find that time-consuming as it launches a seperate instance of 'favorite browser' e.g., -"Firefox", "Netscape", etc., but any changes you make to Editplus2 code aren't re-freshed on-the-fly to the 'favorite browser', you have to re-load/refresh the 'favorite browser' to view [I]those[/I] changes... Since I often am running multiple processes at the same time, having a full browser open and sucking-up resources only slows me down...

In a nutshell, -I try to write 'for all browsers', viewing in my editor's native IE-mode, [B]check in Firefox[/B], [U]validate[/U], check browsers again, etc... A bit redundant but I get by with it.

I recommend EditPlus2. Others favor "HTML-Kit". I found HTML-Kit ...difficult to learn. I just couldn't get my skull around it, try as I might. It for me lacked the intuitiveness that seems to come from Editplus2, but I will concede that we used EditPlus2 at the college so I am quite biased in it's favour.

@BrendiauthorFeb 02.2007 — #Okay, WebJoel, thanks for all the info. But do you think since I removed all the " " things that my site will work on the web? I did a check on it and the report says that it is valid html; and I can open it and view it in Windows Explorer, html-kit & etc. I do have Adobe-Go-Live, but I haven't learned how to use it yet. I have never used Firefox or had any experience with it.

Brendi

@Tweak4Feb 02.2007 — #But do you think since I removed all the " " things that my site will work on the web?[/QUOTE]

If anything, it should work [I]better[/I]. The non-breaking space was never meant to be an aid to layout in the way your original page used it.

To quote http://www.sightspecific.com/~mosh/WWW_FAQ/nbsp.html:

"It is generally discouraged to use a non-breaking space, or a series of non-breaking spaces to 'force' an indentation. This practice is discouraged for two primary reasons. First, not all browsers handle the   entity properly and may in fact ignore it when rendering the document. Second, the practice of trying to "force" a specific presentation is often frowned upon as it tends to fail and/or makes it more difficult for some readers whose browsers may be configured differently from your own."

@BrendiauthorFeb 02.2007 — #Thanks people! My site does work in Firefox and anything else I have tried it in.

Brendi

@BrendiauthorFeb 03.2007 — #How do I add a few spaces between 3 pictures in HTML code that are supposed to be centered across the page without having to use the " " between them? I do not want them right next to eachother.

Brendi

@felgallFeb 04.2007 — #There should be NOTHING in the HTML to position anything as that isn't what HTML is for. HTML is there to define what the content is - paragraphs, lists, images etc.

Appearance and positioning are what stylesheets are for. All of the positioning of the elements in the page should be done in the stylesheets. That way you can have one stylesheet for the [b]screen[/b], one for [b]print[/b], one for [b]handheld[/b], one for [b]tv[/b] etc laying the page out appropriately for the different size available in each.

Also in #HTML _↴

Table values confined to a particular area Fancy Links?Div

Success!

Help @Brendi spread the word by sharing this article on Twitter...

Tweet This

Can Someone Tell Me What HTML code

23 Comments(s) _↴

Also in #HTML _↴

Success!

Social

Version

Can Someone Tell Me What HTML code

23 Comments(s) ↴

Also in #HTML ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

23 Comments(s) _↴

Also in #HTML _↴