Welcome to the MacNN Forums.

surferboy · Oct 5, 2004, 03:12 AM

I am a total beginner at HTML. I have been writing an html document with bbedit that looks perfect on safari, but looks all jumbled up in internet explorer for the mac. I realize there are many, many variables that can cause this (encoding, doctype, etc.), but can anyone lend me a little advice as far as a starting point to try to correct this?

Hours and hours of time- only to realize that it looks mixed up on Explorer- very frustrating.

Thanks for the input!

dtriska · Oct 5, 2004, 03:13 AM

You'll need to post the code, or a link to the file.

surferboy · Oct 5, 2004, 08:21 AM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>test2</title>
<link rel="stylesheet" href="file://localhost/Users/jasonbrowdy/Documents/KJOC%20Website/Stylesheets/test2.css" type="text/css" />
</head>
<body bgcolor="#CCCCCC" link="#0000FF" alink="#00FF00">

<div id="header">

<h1><img src="Pictures/logosm.gif" alt="" width="157" height="80" align="center"/></h1>
<h2>Surgical Technique</h2>
<h3><a href="/Users/jasonbrowdy/Documents/KJOC Website/Home.html"><img src="/Users/jasonbrowdy/Documents/KJOC Website/Pictures/home2.gif" /></a></h3>

</div>

<div id="content">
<div class="pictures">
<a href="/Users/jasonbrowdy/Documents/KJOC Website/Pictures/testpic.png" align="middle"><img src="/Users/jasonbrowdy/Documents/KJOC Website/Pictures/testpicthumb.png" alt="alt name" width="175" height="49" align="right" /></a>
</div>
sample paragraph. <a href="/Users/jasonbrowdy/Desktop/KJOC 04/KJOC 2004/KJOC 2004.1 II/Knee/ACL/PowerPoint/acl graft talk 8-5-01.ppt">link to powerpoint</a>

</div>

<div id="navigation">
<a href="http://www.espn.com">ESPN</a>
<a href="http://www.chicagotribune.com">Tribune</a>
</div>

#content
{
padding: 15px 20px 20px 20px;
background-color: inherit;
width: 80%;
position: absolute;
top: 20%;
left: 10%;
z-index: 2;
vertical-align: text-top;
}

#navigation
{
width: 7%;
padding: 2px 2px 2px 10px;
background-color: transparent;
position: fixed;
top: 20%;
left: 0.5%;
border-color: #FFF;
border-width: medium;
border-style: double;
z-index: 1;
margin: 15px 0 0 1%;
vertical-align: text-top;
}

h1
{
width: 110px;
height: 50;
position: absolute;
left: 10%;
top: 2%;
padding: 2px 20px 20px 20px;
}

h2
{
text-align: center; color: #F63; text-indent: 25px;
top: 2%;
font-size: 64pt;
font-weight: bolder;
color: #F63;
margin: 30px 0 5px 0;
width: auto;
}

h3
{
position: absolute;
right: 5%;
top: 2%; color: #9F3;
margin: 5 5 30px 5;
width: auto;
height: auto;
}

#header { background-color: #60F; }

.pictures
{
width: auto;
height: auto;
margin: 5px;
}

OptimusG4 · Oct 5, 2004, 08:51 AM

You linked your stylesheet and images to your local drive. Any uploading of the site to a server will show the page as garbage compared to what it will look like on your machine. So far thats what I can spot, in a hurry since I'm off to work.

mdc · Oct 5, 2004, 08:53 AM

there are a few things wrong here.

1. your links to images/css file won't work if you upload this to the internet, since they are pointed to a folder on your hard drive. your website is in JOC Website folder. so your links should all begin from there.
in other words. instead of a link saying /Users/jasonbrowdy/Documents/KJOC Website/Home.html it should be home.html.
instead of /Users/jasonbrowdy/Documents/KJOC Website/Pictures/testpic.png it should be Pictures/testpic.png

2. try make every file you are going to upload lowercase. some servers are casesensative and having upper and lowercase will bring issues.

3. remove spaces from filenames, or use a _ instead of a space. again, it will save issues for you.

4. you are linking your css file in your header with the rel=stylesheet which is fine (except for the link, see point 1.) but then you seem to have pasted your entire css file to the bottom of your html code. this is not needed, unless you actually want your css coming up as text on your webpage. if you did that so we could see your css, then ignore this step.

5. the body bgcolor link & alink. you can take those out since they are redundant since you can put those colors into your css file.

6. if home.html is your starting page, i suggest renaming it to index.html (or default.html depending on your webserver. index.html should be fine)

7. any position: fixed in your html will not work on internet explorer windows. it is not up to date on the css. so you might want to find a work around for that.

i suggest you fix these things and then find a place to upload it onto the internet and then post a link to it here. personally, i find it a lot easier to troubleshoot a site if i can see how it is rendering. it is too early for my brain to look at the code and visualize it.

hope that helps.

surferboy · Oct 5, 2004, 09:41 AM

Thank you so much for the thoughtful reply. Just a few points:

(1) I pasted my css code just so you can look at it- I realize it does not have to be there
(2) right now, I am just testing the code out, so the folders, etc. are on my local hard drive
I realize that you won't get the images yourself, but I thought you might have some
insight just by looking at the code
(3) Most of my issues are based around the graphics I am trying to have at the top of the
page- I think it will be simpler to create one large graphic and use it as a single picture?
(4) I will keep plugging away. I will fire more questions as they come up. Thanks again.
(5) Do you know if there are stock pictures to help design a web page (such as the graphic at the very top of your page that may have links, etc.?

mdc · Oct 5, 2004, 12:31 PM

not sure about stock pictures.
if you are using fireworks (macromedia) or photoshop/imageready ([http://www.adobe.com]adobe[/url]). you can create your image and then use the slice tool to creak html links and then save the entire page with the corresponding html. then you can copy that html and place it in your document and you will have a sliced header image you created with working links.

eyadams · Oct 5, 2004, 12:38 PM

I'm at work and can't test this on Safari. However, it sure looks weird under FireFox. I took a look at the document and fed the HTML and the CSS to some of the free validators out on the Internet (I like the W3's the best). Some of these issues won't affect the formatting, but really do need to be fixed.

From the HTML document:

XHTML documents should always have the first line "<?xml version="1.0" encoding="UTF-8"?>"
No "<html> ... </html>" tags.
The "align" attribute in the "<img ...>" tag doesn't support "center" as a value - you were probably looking for "middle". Also, in XHTML the "alt" attribute is required, but missing throughout.
The "<href ...>" tag doesn't have an "align" attribute. You should wrap that line in "<span> ... </span>" tags and either incline the styles or create a new style class in your style sheet.

And there are two problems from the CSS:

You often leave out units when specifying sizes - for example, you specify "height: 50" for the "h1" tag, but you don't say 50 what - pixels, percent, em. Go through and clean all your sizing elements.
You can't use "position: absolute" with the "margin" attribute, as you do in the "<h3>" style. At least, that's what one validator said. I'm not 100% sure that it's wrong.

Clean up those issues and try again. Also, don't feel too bad if it never looks right under IE for Mac - it sucks. It's style sheet support is notoriously poor. Get FireFox, and then test on Windows using IE, which is completely different.

surferboy · Oct 6, 2004, 08:59 AM

Thanks so much for the advice and insight. I realize that issues like these can be answered by reading books. In fact, I am most of the way through Elizabeth Castro's HTML book (it's simple, but not very clear at times). However, there is a book out there on every piece of software and forums like these often make it much easier to resolve issues than reading an entire book.

That said, I need a little advice. My website is relatively simple. I need to design a basic template page with a banner at the top with a title, etc., and possible a bar on the left side for navigation buttons, etc. It does not need to be elaborate or fancy. In the rest of the page is going to be text. It's like a virutal textbook- each page has different text, but the basic graphics will be the same.

Now, if I want to do that, should I just create the entire graphic look with something like Adobe ImageReady- and simply use that same page over and over, adjusting the content for each page? If I do that, and I make the design a specific size and save it as a gif, what happens if someone has a large screen and makes the browser window bigger- the gif will not expand with it? Also, using bbedit, I can use a picture file as background- should I create a gif and then set it as background, or simply create the gif in ImageReady and place it in the html code?

I hope the question is clear. I feel rather dumb for not knowing this stuff- but I am truly a dabbler (but I am willing to learn).

Thanks again.

Mediaman_12 · Oct 6, 2004, 11:21 AM

Have you tryed asking these questions over at http://www.sitepoint.com/forums/ they seam to be full of knowlageable, helpfull people (I use there CSS forum quite a lot), and have some persific forums for people just starting out with HTML.

mdc · Oct 6, 2004, 11:31 AM

don't you dare feel stupid for asking questions. do you think everyone just magically knew about things. no one here is going to speak wrongly of you for asking questions.

go to my website [ http://mike.cosentino.com ] ignore the content and look at the style of it. there is a top banner with an image, there is a right "sidebar" with links on it, and there is a left 'main section' with my blog. the rest of the pages, are a bit different, ignore those.

if that is the style that you are wanting to go for. then i would really suggest css. a template for that style page can be whipped up really quickly. you can move the sidebar to the left if you want it that way. then in the top banner section you can put your image. then put your links and content in. save the page. then take the template of the site and change the content for every other page you have.

if that would suit you and if you want me to give you a hand either pm me or message me (aim name is i my profile)

surferboy · Oct 6, 2004, 12:25 PM

Thanks again. I have been reading about tables and their usefulness in creating a page's visual layout. I am going to read about tables and then framesets. Once I do those two things, I will try to tackle the simple task of creating a visually senseable and useful webpage.

Unfortunately, I have a different career and can only mess with this stuff by the seat of my pants.

I will take you up on the offer eventually. When I do, I'll give a shout. Thanks again.

wataru · Oct 6, 2004, 01:07 PM

Do not use tables to create the layout of your site. That is the wrong, broken way to do it. Instead, learn CSS. XHTML + CSS is the way the web was meant to be done.

surferboy · Oct 6, 2004, 02:59 PM

....but, tables seem to be the easiest way to do what I want. I understand the basics of xhtml and css- but tables are so simple. Is there something intrinsically wrong with tables (lack of support, etc.)? If you don't use tables, how do you design your page? Third part apps, or total by hand coding?

Thanks for the input

surferboy · Oct 6, 2004, 03:03 PM

If you look at the source code for this website, there are tons of tables behind the design. Again, for a neophyte, it seems to be the "easy way out".

More thoughts....?

Chuckit · Oct 6, 2004, 07:03 PM

Originally posted by surferboy:
....but, tables seem to be the easiest way to do what I want. I understand the basics of xhtml and css- but tables are so simple. Is there something intrinsically wrong with tables (lack of support, etc.)? If you don't use tables, how do you design your page? Third part apps, or total by hand coding?

The idea behind CSS and XHTML is to separate your content from the way it looks. That's why we now use spans with classes and all that rather than just using the FONT tag. The markup in your HTML is supposed to tell WHAT it is, not how it looks. This makes pages a lot easier to display in formats other than on traditional Web browsers (e.g. readers for the blind, cell phones). Tables should only be used for tabular data. That's the idea.

Also, tables are very inflexible and old-fashioned. If you want to see why modern Web design techniques are better, see css/edge.

bmedina · Oct 6, 2004, 07:28 PM

For a good guide to creating simple pages like you describe, go to this page for the book Web Standards Solutions and read through the sample chapter. You'll need some background in CSS, but it seems as though you have that already. Using that chapter as a guide, my fiancee and I created a simple web site for our wedding.

Tables may seem easier at first, but they quickly become a big headache to maintain.

wataru · Oct 6, 2004, 10:14 PM

Originally posted by surferboy:
If you look at the source code for this website, there are tons of tables behind the design. Again, for a neophyte, it seems to be the "easy way out".

More thoughts....?

The code for this website is definitely not something you should aspire to.

Yes, tables are easy to understand, but they're also inexact, wasteful, and symantically improper. If you use them as a crutch now, you will find it harder to learn the right way to do it later.

The biggest reason to use CSS is because you can control the style of your entire site just by editing one file. If you stick with tables, you will have to edit every single page of your site whenever you want to change something simple like the width of a column.

surferboy · Oct 7, 2004, 01:58 PM

Thanks for the input. I definately see the wisdom to keeping things simple and using css. What about using framesets and frames? Is that frowned upon as well?

Again, great advice from a lot of smart people out there- thanks.

surferboy · Oct 7, 2004, 06:32 PM

OK- I have posted the basic layout for my page. What I can't figure out is how to control the text in the navigation bar on the left side. When the window is made smaller, the words crunch and elongate. How can I make the words static, so they don't crunch up? Do I have to use absolute positioning instead of %?

I have posted both the html code and the css markup under it.

Advice is appreciated.

<!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>
<title>Technique Template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="template.css" />
</head>
<body bgcolor="#CCCCCC" text="#000000" link="#0000FF" alink="#00FF00" vlink="#FF00FF">

<div id="header">
<div class="headgraphic">
<a href="http://www.kerlanjobe.com"></a> <img src="Pictures/images/finalogo.gif" alt="logo" width="98" height="50" />
</div>
</div>

<div id="maincontent">

<p>
this is test stuff. not to be taken serioulsy
</p>

</div>

<div id="sidebar">
<div class="guts">
<p>this is also test shtuff,but if you want it to wrap
you gotta tell it to.
</p>
</div>
</div>
</body>
</html>

CSS Markup

body
{
margin: 0;
padding: 0;
}

#header
{
background-color: #36C;
padding: 0 0 25px 0;
}

.headgraphic { padding: 2%; }

#maincontent
{
float: right;
width: 87%;
}

#sidebar
{
float: left;
width: 10%;
background-color: #36C;
padding: 0 0 100% 0;
}

.guts
{
background-color: #36C;
float: left;
width: 90%;
margin: 5%;
overflow: auto;
vertical-align: baseline;
}

mdc · Oct 7, 2004, 06:47 PM

try this:

<!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>
<title>Technique Template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="template.css" />

</head>
<body bgcolor="#CCCCCC" text="#000000" link="#0000FF" alink="#00FF00" vlink="#FF00FF">

<div id="header">
<div class="headgraphic">
<a href="http://www.kerlanjobe.com"></a> <img src="Pictures/images/finalogo.gif" alt="logo" width="98" height="50" />
</div>
</div>

<div id="sidebar">
<div class="guts">
<p>this is also test shtuff,but if you want it to wrap
you gotta tell it to.
</p>
</div>
</div>

<div id="maincontent">

<p>
this is test stuff. not to be taken serioulsy
</p>

</div>

</body>
</html>

-css-

body
{
margin: 0;
padding: 0;
}

#header
{
background-color: #36C;
padding: 0 0 25px 0;
}

.headgraphic { padding: 2%; }

#maincontent
{
}

#sidebar
{
float: left;
width: 200px;
background-color: #36C;
padding: 0 0 100% 0;
}

.guts
{
background-color: #36C;
float: left;
margin: 10px;
overflow: auto;
vertical-align: baseline;
}

guts is a is inside a 200 pixel width. guts does not need the percent since you can just put a margin/padding around it. the sidebar is not going to get any bigger or smaller and neither will the text inside it.

wataru · Oct 7, 2004, 07:50 PM

Originally posted by surferboy:
Thanks for the input. I definately see the wisdom to keeping things simple and using css. What about using framesets and frames? Is that frowned upon as well?

Again, great advice from a lot of smart people out there- thanks.

Frames can be nice, but there are better ways to handle that, too.

If you want frames because of the static content (for instance, navigation that doesn't move when you scroll the main content area), that is better handled with CSS's position: fixed property.

If you want frames so that you don't have to change information on every single page of your site, then server-side includes and PHP are the best way to handle that.

Apfhex · 09:54 PM

Some good information for CSS styles in this thread. I'm working on a redesign for my personal site and had begun to make it all with tables (like I've done in the past), but now I've got some good CSS setup and it's a lot nicer (not to mention looks right in IE5:mac, which my tables didn't for some reason). Coding with style sheets is fun.

Only thing I'm having a problem with is that I have a style

Code:
#maintables   { text-align: justify; width: 500px; height: auto }

and I want this centered on the page. Actually, I want all elements on the page centered by default, and I already have the body of the document centered with text-align: center under body in my style sheet, which should work...

[EDIT: I guess I had to set the left and right margins to auto. Hmm, I wish that leaving them unchanged would just have them center like everything else.]

surferboy · Oct 7, 2004, 09:18 PM

mdc,
Thanks, looks very good. By the way, I created a division simply to create the left side bar and the header, but when I type text, etc. in these divisions, I want to be able to format the text independant of the side bar- so I created a class within the division that contains the side bar. My hope is to format them separately. The rationale is good, but I am not sure if I am doing it correctly. Any thoughts?

Mediaman_12 · Oct 8, 2004, 07:37 AM

Originally posted by Apfhex:
Actually, I want all elements on the page centered by default, and I already have the body of the document centered with text-align: center under body in my style sheet, which should work...

text-align: center is suposed to center just the text, unfortunately MS decided ot should center evrything in IE. To make other 'non text' items center you need to set both the right and left margins to auto, you will also need to set a width for this method to work.

bmedina · Oct 8, 2004, 06:26 PM

Yes, centering is one the most annoying things about using CSS.

To see how to center a fix-width layout (i.e. the entire page), see here: http://www.simplebits.com/notebook/2...centering.html

To see how to center a single non-text item, either horizontally or vertically, study the css used here: http://www.wpdfd.com/editorial/thebox/deadcentre4.html

Angus_D · Oct 9, 2004, 06:32 AM

The [CODE] vB tag exists for a reason. Use it.

Apfhex · Oct 9, 2004, 03:34 PM

Originally posted by Mediaman_12:
text-align: center is suposed to center just the text, unfortunately MS decided ot should center evrything in IE. To make other 'non text' items center you need to set both the right and left margins to auto, you will also need to set a width for this method to work.

Right. It makes perfect sense that text-align should only change the text and not other things, I'm just too used to table based layouts. Once you know you have to set the margins, it's all dandy.

And those are some useful URL's, bmedina.

surferboy · Oct 11, 2004, 02:43 AM

First, thanks for all the help thus far. I was truly enjoying playing with HTML and trying to design this website until now. I feel like pulling my hair out! All I want to do is create a few pages that will look similar on a mac and a pc. The layout is simple: a blue banner across the top and one on the left. A few pics with links on the top banner and a few links on the sidebar.

Things look great on Safari, but different on Windows IE.

If anyone is willing to help me tackle why this is and how to correct it I would be incredibly grateful. I have been tinkering with it- and it's driving me nuts.

At the top is my html code and below it is my css markup. Thanks in advance.

HTML

<!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>
<title>Technique Template</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="/Users/jasonbrowdy/Documents/KJOC Website/template.css" />
<script type="text/javascript">

</script>
</head>
<body bgcolor="#CCCCCC" text="#000000" link="#FFFFFF" alink="#00FF00" vlink="#FF00FF">

<div id="header">
<table id="Table_01" width="1000" height="90" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="images/standhome_01.png" width="1000" height="1" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="images/standhome_02.png" width="789" height="89" alt=""></td>
<td>
<a href="index.html">
<img src="images/indexicon.png" width="90" height="86" border="0" alt=""></a></td>
<td rowspan="2">
<img src="images/standhome_04.png" width="121" height="89" alt=""></td>
</tr>
<tr>
<td>
<img src="images/standhome_05.png" width="90" height="3" alt=""></td>
</tr>
</table>
</div>

<div id="sidebar">
<div class="logo">
<a href=http://www.kerlanjobe.com><img src="Pictures/logosm.gif" alt="" width="157" height="80" /><a>
</div>

<div class="guts">
<p><a href="file://localhost/Users/jasonbrowdy/Documents/KJOC%20Website/link1.html"> ACL Rehabilitation</a></p>
<p><a href="file://localhost/Users/jasonbrowdy/Documents/KJOC%20Website/link2.html"> ACL Instrumentation</a></p>
<p><a href="/Users/jasonbrowdy/Documents/KJOC Website/arthrofib.html"> ACL PowerPoint</a></p>
</div>
</div>

<div id="maincontent">
<p>The new iMac G5, which begins shipping worldwide mid-September, features the high-performance G5 processor and a stunning new design that integrates the entire computer right into its 17- or 20-inch flat panel display. The iMac G5 packs a complete computer system into a mere two inches of depth � the world�s thinnest desktop computer, with a G5 processor running up to 1.8 GHz.

Apple Support Site Among Top 10
The Association of Support Professionals announced the winners of its seventh annual "Ten Best Web Support Sites" competition, showcasing excellence in online service and support. Apple was included in the 2004 list of winners, chosen by evaluating overall usability, design and navigation; knowledge base and search implementation; interactive features; and personalization.

Low-Budget Sci-Fi Epic
In just 15 days, writer, director, producer, editor and production designer Graham Robertson and coproducer Scott Bailey shot their campy feature film, �Able Edwards,� in mini-DV on a budget of $30,000.

Workgroup Cluster for Bioinformatics Video
See why scientists are adopting Apple technology when they need the power of high-performance computing.

Sprint Certifies Xserve and QuickTime
Sprint and Apple announced that the Xserve G5 and QuickTime have been certified as mobile multimedia delivery platforms for Sprint�s new PCS Vision Multimedia Services.

Satisfied Customers
InfoWorld�s Tom Krazit writes, �The American Customer Satisfaction Index (ACSI) measures the attitudes of consumers in several different categories, including PCs and online Web sites, on a scale from zero to 100 � With a score of 81, Apple�s customers are the most satisfied of any other PC vendor measured in this index.�

Students Follow the Music to Apple Laptops
Jefferson Graham writes for USA Today, �Apple�s trendy iPod digital music player, which has revitalized the company, is giving laptop sales a boost during back-to-school season. Many students, after falling in love with the iPod, are packing for college with new Apple Macintosh computers.�

Broadway: The Movie
Rick McKay�s feature documentary, �Broadway: The Golden Age,� brings the era (30s through 60s) back onstage for a belated curtain call by more than 100 actors, writers, composers and producers.

An Open Music Platform
John Gruber observes on Daring Fireball, �The iPod, iTunes, and iTMS work with any modern personal computer, Windows or Mac. Yes, the original iPod debuted as a Mac-only peripheral, and iTunes for Windows appeared even later � but Apple offered complete support for Windows relatively quickly. The iPod and iTunes are fully compatible with your existing CD and MP3 music collections.�

A Sense of Security
An Independent News writer tells of his switch from Windows to a 15-inch PowerBook: �Two months in, I have a prevailing sense of security and safety. There�s been not a sniff of system meltdown. The software and security updates are easy, convenient and (via broadband) fast. The sense of considerable computing power and massive processing going on is very evident, but it feels secure behind the OS X firewall and a router; and all with no need for antivirus software.�

Today on Netscape
�_5 Real Estate Deal Breakers
�_Dangers of Birth Control Patch
�_The Trendiest 6-Figure Jobs
�_Scary Fun: Movie Scene Trivia
�_Luxurious Sheet Sets Under $50

_
�_Cool Site: Humphrey Bogart
�_The Movies' Puppet Sex Scandal
�_Found: An Ancient Sea Monster
�_Why Big Stars Turn to Animation
�_See the Video of the Day

Downloads of the Day
�_Netscape 7.1 Browser
�_AOL Instant Messenger

Just For Fun
�_Joke of the Day
�_Greeting Cards
�_Horoscopes
�_Photo Personals

International: Japan | UK | France | Germany | More...

About Netscape Network | Netscape Info | Help | Download Latest Netscape Browser | Enterprise Solutions

�2004 Netscape. All Rights Reserved. Terms of Service | Privacy PolicyThe new iMac G5, which begins shipping worldwide mid-September, features the high-performance G5 processor and a stunning new design that integrates the entire computer right into its 17- or 20-inch flat panel display. The iMac G5 packs a complete computer system into a mere two inches of depth � the world�s thinnest desktop computer, with a G5 processor running up to 1.8 GHz.

Apple Support Site Among Top 10
The Association of Support Professionals announced the winners of its seventh annual "Ten Best Web Support Sites" competition, showcasing excellence in online service and support. Apple was included in the 2004 list of winners, chosen by evaluating overall usability, design and navigation; knowledge base and search implementation; interactive features; and personalization.

Low-Budget Sci-Fi Epic
In just 15 days, writer, director, producer, editor and production designer Graham Robertson and coproducer Scott Bailey shot their campy feature film, �Able Edwards,� in mini-DV on a budget of $30,000.

Workgroup Cluster for Bioinformatics Video
See why scientists are adopting Apple technology when they need the power of high-performance computing.

Sprint Certifies Xserve and QuickTime
Sprint and Apple announced that the Xserve G5 and QuickTime have been certified as mobile multimedia delivery platforms for Sprint�s new PCS Vision Multimedia Services.

Satisfied Customers
InfoWorld�s Tom Krazit writes, �The American Customer Satisfaction Index (ACSI) measures the attitudes of consumers in several different categories, including PCs and online Web sites, on a scale from zero to 100 � With a score of 81, Apple�s customers are the most satisfied of any other PC vendor measured in this index.�

Students Follow the Music to Apple Laptops
Jefferson Graham writes for USA Today, �Apple�s trendy iPod digital music player, which has revitalized the company, is giving laptop sales a boost during back-to-school season. Many students, after falling in love with the iPod, are packing for college with new Apple Macintosh computers.�

Broadway: The Movie
Rick McKay�s feature documentary, �Broadway: The Golden Age,� brings the era (30s through 60s) back onstage for a belated curtain call by more than 100 actors, writers, composers and producers.

An Open Music Platform
John Gruber observes on Daring Fireball, �The iPod, iTunes, and iTMS work with any modern personal computer, Windows or Mac. Yes, the original iPod debuted as a Mac-only peripheral, and iTunes for Windows appeared even later � but Apple offered complete support for Windows relatively quickly. The iPod and iTunes are fully compatible with your existing CD and MP3 music collections.�

A Sense of Security
An Independent News writer tells of his switch from Windows to a 15-inch PowerBook: �Two months in, I have a prevailing sense of security and safety. There�s been not a sniff of system meltdown. The software and security updates are easy, convenient and (via broadband) fast. The sense of considerable computing power and massive processing going on is very evident, but it feels secure behind the OS X firewall and a router; and all with no need for antivirus software.�

Today on Netscape
�_5 Real Estate Deal Breakers
�_Dangers of Birth Control Patch
�_The Trendiest 6-Figure Jobs
�_Scary Fun: Movie Scene Trivia
�_Luxurious Sheet Sets Under $50

_
�_Cool Site: Humphrey Bogart
�_The Movies' Puppet Sex Scandal
�_Found: An Ancient Sea Monster
�_Why Big Stars Turn to Animation
�_See the Video of the Day

Downloads of the Day
�_Netscape 7.1 Browser
�_AOL Instant Messenger

Just For Fun
�_Joke of the Day
�_Greeting Cards
�_Horoscopes
�_Photo Personals

International: Japan | UK | France | Germany | More...

About Netscape Network | Netscape Info | Help | Download Latest Netscape Browser | Enterprise Solutions

�2004 Netscape. All Rights Reserved. Terms of Service | Privacy Policy

</p>
</div>
</div>
</body>
</html>

HERE IS CSS

body
{
margin: 0;
padding: 0;
}

#header
{
background-color: #36C;
padding: 20px 20px 20px 320px;
}

#maincontent
{
margin-left: 220px;
margin-right: 20px;
margin-top: 40px;

}

#sidebar
{
position: fixed;
top: 0;
left: 0px;
float: left;
width: 180px;
background-color: #36C;
padding: 40px 0 100% 0;
background-position: left;
}

.logo { padding: 0 0 0 20px; }

.guts
{
background-color: #36C;
left: 0;
margin: 5%;
overflow: auto;
width: 90%;
background-position: left;
}

Chris O'Brien · 06:06 AM

Can't you just link to the page rather than posting all the code (and you're not even putting the code in vB [ code ] tags either!).

If you want, I'll host it for you if you don't have anywhere, just until we can get this sorted for you. PM me, if you want to.

By the way <p> tags are for paragraphs. You have one set enclosing everything in what you have below, which doesn't fit with the layout suggested in how you've pasted it... Edit: looking at it again, it seems like you just copied that from netscape's site in order to have some content, yeah? And what's with the table at the top?

Oh, and how come this thread is here instead of in the web dev forum?

surferboy · Oct 11, 2004, 08:13 AM

As a beginner, not sure about vB tags (I am using bbedit and pasting what i have there)

You are absolutely right, the content is just mumbo jumbo to see what the words look like.

I would love to upload it to you server. How do I do that? I have to go to work- I will check back with you this afternoon or late morning. If you don't mind lending me a hand, I'd love it.

Good question the location of the post. I just posted it here one night without thinking and it has stayed here ever since.

The reason for the table is that it is a graphic with a link in it. I made the graphic with ImageReady- and it seemed to be the most simple way to export it- as a table. But, I think it is possible to export without using tables?....

Thanks again.

Chris O'Brien · Oct 11, 2004, 08:28 AM

Yeah, there's no need to use tables for that

As for vB code - that's the forum code, not to do with your HTML. So, you would put all the stuff you've been posting inside [ code ] [/ code ] tags (without the spaces either side of the word code. Like so:

Code:
<html>
  <head>
    <style>
         body  {background: blue}
    </style>
  </head>
  <body>
       Stuff.
  </body>
</html>

If you look right below the text area where you type your reply, it says 'Instant vB Code'. Just a hint, there

surferboy · Oct 12, 2004, 10:52 PM

OK,
I have been at this for a week now, and I must say it is very frustrating. I come up with a design that looks great on one screen- but on a different sized screen- it is either too big (you have to scroll to see it all) or the border stops short. I don't like liquid layouts because I want my graphics, etc. to stay in one place even if the window is being resized. What is the best way to apply css to make the basic layout look the same on different screens!!??

Chuckit · Oct 13, 2004, 11:56 AM

It sounds like you're asking the impossible: "I want the page to have a different layout based on the size of the window but I don't want the layout to adjust to the size of the window."

Can you explain any way this is even logically possible?

Mediaman_12 · Oct 13, 2004, 02:53 PM

it sounds like he wants a fixed layout but always in the center of the screen (sort of like this page). That is fairly simple to achieve.

first the CSS

Code:
body {
  background-color: #e1ddd9;
  font-size: 12px;
  color:#564b47;  
  padding:20px;
  margin:0px;
  text-align: center; /* centers in IE */
}

#cent-box {       
  text-align: left; /* re aligns the text after the body center tag */    
  margin-left: auto; /* this is what centers the box */
  margin-right: auto; /* " " " */
  padding: 0 0 0 0;
  width: 550px;
min-height 600px; /* this value is ignored in IE */
height: 600px; /* which is why we still need this */
  background-color: #ffffff;
  border: 1px dashed #564b47; /* puts a border round so you can see what is going on */
}

now the HTML

Code:
<!--rest of usual header info-->
<body>
<div id="cent-box">
<p>This box should be in the center of the page</p>
</div>
</body>

You can use a controlled background image to make the 'off page' area more interesting without horizontal scrolling issues for users with smaller screens.
for some good ideas for CSS layout have you looked at the CSS Zen Garden it is a single HTML page which 100's of different Style Sheets can be applied.

tooki · Oct 13, 2004, 10:54 PM

Bear in mind that designs that force a certain window size (i.e. if you shrink the window smaller, it creates scroll bars, and if you stretch it larger, it just puts a margin), it's really bad user interface design. Part of the whole point of the web was fluid design, to separate the content from the layout, to let the viewer see it how they want. Why force some users to use a larger window than they want, and cause those who want it bigger to not be able to, when a fluid design pleases everyone?!?

tooki

surferboy · Oct 14, 2004, 08:06 AM

Guys,
Thanks for the input: I just want a design that fills up the screen, works on any browser and will expand as the browser window expands. Sorry I have trouble articulating what I want- but everyone has given me great advice so far.

Thanks again.

surferboy · Oct 14, 2004, 10:30 AM

I love the zen garden site. However, when I try to use the various css sheets from the different designs- I get the same output. Am I missing something?

Apfhex · 09:27 PM

Edit: My post was pretty stilly and irrelevant so I've removed it.

wataru · Oct 15, 2004, 10:42 AM

Originally posted by surferboy:
will expand as the browser window expands

That is fluid.