Topic: Agggh!! I want to break something!! (Page 1 of 1)

ok...ok... i know this is a site review section so by all means, please evaluate this for me.
This site is about as basic as you can get. It's for my wife's company and it's strictly information
and thats it.
www.curveshawaii.com

Now my problem is I don't completely grasp the whole style sheets thing, and Im sure my mistake is there.
The site is broken apart into different php sections (menu.php, header.php, body.php, footer.php) for ease
of use and I just use includes to place the elements.

When I initialy view the site it looks fine, but when I go to any page and return to my home page the contact
selector on the menu is smaller and there is nothing different with it in the code....

WIll one of you geniuses please take a peek at this and explain what Im doing wrong? (and please dont say using Dreamweaver)

thanks guys... (and gals)



wayoutwestenterprises.com

I can't seem to reproduce the problem your having, but peeking at your code I must say 'Stop using Dreamweaver'

Maybe you could post a couple of screenshots displaying the problem, and it'd be nice to know what browser(s) this is happening in too.

Hah! Seriously though, I can't see anything wrong with the CSS code or the HTML that defines it. Although I will recommend you stop using 'pt' to specify your font sizes. Point sizes are all well and good for print, but this isn't print, its web. The only place you should use pt sizes in CSS is for style sheets designed specifically for printing the document. The biggest problem with using point sizes for text is that most PC's at least by default) are set to 96ppi (PPI = Pixels-Per-Inch, similar to Dots-Per-Inch (dpi) but monitors don't have dots, so I use the term PPI to distinguish between the two), and Mac's are set to display 72ppi, meaning that an 8pt font on a Mac is bloody tiny and most likely completely unreadable.

If you want to see how much this effects most Mac users and any PC user that has altered the default PPI settings, go to Display Settings -> Settings Tab -> Click Advanced -> General Tab -> Under DPI Settings select, Select Custom from the drop-down menu -> Select 75% from the scale menu (which is basically 72ppi).... See how small 10pt type is compared to the 100% (96ppi) setting; now imagine how tiny 8pt or 7pt type will be with that setting.

Instead I recommend you either use px (pixel height) or, if you still want the user to be able to scale the overall font sizes from the browser settings (which is a good thing) then don't set any initial font size for the document and use % sizes for all inherited elements. Like 150% for headings, 80% for small type etc ect... Sometimes, by not designing at all, we become better designers.

I cannot say I am one of the best around (my own startup page had (well, still has problems with the cursed innerhtml) a lot of dirtiness), but i can tell that yes, if you are using dreamweaver, you should stop using it right now. I still do not understand how people use that, i personally find it way too cluttered and complicated to use, morseo than notepad will ever be. Anywaz,

some little adivce/pointers:

-Its pointless to have part of your stylesheet over two separate file and another integrated in the page. Keep all your stylesheet in one single css file. better and quickier for the browser (as the css file is alreeady in the internet files and all your browser has to do is read it rather than re-dl the stylesheet).
-Whats the 'swapImage' function for? I cannot find any page that uses it.
-You really need to separate aesthetic from your design (as dl said to me), get rid of many of the tag attributes (like bgcolor) and integrate them to your stylesheet
-That said, you dont really need that table labyrinth in your page. Your current desing can be easily (and cleaner) implemented with a div+css combo.

Indeed, most of your coding problems rely on an unproper usage of css. Good stuff to read:
http://www.w3.org/Style/CSS/learning http://www.w3schools.com/css/css_reference.asp

btw, the problem you actually ask hep for does not occur around (i am using ie, if that makes a difference). You may wanna try it in more than one browser.

EDIT: Geez, drac beat me to say what i said.

EDIT2: btw, drac, would not be better use em rather than percenteages (sp?) for font sizes? For what i know its better rendered in older browsers. I could be wrong ;P
__________________________________


Alevice's Media Library

Well, my first impression is that the web page has no Doctype. While that may not be the problem, you should really have one - the principle here being, let's work out the larger problems before we work out the smaller ones. I suspect that the lack of a doctype is accompanied by other non-standard things, as is usually the case. So I encourage you to work this out before worrying about smaller CSS (and other) problems, since those will likely change once you start doing things the right way on a larger scale.

Since you're using Dreamweaver, I suggest you start by taking a look at this alistapart article which explains how to get Dreamweaver to produce standard code: http://www.alistapart.com/stories/dreamweaver/

Worry about the Doctype first.

+ Personally I'd like to see a little more padding on your elements that hold your content. Looks like it's just a table cell so you could add some padding to your paragraph tags. Right now as I see it the text is nudged up against the side of your pink border.

+ The copyright link at the bottom is blue. The other links in the site besides the nav links are blue. I'd like to see a different color in there.

+ You might think of using a simple formmail script for your contact page instead of making someone use their own email. I've found that I get lots more email that way. The most well known of these is Matt Scripts. http://www.scriptarchive.com/formmail.html Give it a shot, it's really easy to use.

+ The last thing that bugs me is all the white space on the left side underneath the nav menu. The menu seems a little crowded, it could be spaced out quite a bit. There's a very nice example of how to create a CSS menu like Steve has here: http://www.thegoldenmean.com/why.html at http://www.ecoculture.com Take a look at that and see if it's something you can use.


:::11oh1:::

I also cannot duplicate the porblem.

But, I have to heartily agree with Slime - first things firts: get a doctype! Ideally XHTML 1.0 strict.

Then, get all your style declarations into one place. Having an external stylesheet and an inline style set serves no purpose and can only lead to confusion.

You have your font-family specified about a dozen times It's the same each time you specify it. So, rather than specify it for each element, just specify it for the BODY element. The others will follow suit (the attribute will cascade onto all child elements) if you don't specify something different.

Tables - what you have there looks like a nice clean table-less design. But I was shocked to see tables galore under the hood! Get rid of 'em, you don't need them for this - it's such a nice simple site, it deserves nice simple code. =)

And of course, another very important point that Alevice already brought up - seperation of style and content. That's the whole purpose of CSS, and since you'e started using it, you may as well go a step further and use it right. Get the inline html formatting out of your HTML tags and into your stylesheet. Even if you do stick eith tables, you can get rid of all those style attributes frim the table tags, and you can drastically reduce the number of tables and cells that you use.

Last but not least, get rid of dreamweaver!
Not that you should code in Notepad. There are a whole lot of great text-editors with all kinds of cool features that make them ideal for coding in. Of course, that still means coding by hand... =)

First off thanks for all the advise. I think I've gotten some of the best input here. I appreciate the honest opinions and what not.

To be honest most of the design is layed out in DW... and I must be years behind you guys as I'm clueless when it comes to
DOCTYPES?? I've always been a WYSIWYG kind of designer... I really tried to get this site as simple as possible, manualy going
in and deleting some of the excess code.

I've considered doing a form-mail script I just (ahem) still learning how to do so. The links will definately help.

DRAC: As for font sizes, it just appears like that in DW when you setup the style sheet. I think I need to go back and re-read setting
that up. I'm sure I've botched it all to pieces. I will be spending the next few hours disecting your feedback.

thanks again!

<img border=0 src="http://www.wayoutwestenterprises.com/images/rob_sig.gif
">

quote:

---

You have your font-family specified about a dozen times It's the same each time you specify it. So, rather than specify it for each element, just specify it for the BODY element. The others will follow suit (the attribute will cascade onto all child elements) if you don't specify something different.

---

Just for clarification:

In theory, a font-family specified for the <body> will cascade down to all other elements. Unforunately, browsers today are still affected by the "legacy table parsing" bug. That is, tables will not inherit styles specified in any parent element. This "bug" occurs in both quirks mode and standards-compliant rendering modes.

Try it. Add "font-size: 200%;" to the <body> tag of the page. No effect. Add a strict doctype. Still no effect.

So for now, it's necessary to select <body>, <table>, and any elements within the table, including <td> and <th>, in order for the inheritance to work correctly. It's redundant, but it's necessary.

All the more reason to get those tables out of there

So if I were to eliminate the tables how would I structure the layout? I dont like frames at all...
Im feeling really clueless around you guys now.... here I was thinking I was doing ok...hehehe.....

Check the FAQ.

Basically, you use CSS positioning to lay out a web page instead of tables. It's a good idea to start learning to use CSS now, so you won't be behind the times.

If you wanna see some examples of CSS layout in a major commercial site:
http://msn.espn.go.com/
http://www.wired.com/
http://www.inc.com/home/
http://www.fastcompany.com/homepage/
http://www.adaptivepath.com/
http://www.quark.com/
http://www.macromedia.com/

(Rumor has it apple.com is due for a CSS makeover also... )

And another must-see: http://www.csszengarden.com/

The CSS Zen Garden is a project where web designers can submit CSS files to be applied to the webpage. Click on some of the examples. The underlying HTML never changes. It's a great example of how flexible CSS design can be.




[This message has been edited by ozphactor (edited 08-30-2003).]

Another good example is mah startup page ;P.

I still cant get innerhtml method to work over mozilla =/

__________________________________


Alevice's Media Library

Rob - I did a quick hack of your index page to show you how I would go about it.

I haven't looked at this in IE yet (I use mozilla) but it should be pretty close in IE too - http://in-dented.com/temp/curveshawaii.html

A couple of notes -

in addition to not needing the tables, you had a lot of things wrapped in <p> tags. That serves no actual purpose and goes a bit further to blow the structure of your markup.

Also, you had a second link to a stylesheet listed down in the body - that doesn't work, and is also unnecessary. Kepp it all in one stylesheet.

Finally, you had no file extension in your links to the stylesheets - be sure to specify "file-name.css" in the href - not just "file-name".

Wow DL thanks, I've been trying to examine and understand each section that you broke apart. I guess I've been so reliant on progs
like DW that I didn't realize how much un-needed stuff gets tossed in.

The main reason I had the elements broken apart with different pages (menu, header, body, footer) was to be able to change the entire
site with one page change. Would I still be able to incoorperate that through this style? I mean take the few lines of code for the menu
and create a file that just contains that, etc. I don't know if thats redundant and creates alot more work then needed but Im trying to
get this down as much as possible.

I've been bouncing back and forth between recording sessions and here trying to figure this out so my brains a little scattered right now.

BTW - What would you recomend as far as text editors go? I copied the code and was about to paste it into... (tah-dah) DW... hello!?!?!?
I think I used one called editpro or something like that. Not sure.

I appreciate the help though! I will try and implement the changes and repost to see if I did it right or I hacked it to pieces!



[This message has been edited by Radical Rob (edited 08-30-2003).]

quote:

---

The main reason I had the elements broken apart with different pages (menu, header, body, footer) was to be able to change the entire
site with one page change. Would I still be able to incoorperate that through this style?

---

Are you using SSI or something? I'm a little lost. Anyways, I see no reason why you can't do that with a CSS-only layout. If anything, it's even easier to do so, because there's less code (those messy tables) to deal with.

And as for text editors, everyone here seems to have their own preference, so you should try out a few to see which suits your needs. This FAQ may be helpful:

FAQ: Can you recommend a code editor?

[EDIT: Darn it, how do you get that nifty FAQ graphic in there?]



[This message has been edited by ozphactor (edited 08-30-2003).]

oh my gawd.... just read about 200 pages about CSS... (well maybe not 200 but quite a bit)

Very interesting stuff. I guess I will just have to trial and error for a bit till I get it going the way it should.
The thing that sucks is that everyone says to stay away from progs like DW but macromedia has some cool
progs like fireworks that make some designs really easy.

I guess the old addage of WYSIWYG may not always be the best approach. I have another site I was going to
have previewed that I did with fireworks. (my first) Im sure I made a heck of alotof mistakes with that one.
So I will wait a while.

More or less no matter what approach you use to coding a website, you will be able to cut it up to allow for includes.

Out of curiosity, what method are you using to do the inclusions?

And yeah, there really was an *insane* amount of extra code in there that was completely uneeded. I've never actualyl used DW, but all of the code I've seen it put out has been horrible.

I personally use Textpad as my editor. It has great color coding options, great customizable treatment for different filetypes, tabbed interface for multiple files, and all kinds of other great little features.

I'm sold, great links.

Ramasax

Ok Im hoping this posts ok, if not I will delete it. This is the entire code for my index page.

After doing some reading I've discovered embedded styles and external styles. Now I see the
style being defined in the code but there is an external style file as well.

Im sure this will explain quite a bit. I tried really hard to keep it simple when I drafted the site out
on paper, I mean it really is a simple site, no difficult stuff anywhere.

Can you point out the flaws? (ulp... pen and paper ready......)

<html>
<head>
<title>.: CurvesHawaii :.</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="nofollow" href="ch_style" rel="stylesheet" type="text/css">
</head>

<SCRIPT>
<!--
function swapImage() {
var i,j=0,objStr,obj,swapArray=new Array,oldArray=document.swapImgData;
for (i=0; i < (swapImage.arguments.length-2); i+=3) {
objStr = swapImage.arguments[(navigator.appName == 'Netscape')?i:i+1];
if ((objStr.indexOf('document.layers[')==0 && document.layers==null) &#0124; &#0124;
(objStr.indexOf('document.all[') ==0 && document.all ==null))
objStr = 'document'+objStr.substring(objStr.lastIndexOf('.'),objStr.length);
obj = eval(objStr);
if (obj != null) {
swapArray[j++] = obj;
swapArray[j++] = (oldArray==null &#0124; &#0124; oldArray[j-1]!=obj)?obj.src ldArray[j];
obj.src = swapImage.arguments[i+2];
} }
document.swapImgData = swapArray;
}
//-->
</SCRIPT>

<STYLE>
<!--
a {text-decoration:none}
A:hover {text-decoration:none; color:#ff0000;}
A:link {text-decoration:none;}
.generaltext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #000000}
.menutext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 8pt; color: #c594b1; font-weight: bold}
.conentarea_title { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #000000; font-style: normal}
.whitetext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 9pt; color: #FFFFFF}
.smalltext { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 7pt; color: #000000}
-->
</STYLE>


<body bgcolor="#E1C4E1" background="images/curves_bg.jpg">
<p>
<?php include("header.php"); ?>
</p>
<!----- Begin of Main Content Table ----->
<table width="525" border="0" cellspacing="1" cellpadding="1" align="center">
<tr>
<td width="521">
<table width="98%" cellpadding="0" cellspacing="1" border="0" bgcolor="#c594ba" align="center">
<tr valign="top">
<td valign="top" height="160">
<table width="100%" cellpadding="5" cellspacing="0" border="0" align="center">
<tr valign="top">
<td width="92" valign="top" bgcolor="#FFFFFF">
<!----- Side Box ----->
<p>
<?php include("menu.php"); ?>
</p>
</td>
<td width="432" align="center" valign="top" bgcolor="#FFFFFF">
<!----- Content Box ----->
<p>
<?php include("cont1.php"); ?></p>
<!----- Content Box 2----->
<p>
<?php include("cont2.php"); ?></p>
<span class="box_text"><span class="smalltext"> </span></span></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>

<p>
<?php include("footer.php"); ?>
</p>

</span></span></p>
</body>
</html>

To be honest, there are a great deal of inherent flaws in the basic set up that would make it difficult to go line by line and point out flaws.

Many of them have been point out up above, and a few more can be ascertained by nosing through the code I put up. Not that my code is "the right way" or anything like that, but it does have a bit of the structure and simplicity that I think is needed for this page. Like I said, looking at the page, it seemed nice and clean and simple, but the code has torrents of things that aren't needed.

The number of tables seems a bit much, and the <p>'s and <span>'s that are stacked up along with them are very excessive. In particular you have a couple instances at the bottom where there is a set of nested spans, each with a different class, and those classes have conflicting font styles specified....and then there's not even anything in them!

The style specs should definately be consolidated to one place, whether external or in the head is really up to you, but I find external to be much more convenient, and more conducive to a production environment.

The way in which the link styles are specified is a bit troublesome. I wouldn't be surprised to find some occasional quirks resulting from that.

If you look at the style sheet I put up, you'll notice a bit more organization in the way styles are set up. The pseudo classes should be specified in a particular order to work properly -

a:link
a:visited
a:hover
a:active

(christ....I hope I remember that right )

though I have found that specifying link/visited/active in one group, and then hover afterwards seems to work just fine.

Now, once the included bit get pulled in, the code on that page is much oncreased, as are the instances of extraneously nested objects in odd configurations.

Hopefully some of that made a little sense

Feel free to ask any questions you might have about my code, and why it is the way it is.

*unveils a sledgehammer out of nowhere*

1. No doctype was specified.
2.You did not specified neither style type nor scritp stype (i.e.: <script type="text/javascript"> )
3. You still have separated you stylesheet in both an external file and a style tag. Integrete EVERYTHING CSS-RELATED into a SINGLE .CSS file.
4.This

<body bgcolor="#E1C4E1" background="images/curves_bg.jpg">

could (and should) be converted to this:

/*this is in your css file*/

body { background: #E1C4E1 url("images/curves_bg.jpg") ; }

5. Whats the js function for?
6. You still can exterminate those tables with divs + 'position:absolute'
7. WTF is up with all those span tags?
8. Keep everything inside tags (unless it is between quotes) lowercase.

The rest is fine i guess :P
EDIT: And what dl said as well.
__________________________________


Alevice's Media Library

quote:

---

though I have found that specifying link/visited/active in one group, and then hover afterwards seems to work just fine.

---

Funny, I don't remember that ever working for me. My a:active only works when placed after the a:hover. Well, I'll try it out and see...

quote:

---

[EDIT: Darn it, how do you get that nifty FAQ graphic in there?]

---

:FAQ:



Notice the difference. yes, i hate caps sensitive emoticons as well ;P

__________________________________


Alevice's Media Library

just curious, how did you decide on flash for your top banner?

ozp - perhaps it only works for me because I always specify my link/visited/active exactly the same....

heh....


Also, I'm assuming that the flash banner is an existing Curves banner rather than something rob made for it.

[This message has been edited by DL-44 (edited 08-31-2003).]

I jsut did that for a simple ooh ahh thingy... i was just messing with it, i know its nothing fancy.... maybe a little more
annoying than anything. This is the first layout just for the sake of "getting something online", I figured I'd get the
critiques on "how I should've done it" here and redesign something and take a little more time.

quote:

---

I figured I'd get the
critiques on "how I should've done it" here and redesign something and take a little more time.

---

Good answer

Hey DL, I wasn't able to view your CSS file... Im trying to break it all apart to understand... can you post plz.
Im trying to figure out the <div> tags... (after yet reading another dozen or so pages about css)

thnx

CSS is located here - http://in-dented.com/temp/ch_style.css

in case that doesn't work, I'll toss it in here too -

body {
background-color:#e1C4e1;
background-image:url(curves_bg.jpg);
font-family:verdana, helvetica, arial, sans-serif;
font-size:10px;
color:#000;
}

img {border:none;}

a:link, a:visited, a:active
{text-decoration:none}
a:hover
{
text-decoration:none;
color:#ff0000;
}

#flash
{
background-color:#fff;
color:inherit;
width:302px;
height:52px;
border:#c594ba 1px solid;
margin:10px auto;
}

#main
{
background-color:#fff;
color:inherit;
width:525px;
height:100%;
margin:10px auto;
padding:5px;
border:#c594ba 1px solid;
}

#menu
{
width:100px;
height:100%;
margin:5px;
float:left;
}

#menu a:link, #menu a:visited, #menu a:active
{
background-color:#e1C4e1;
color:#000;
display:block;
width:100px;
height:14px;
margin:1px;
padding:2px;
text-decoration:none;
font-weight:bold;
}

#menu a:hover
{
background-color:#c594ba;
color:#fff;
}

.content
{
background-color:transparent;
color:#000;
width:395px;
padding:0;
margin:5px 5px 15px 5px;
float:right;
border:#c594ba 1px solid;
}

.noheader
{
border-top:#c594ba 15px solid;
}

.center
{text-align:center;}

.content h1
{
background-color:#c594ba;
color:#000;
height:14px;
font-size:11px;
font-weight:bold;
margin:0 0 5px 0;
padding:1px;
}

#footer
{
background-color:transparent;
color:#000;
text-align:center;
margin:10px auto;
}

.photo-left
{
float:left;
margin: 5px;
border:#000 1px solid;
}

.clear
{
clear:both;
}

quote:

---

Im trying to figure out the <div> tags...

---

How much is there to figure out?

Basically, <div> stands for "document division." It's a generic block-level element (block-level meaning that it creates a line break before and after it, as opposed to "inline" which means, well, in line.)

A <div> tag has no visual or structural significance on it's own, and it's only true purpose in life is to be manipulated by CSS. Which is why you rarely see <div>s in old-school table layout sites, and why you do see them in CSS layout sites.

"okokokokokokok......" - joe pesci (lethal weapon)

I now realize how reliant I was on programs like DW. I spent the last two hours building what probably took DL all of 5 minutes to throw together. I created a box with 4 links in it. (crowd sits and stares......)
I even tried to get fancy and create 3 boxes (1 menu on left, content in the middle, and another menu
on the right) and that went to $#!t.

I've been analyzing just about every link that has been referred to me and here it is, 3:10am and my
weary eyes are all of about to give in and just deal with crappy code.... Hell I've even figured out how
to create, edit and utilize CSS within DW being that Im so reliant of it. (sounds kinda like crack eh???)

Seriously, you guys must think Im a moron, but I can't seem to get a grasp of the whole ..... uh... concept!?? And to make things worse, I was going to post it just to show you guys I am really trying and when I redid my OS last week for a major network upgrade, the one proggie I didnt save settings for
was my filezilla.... so I've lost all my login, info for all the sites I take care of.... gawwwwdd.. i need coffee.

Maybe Im just to old to start learning from step one, I dunno. You guys have all been really helpfull though. I guess you can take a look at the Topic title and thats what I feel again... :-)




[This message has been edited by Radical Rob (edited 09-02-2003).]

Hehe

For the record, I spent about 20 minutes coding that page.

But, I've spent years getting to the point where I can do that...
Don't be worried that you dont' grasp the whole concept yet - it takes time. There are a lot of confusing issues.

The best way to learn it is to keep plugging away, and keep coming back here to ask questions

=)

Well for starters, hate to do this but I figures since I shelled out the $$$ for studio mx I may as well utilize it to some extent. So I pulled out the
manual on CSS and it was pretty helpfull, so I am able to view my code and toggle between the style sheet and make adjustments when needed.

The part that gets me a little quirky and i spent about another 1 1/2 this morning trying to piece it together with no success. What I mean by piece together is the boxes for the architecture. I figured out that you need to assign it to a style and apply it to you "menu" but when I want
to design the content section the alignment is kinda quirky or it dont align at all.... I've been through the css-zengarden and it was really helpfull.

Any other recomended reading for that part? Maybe Im just drinking too much caffine!!!! (o) (o) whoooooo.... maybe Im just trying to hard....

Well, this may or may not help, but you can check out W3 Schools.
It's more of a reference than a tutorial type thing, but it's awfully handy when you just need to check what certain CSS properties actually do.


I find it much easier to hand code CSS sites, than use visual editors. WYSIWYG editors may handle table layouts well, but they just can't keep up with they ever-changing language of CSS.

Just for the heck of it, I opened up a CSS site I've been working on in Dreamweaver MX, and let me tell you.. it looks like crap. Dreamweaver totally screws up my CSS positioning. Can't blame it, though, because it wasn't meant to edit these kind of pages. All I need is my trusty text editor.



[This message has been edited by ozphactor (edited 09-03-2003).]

Yeah I have it setup so that any changes i make in the layout it changes the stylesheet and reloads it automaticly. it is kinda awkward though. For the time being I've been messing with styles with the tables for another site Im redoing. seems to be alot easier already though. All the CSS stuff I've read
about in the past couple of days has really opened my eyes and made things easier.

I think I came across W3 in my Quest for Understanding (hmmm.... next lara croft movie title?)
Little deep but I will peg along. Once I get my Filezilla up I will post some of the stuff I've been doing and maybe get some critiques as I go. Although I do notice with tables I get alot of tags all over the place... <tr> <tb> etc.... Im sure once I grasp positioning and alignment I will be exstatic!

Make sure to check out the Gurus Network CSS tutorials as well - there are some great tidbits in them.

Also check out the Gurus Network Links section, and got to Coding >> CSS.