8 replies [Last post]
jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 31 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

okay. i actually inquired earlier about my navigation not being "links"-- basically not working, when i had it between the <div id="header"> tag and the <div class="contentHeader"> tag. i fixed that by simply putting the nav far enough into the heirarchy that it worked. so, now the nav resides between the <div id="outer"> and <div id="inner"> tags.

i see that my nav borders don't look the same in IE as they do in firefox-- firefox being what i wanted it to look like. can i fix that somehow?

thanks for looking!

edit:
oops! i guess i had better put the link here for you!

Anonymous
Anonymous's picture
Guru

My first, from the outset, &quot;CSS&quot; design. yikes! be

It's been 2 minutes and it hasn't finished loading yet. Shock

I'll have to get back to it when I get home. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

My first, from the outset, &quot;CSS&quot; design. yikes! be

Jeff you have quite a few little problems in this code.

Your using a html 4.01 doctype but have a xml namespace declaration for xhtml and are closing empty tags as required for xhtml.

You tend to be over applying rules and using classes rather a lot and had two <p> that weren't closed I would have a think about your font sizing as keywords aren't that reliable cross browser, check out some guides on font sizing , Ems are generally the favoured method along with a body percentage declaration. I would use one of the color schemers for your colors rather than the rather naff named colors which are pretty awful really.

I have re-fashioned your page slightly removing redundant rules and putting the nav links back in the contentHeader div but in their own div and used negative margining and a z-index context to ensure they are clickable so this should replicate the effect that you wanted the rules you applied to the .nav selector are redundant and have been applied to the #nav anchor and the anhcor pseudo classes put in the right order.

The code bellow corrects some errors but you may well need to think about some of those class rules that I have left as to whether they are really required or can't be handled by descendent selectors.

I don't say that this is exactly what you want but it may help a little, but you will need to check this on other browsers, I have only checked on IE6 and FF for Win.

With the stylesheet rules try and keep them in a logical order such as contentHeader rules are probably best kept with the header rules and the navigation just after , the exact method is unimportant but try and keep the natural flow as you scan down logical. I would also loose comments such as "/* THIS IS THE MAIN COLUMN (i think) */ "
It's your stylesheet you should know to what the rules apply Laughing out loud

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">   
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">   
  <head>   
    <title>   
      Nittany Research - Your Cyber Marketing Solution - Helping you to help   
      your customers   
    </title>   
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />   
    <meta http-equiv="Content-Style-Type" content="text/css" />   
<style type="text/css">   
/*<![CDATA[*/   
<!--   
html, body{   
  background-color: #00CC99;   
  margin:0;   
  padding:0;   
  text-align:center;   
  font-size: 13px;   
  font-family: "trebuchet ms", verdana, tahoma, Arial, Helvetica, Geneva, sans-serif;   
}    
#pagewidth{    
  width:610px;    
  text-align:left;    
  min-width: 500px;margin-left:auto;    
  margin-right:auto;    
}    
/* HEADER w/ PICTURE */   
   
#header{    
  height:200px;    
  width:100%;    
  background-color: darkblue;   

}    
   
/* THIS IS THE MAIN COLUMN (i think) */   
   
#outer{    
  border:solid white 0px;    
  background-color: #130C5F; /* center column colour */    
  width: auto;    
/*border: thick honeydew ridge; */   
}    
   
#footer{   
  height:100px;    
  width:100%;    
  background-color:#130C9C;    
}    
   
#inner{margin:0; width:100%; /*border: thick green ridge;*/}   
   
#maincol{    
  float: left;    
  width: 100%;    
  position: relative;    
  margin: 0 -8px 0 -2px;    
 /*border: thick red ridge;*/   
}   
   
#outer>#inner { border-bottom: 1px solid #130C5F;  }   
   
   
/****** are you sure of this rule ? to feed to IEMac only use: * html #header>.content ********/   
#header .content{padding-bottom:0;} /*padding bottom 0 to remove space in IE5 Mac*/    
   
#nav {   
  position:relative;   
  margin:0 0 -10px;   
  z-index:2;   
}   
   
/* END ID's */   
   
   
#nav a{   
  font: small;   
  font-weight: bold;   
  font-variant: small-caps;   
  border: 3px honeydew ridge   
 }   
#nav a:link {color: turquoise;/*  background: indigo; */}   
   
#nav a:visited {color: lightseagreen;}   
   
#nav a:hover {color: aquamarine; background: #130C5F;}   
   
#nav a:active {color: aliceblue;}   
   
#nav a:focus {background: indigo; color: aliceblue;}   
   
   
   
/******** why .em and not the em tag ? ******/  
.em {font-weight: bold; font-style: italic; font-size: 110%;}   
   
.clr{clear:both;}   
   
.content{   
  padding:5px;   
  color: azure;   
} /*padding for content */    
   
.smallcaps {font-variant: small-caps;}   
   
.contentFooter {   
  padding:5px;   
  color: #FFFFFF;   
}   
   
/* contentHEAD */   
   
.contentHead {   
  font-weight: bold;   
  color: #FFF;   
}   
.contentHead img {   
  margin-bottom:-10px;   
}   
   
-->   
/*]]>*/   
</style>   
<!--<link rel="stylesheet" type="text/css" href="css/nittanystyle.css" media="all" />-->   
   
<style type="text/css">   
/*<![CDATA[*/   
 div.c2 {text-align: right}   
 div.c1 {text-align: left}   
/*]]>*/   
</style>   
  </head>   
  <body>   
    <!-- MAKE THE HEADER -->   
    <div id="pagewidth">   
      <div id="header">   
        <div class="contentHead c1">   
          <img src="nittany_research_200pxHigh.jpg" width="490" height="200" />   
          <div id="nav">   
   
            <a href="index.php">Home</a> <a href="webdev.php">Web   
            Development</a> <a href="ecommerce.php">e-Commerce</a> <a href="   
            otherservices.php">Other Services</a> <a href="   
            about.php">About</a> <a href="contact.php">Contact</a>   
          </div><!-- CLOSE div class= contentHEAD -->   
        </div><!-- CLOSE HEADER div -->   
   
      </div>   
      <div id="outer">   
        <div id="inner">   
          <div class="content" id="maincol">   
            <h1>   
              Welcome to Nittany Research   
            </h1>   
            <p>   
              Nittany Research is a survey development firm that specializes in   
              developing, conducting, and analyzing employee and customer   
              surveys to provide direction and effort toward superior   
              organizational performance and the realization of strategic   
              goals.   
            </p>   
   
            <h3 class="smallcaps">   
              The owner and president:   
            </h3>   
            <p>   
              Dr. Marlene E. Burkhardt, comes from a business school background   
              at The Pennsylvania State University's Smeal College of Business   
              as a Ph.D. student and at the University of Pennsylvania's   
              Wharton School of Business as a member of the faculty and Senior   
              Research Fellow.   
            </p>   
            <h3 class="smallcaps">   
              Smart:   
            </h3>   
            <p>   
   
              Marlene is the author of several research articles and the   
              recipient of two best paper awards from the Academy of   
              Management. She has had over 10 years of survey development   
              experience.   
            </p>   
            <h4 class="smallcaps">   
              Experienced:   
            </h4>   
            <p>   
              Dr. Burkhardt has taught several M.B.A. courses on organizational   
              design as well as Ph.D. courses on research methods to instruct   
              students in the survey development process.   
            </p>   
            <p>   
              Marlene has also worked as an information specialist, management   
              analyst, and administrator in several organizational settings.   
              Such experience provides a uniquely qualified perspective on the   
              survey process   
            </p>   
   
          </div>   
          <div class="clr"></div><!-- close inner and outer -->   
        </div>   
      </div>   
      <div class="contentFooter c2" id="footer">   
        <p>   
          <img src="images/name_only.gif" width="300" height="46" /><br />   
          Our goal is to help you help your customers.   
        </p>   
   
      </div>   
      <div class="clr"></div>   
    </div>   
  </body>   
</html>   

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 31 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

My first, from the outset, &quot;CSS&quot; design. yikes! be

Hugo, thank you for the extensive critique. It really helps. Regarding the "page loading for 2 mins", i have been having hosting issues... i think my provider is soon going to need to upgrade. i had much frustration trying to log into my hosting control panel last night to enable index.php as a default page... (yes, there is no PHP there... yet. just more reminders for what i have yet to do w/ this) also, before i forget, regarding my stylesheet (CSS) comments, I should have removed much of those really-- left them in for reference of course. I created this stylesheet, html template w/ the Layout Generator here a few months ago. I have done it before, but never really dug into to code to see what was what because i didn't know what to look for and how to identify this from that, separately. I have told this story before: a former flat-mate friend of mine introduced me to CSS-- so although i didn't really know right from wrong, i was trying to get involved by creating my layouts w/ the generator rather than using frames, and try to get away from inline <font> tags, etc. I wouldn't have had a clue as to why some of the divs were using ID's and some classes, etc. and to be honest, i'm still not quite sure-- considering that my CSS book claims that browsers don't usually support ID's being used only once... but of course, it's better to use the proper rule, i realize that.. .but it's why i haven't messed much w/ ID's myself-- staying w/in my safety zone, i guess. i'm really still at an elementary level of knowledge and understanding, and that's why i really appreciate your extensive report because it gives me something on which to focus my studies. i know that i haven't gotten into descendant selectors at all really. it's because i'm still hearing "oh! so that's what it does..." when i test the pages, and getting burned out staring at it for so long. I should go back today and try to replace some stuff w/ descendant selectors. could you cite something to give me some clues as to where i want to focus my attention?

hmmm.. doctype vs the xhtml tags. i don't remember if the doctype came from the creator or not. does it put a doctype in? to be honest, i looked at it, then basically ignored it after i got in there and started tooling around. take a look at this. i originally did the navigation w/ Macromedia Fireworks, but i have learned soooo much in the past couple of months, and since then, rarely using dreamweaver in favor of EditPlus, except for FTP and project management (and even when i published this last night, i used WS_FTP), when i looked at the code on the older page (the link just above) i cringed-- hence my distraction from the doctype issue, and then forgetting to revisit it. the code is 250% longer! so, i took all the java preloads and all the other DW stuff out (i think i got it all) and tried to use CSS to sort-of get the feel of those Fireworks nav buttons. i have to admit that i think they looked a bit better, but i'm not good enough w/ CSS yet to come any closer.

would anyone be so kind as to attempt a CSS version of what Fireworks did w/ those nav buttons? i think i could really learn a lot from it.

oh, and something very important about my doctype vs code vs "xml namespace" (i don't even know what that is... DreamWeaver may have put that in there, or the Layout Generator, but i'm certain that it was not I). i strive to be "XHTML compliant", so that's why i've been using <br />, etc. as for the paragraphs, those were oversights. so, considering that i want to get to XHTML compliant, what do you suggest i do in terms of the doctype vs the code, etc.?

wow. this is getting lengthy, and i should be getting back to revise my code and stylesheet. i'm anxious to get a reply regarding what CSS rules/ descendant selectors / classes, etc that i should focus on. i consider the site to be far from "ready", but i published it cause indeed it looks a lot better than what Dr Burkhardt had up there previously. a lot of that text is made-up stuff... but i'm trying to get her to have a focus. i'm supposed to be her partner in this business... there really is no "development team" other than myself, of course. there's a lot of fiction there... but it's based on a true story.

EDIT:
i forgot to ask. where do i find the "color schemes", and could you tell me more about "body percentage"? thank you again!

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

My first, from the outset, &quot;CSS&quot; design. yikes! be

Regards classes and ID's your book should really state that it is not permissable to use an ID more than once per page it is a unique element.

You should be using ID for all your main content areas these are divs/elements that will only occur once per page like headers navigation/sidebars maincontent footers etc. classes should ne used sparingly as contextual descendent selectors will usually target the elements you require if you wanted all your em tags within your <p> tags that were in the div #content to be red but nowhere else then you would say:
#content p em {color:red;}

This would only effect em tags that were descended from p tag that itself was descended from a div called #content all other em tags would not pick this styling up.

But be aware decsendent means that all elements however deep will take these rules and regardless of the intervening elements there may be, it is not a child or sibling selector it is very easy to target things you did,nt wish to you must think about your nesting and how specific you need to be with stating what conditions must be met.

It's difficult to tell you where you should use these that really is up to you to discover by reading through your markup and working out how best to target your rules, it's practise more than anything.
Look for any elements you want to apply styling to and see what context they reside in are they part of the navigation ? do they have a parent that is named by ID or class you will then work out the descendent selectors required and begin to see why it helps to group your rules together so that if you have a header ruleset then any elements within it that are styled follow after it in the stylesheet and would run along the lines of:
#header h1 a {}

As for the doctype the layout generator does include the correct doctype requested and I'm not going to discuss what the weaver of lies might be doing. the code example I posted shows the correct set of required tags, the xml namespace is for the correct serving of xml files and in this instance I wouldn't worry too much about it as that is a very contentious area of discussion which you were pointed to before in the 'Off Topic' section sufice to say at this point don't think too much about it. the only important thing is a complete DTD that ensures browsers are switched to Standards Mode.

The color schemers mentioned to you in a previous post you made but a list of some is to be found in the 'How To' section which I hope you have by now thoroughly digested Wink

Text sizing is best googled on; try 'css text sizing' and read the first four unique links esp the clagnut one this will give you a good basic idea of the approaches to text sizing and some of the pitfalls.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 31 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

My first, from the outset, &quot;CSS&quot; design. yikes! be

Thank you, Hugo. I do not know how you are able to provide such extensive guidance to so many of us, but I am greatful. You must have some fast fingers is all i can think of. not to mention, you aren't posting replies just for the sake of adding to the thread your opinion, but you are actually taking time to fully diagnose the problem, and then to present, sometimes more than one solution, in a thoughtful manner, a meaningful set of examples or referencs to CSS rules, suggested solutions, and a number of other useful commentary-- all for the education of the poster. it's a really cool thing to do, man, and never do you come off as a pompous ass, which is the case with many so knowledgeable developers. hats off to you!

anyway, what were we talking about? oh, yeah... my CSS issues. hehe. it's gonna take me some time to dig into what you've said above-- both lengthy replies. i haven't even gotten to the first one yet, nor have i tried out your code example.

one more thing about the doctype... which you may have already told me, but i missed. i realize that it might not really be possible to tell me one thing, cause in essence, it's not a black or white issue, but, considering that i want to make my code and design better, assuming that striving for XHTML compliancy is the proper path, then what would be my next step? how should i plan my code for an end result to be XHTML compliant markup?

edit:
and what then should be my doctype of choice? maybe there's a reference that would explain this more thoroughly? although, it would be nice to have an explanation based on my specific case, as you cited above. for example, i've used <br />. is that a good thing or a bad thing? if it is neither, than let me put it this way... if i'm striving for XHTML compliancy, should i then use closing tags such as <br />?

edit2:
would be nice if i could remember to say all of this the first time, rather than edit, huh? anyway... how about browser compatibility? do we have a reference for what we, as developers, should have installed on our development systems? obviously, FireFox and IE are not enough. At what point can we say "okay, i've cleared it for use in all (or "most") browsers"?

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 6 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

My first, from the outset, &quot;CSS&quot; design. yikes! be

Thanks for the vote of confidence sadly I am not clever enough to be truly pompous but I do give it a good try at times and have my moments Smile

The writing of XHTML markup is essentially very easy as it is in fact no different from html baring a few things, that we have mentioned before :

All empty elements must be closed <img /> < link />

All tags must be lower case, always work with lower case !

All elements must be correctly nested
<p> text <span>here</span></p> not <p>text<span>here</p></span>

and you must use an xhtml flavour DTD so that the vaildator is aware of what standard to validate the markup to.

So you should not really have trouble implementing xhtml compliant markup it isnt difficult.

This is actually a difficult area for discussion as it generates much debate you need to be aware of what XHTML is and few are aware, although you will see it used everywhere as it has become fashionable. Please read the article in the 'How To' section as this will give you an idea of of what is involved and some of the issues surrounding the use of xhtml and actually what it is and why many would argue that it is incorrect to use it .

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

jsabarese
jsabarese's picture
Offline
Enthusiast
Positively 4th Street
Last seen: 9 years 31 weeks ago
Positively 4th Street
Timezone: GMT-4
Joined: 2005-02-05
Posts: 404
Points: 7

My first, from the outset, &quot;CSS&quot; design. yikes! be

as usual, thank you for the info. i will check that out. from what you've said, it sounds to me like i have in fact been coding (or at least trying to code) in XHTML by closing empty tags, and having proper nestings (and i don't consciously ever use upper-case.. i always use lowercase tags, unless i've copy/pasted code). so then, i should simply make sure that i have the proper DTD? did it look to you like my source code could be xhtml compliant... perhaps if i go through w/ a fine-tooth-comb and ensure that all you have mentioned as necessary are present?

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 9 weeks 1 day ago
Timezone: GMT+1
Joined: 2004-06-30
Posts: 9674
Points: 810

My first, from the outset, &quot;CSS&quot; design. yikes! be

I'd like to add that although you're using <br />, which will validate with an Xhtml strict DTD, you shouldn't be using the break tag. It's a presentational element, and the gaps at the bottom of paragraphs and such should be controlled via the margin property of CSS.

Verschwindende wrote:
  • CSS doesn't make pies