FIRST (From Scratch) CSS/HTML Design nearly complete!!! - 2?'s

Alright!!! I am kinda proud of myself, I made my first CSS/HTML site from SCRATCH!! It is nearly ready to start adding content... Just looking for some critique before I add anything to it... also I have 2 questions....

site: A-Z Pathology Directory

1) How can I center the menu bar?? (I am going to be adding custom-made buttons w/ hover attributes... still learning how to do that but I don't want to do a simple text one for this site, I want to do it with image-buttons)

2) How could I add a Google search bar (from my Adsense) in the empty blue space on the upper right side of the page??

Any other critique is welcome (I just ask if you critique provide some suggestions or anything else you think could help me learn...because I am really trying to learn all this stuff)

Thank you so much!!

 

1) You are using the wrong doctype. New web pages should always use strict. You have no need for transitional.
2) Why are you doing inline CSS? CSS styling should be in the head.
3) What is this?: style="#; That is invalid and makes no sense.
4) You have not validated your html or css otherwise you would have cause the style error plus 4 more css errors and 7 html errors.

 

how do I validate it??

Also how would I change the doc type from transitional to strict (I dont know what that means or what it does)

Yeahh I have to take out alot of the inline CSS, my designer (web expression 3 adds it automatically, so I constantly have to go back and delete stuff...I know its not the best program but its all I have access to at them moment..)

Im not seeing the style="#; thing you are referring to... where is that located?? (I did a find on the doc and didnt turn up anything)

WAIT never mind I found it... the menu part...thanks for pointing that out

 

Okay I fixed the menu bar style="# thing

I dont know where that even came from...

How/where can I change the page so that Im not doing inline CSS; What is the correct/best way to do it??

Thank you very very much for your time/help!!

EDIT: ...just fixed the doctype too... switched it to xhtml strict... is that the best one ya think?? I dont know the diff between them..

 

looking good. you can find the HTML validator here : http://validator.w3.org/
CSS here : http://jigsaw.w3.org/css-validator/

the inline styles are on the LI's for the menu. guess you have to remove those from within WE3?

probably should take the margin-top: 7px off of #footer since its putting the white gap between the sup_footer and footer

to center the menu, did you put margin: 0 auto on the div or text-align: center; should work.


the doctype defines which version of the HTML specification is used to render the page. Transitional is just that, meant for pages with deprecated elements or frames and such. Using strict is ideal for pages being written from scratch today and it prevents quirks mode (you can google it to find out more about quirks mode).

only spot I see for the search bar is next to the menu? if you center it, isn't much space. might want to add it in the right hand column for content. or on its own line.

 

Ok.... sweet thanks for the advice, removed the inline styles on the li's in the menu, didnt realize that was an inline style though now that i look at it I had a DOH! moment lol, I took the 7px margin-top; off footer,

Tried to do the menu center with both the margin and text align but neither worked... is that supposed to be within the html or the CSS style sheet?

 

its in the CSS. it actually does work but the #menu is width 100%. to make it center I put margin: 0 auto; width: 80% on the #menu ul in the CSS and it goes to the center.

 

i for one would have suggested to make this site with frameset
i can still help u to make that if you want
it will help to cut down the the data the user has to load when he clicks any link

and i can help you in your problem#2
put this code in your css

in this code i am assuming that the id attribute of the iframe of ur searchbox is set to "search"(without quotes)
change the values of left and top if needed, i just made an assumption


If you need any other help
contact me on PM

 

Potentially making his whole site non-bookmarkable and, without knowing the content, how can you make such a suggestion?

 

I don't know whether to laugh or cry on that suggestion.

 

sorry...i didnt know that frameset had such effect...

 

Alright sweet... thanks for the suggestions, I am trying to go through it right now, I did get the menu bar to center, but the blue has margins on either side, Is there something I am missing to make the menu bar (maybe just the menu ul?) center, but keep the blue bar all the way across?? (I am going to be adding a background image, so I want to make sure that the image is displayed the whole 800px width, but the buttons are centered...

going to fool around right now, but if you have any tips let me knooooow!

I cant tell ya how much I appreciate all the help/tips (I dont know what frameset is / is for, glad I learned that it prevents the page from being bookmarked though...that would suck.)

 

Try using external CSS, if you don't know how to implement external CSS, read this one _http://www.w3schools.com/css/css_howto.asp
Make sure your site is valid both CSS and XML test

 

Actually, it should be in that external file - but hey, I'm the whackjob who wants to obsolete STYLE both as a tag and as an attribute since that **** doesn't belong in the markup in the first place. (Obsolete as in the step harsher than deprecate)

Some other 'issues'...

Given the layout, there is no reason for the extra DIV around the menu, the use of line-breaks to set the height of the logo area instead of HEIGHT in the CSS is breaking on large font/120dpi machines - NOT that an empty div is a great idea for what should likely be the main heading of the page... H1 with gilder-levin image replacement would be on my to-do list for that. Likewise the use of non-breaking spaces to do padding's job, and the 'span for no reason' are both a bit wasteful, as is the use of line-breaks AND two paragraphs on the footer, use of vague 'style#' classes when you have perfectly good id's on the elements, and the use of a single character copyright instead of an entity...

Still, for all that if this is your FIRST time to the dance? This is head and shoulders above 80% of the code I see vomited up and called HTML on this website. You've got the basics down halfway decent.

Though... do I smell a wysiwyg or 'bloated editor' like Dreamweaver involved here? The vague/meaningless 'style' attributes and use of non-breaking spaces to set heights is sending up some warning flags in that regard. If you are using something like that, do yourself a favor, pitch it in the trash and go grab a flat text editor like editplus, notepad++, crimson editor, etc, etc, etc.. (there's a million of them) - that way you wont end up learning from bad examples.

Oh, and BTW 800px wide is NOT 800px friendly since you have to take about 32px off for things like scrollbars and browser chrome, and that alpha transparency .png for the header is going to break in IE without some 'assistance'; which is why I'd not be using an alpha transparency .png... and what font is that? The kerning on it makes me want to poke out my eyes...

Gimme a few minutes, I'll toss together an example of how I'd code that same page so you can learn from it.

 

... and here it is:
http://www.cutcodedown.com/for_others/ianT/template.html

As with all my examples the directory:
http://www.cutcodedown.com/for_others/ianT/

Is unlocked so you can grab the gooey bits. Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for a few IE and mozilla workarounds, tested working IE 5.5, 6, 7 & 8, Opera 10.10 and 10.51 RC3, Firefox 2 & 3, and of course the latest flavors of Safari and Chrome.

The HTML is fairly straightforward and not that far off from your original apart from the following details:

Media type on CSS, meaningful name. "style.css" is NOT a meaningful name. I like to name my CSS for their media types - makes things a heck of a lot clearer as to what's going on. You'll notice I put in comments how you would target print and handheld - it's usually in your best interest to write those too. Print you will usually yank things not related to the content and that serve no purpose but to waste ink like backgrounds and navigation menus. For handheld you typically would only declare fonts and colors, and maybe some text-aligns since tables, floats and a whole host of things are typically ignored by small-screen renderers.

H1 for header/logo. This gives search engines and images off users something meaningful to look at, and gives us a nice foundation for which all other headings on the page can be subsections. The small tag allows us to put that subtext into the heading so we have some styling when CSS is not present and hooks to style it close to the image for images off. The empty span is as the comment up above that describes, an image sandbag - we'll get to that when we hit the CSS. You'll notice that I cut away a lot of the redundancy; there's no reason to say the site name three times in the header, or to repeat the URL - people usually have an address bar, no sense in wasting their time saying it again. (kind of like those stupid 'bookmark this page' links that serve no real purpose).

No need for a DIV around the menu - all that styling can be directly applied to the UL. You'll notice a few HR - these are to break up the content for CSS off users, we'll hide those in our screen.css

The #fauxColumns div is there so you can add a tiled background image should you desire the columns to appear to stretch. You google "Faux Columns" you'll find plenty of examples of that in action; I just gave you the hook to do it.

#contentWrapper is there for what's called a 'content first column' layout. Since you are using a horizontal navigation that probably means your content is more important than the narrow sidebar, so why make handheld users, screen reader users and even search engines see the least important content first? It's all about getting the users to the content ASAP, and this does it. We'll cover this along with #content and #sideBar later - but notice the names. "left" and "right" are meaningless presentational names and who knows - down the road your current 'right' might end up 'center' if you go three column, or your sidebar might end up on the right - that's presentation and stuff that goes in the CSS. Even your ID's and Classnames should say what things ARE; NOT how they are going to appear.

#footer - your double footer I made into a single div with a UL for the list. Instead of non-breaking spaces we'll use padding, instead of a vertical-break we can use border; the .first class is a hook we'll use to not set a border.

Gimme a few minutes, I'll write up a CSS breakdown.

 

... and here's the CSS breakdown. Feel free to follow along with the bouncing code:
http://www.cutcodedown.com/for_others/ianT/screen.css

When it comes to my CSS I always use a reset first. You cannot trust all the browsers to start out with the same margins and padding on all elements - and rather than sit there dicking with those elements for hours on end, just reset them up front. There are smaller resets like the 'universal' * { margin:0; padding:0; } but that makes form elements pretty much broken/impossible to style - likewise there are larger resets like Eric Meyer's "Reset Reloaded" whcih to me, takes it too far setting values I don't need resets on. The one I use is a nice happy middle ground stripping margins and padding off the elements I care about, and likewise stripping borders off the two elements I usually don't want borders on.

hr - Next you can see I pull the horizontal rules. As mentioned in the last post those are present to make it pretty when CSS is disabled.

body - You were setting BOTH margins and padding on yours - margin cannot be trusted on body... and since there's no extra styling being applied there is no good reason to be using both. Padding does the job quite nicely; that said I would NEVER apply more than 16px padding since that pretty much bones small screen users who are hard pressed enough for screen real-estate. The text-align to support IE 5.x centering might seem like a waste, but it's one line of code - big deal.

For fonts I ALWAYS explicitly declare style, size, line-height and face. You were using the default sizes which were fine, except that as a rule serif fonts cause legibility issues. A sans-serif font like arial is a lot cleaner and the 85% gives you 14px on small font/96dpi systems, 10px on small screen that use the small-metric (75dpi) and 18px on large font systems, pretty much the ideals for usability. I do up the line-height a wee bit because to me, 130 to 140% line-height is easier to deal with.

#pageWrapper - we've got a lot of stuff in there to make IE behave; position:relative and zoom:1 for example... but the real gem is the use of min-width and max-width to open up the design to being semi-fluid width instead of fixed. Fixed width is a miserable **** /FAIL/ at web design, and we might as well get you thinking fluid. Hell, even when I'm desiging for fixed I find fluid easier to code, then I just fix the width of #pageWrapper. That's backwards from what most developers would tell you about 'easy', but most developers don't know enough about HTML and CSS to code their way out of a piss soaked paper bag.

* html #pageWrapper - the only problem with using min-width and max-width is IE6/earlier doesn't have it! Ouch. We can get around that by using a javascript expression in our CSS. It might look a bit complicated but you can see the numbers and what they do. Expressions are unfortunately (or fortunately depending on your viewpoint) IE specific, and do NOT work if javascript is disabled... As such before the expression we declare our narrowest fixed width.

You are probably wondering where I came up with those widths. I went for 800 as the minimum and 1024 as the maximum... taking 32px off to make room for the scrollbar, 8px off each side for the body padding, 1px off each side for the padding on #pageWrapper, 1px off each side for the border on #pageWrapper - and you get 748px and 972px respectively.

h1 - Since we can only have one h1, and every sub-heading should be a subsection of that H1, on 99% of websites the only element that makes sense to be the H1 is the logo... and no, I don't care what the nimrods at Sitepoint have to say about that. If you're going to use H1's as structural elements, that means h2's need to be subsections, and the people not using h1's for their site title/logo aren't doing that! The position:relative is so we can absolute position our span over our text for people browsing with images. We need a haslayout trigger and since we already have "invalid" CSS thanks to the min-width expression, let's just bite the bullet and use zoom. This means we do NOT have to worry about the box-model headaches of our padding since we aren't declaring width or height on it.

So how does it get the total height? 10px top padding + 10px bottom padding + 44px big line-height + 24px small line-height equals the 88px of the redone h1Logo.png I made. Down below that you'll see I tossed in a comment about that.

From there it's just fonts and colors.

h1 small - the display:block makes it 'ride up' below the normal h1 text as tight as it can despite the line-break. In theory thanks to this that <br /> is unneccessary for screen - but we're not just designing for the screen media type. CSS off that line-break makes it consistent.

h1 span - very simple. We absolute position this over our styled text so that it hides it. The technique is called gilder-levin image replacement and is NOT considered content cloaking since the image shows the same content as the text below it. Images off we get what is called 'graceful degradation' of the content making the site still useful. People on metered home connections or pay by bandwidth plans will thank you for the extra care.

#mainMenu - turn off bullets, set up text centering, background... Nothing too fancy. This is what you were asking about on centering those elements. Rather than screwing around with floats and widths and all that we can just, well...

#mainMenu li - set the LI to display:inline, which will make them all ride up onto a single line and behave as normal text. Boom, there's your centering.

#mainMenu a - I set these to display:inline-block; (and the -moz equivalents for the handful of people who still won't embrace FF 3.x) so we can set top and bottom padding on them in all browsers. Apart from that it's just fonts and colors.

#mainMenu a:active,
#mainMenu a:focus,
#mainMenu a:hover - your hover state. The inclusion of the other two psuedo-states is so that keyboard navigation in all browsers also trip that rendering should they not have the default 'outline' property enabled.

#fauxColumns - our first two lines here are so that it will always wrap both of our columns heights instaed of collapsing. I'm often amazed at the ridiculous hoops some people will jump through with outdated crap like clearing div's (what is this, 1997) or the convoluted mess known as 'clearfix' - all for the functionality of two lines of CSS. I added some bottom padding since you seemed to have the background showing through, and of course the background-color.

#fauxColumns p - I prefer to use padding on my paragraphs instead of margins, that way I don't even have to THINK about margin collapse issues. I don't set it on the top since that would give me 2em between elements, and instead just set 1em padding on the top of our #content and #sideBar elements.

#contentWrapper - A 100% width float:right leaves zero px free for our sidebar... We'll explain that in a second.

#content - the left margin here pushes the content area away from the left edge so that when we position our sidebar it won't appear over the content.

#sideBar - this is where our content-first approach while still having a fluid width content are might seem a bit tricky, but it's actually simpler than it looks. As the comment says the position:relative is to make sure that when rendered #sideBar will not end up behind #contentWrapper which can cause all sorts of oddball problems. It too is float:right and we set a width on it... so how does it ride up next to our 100% width #contentWrapper? Negative margins are something of an oddity, they decrease the size of the box used to figure out 'flow' - aka where elements are positioned based on floats and code order... having a negative margin equal to it's width will actually make that 'box' zero width. You can fit zero next to 100%, so it rides up. If you put the margin on the opposite side, it would still ride up, but it would end up OUTSIDE #pageWrapper on the left. It's a sneaky trick, but it works and is the cornerstone of techniques like 'holy grail'.

#footer - because #fauxColumns is wrapping our floats, we shouldn't need a clear here, but I don't trust that entirely so I throw it in. Again we use text-align to provide centering, and I pad the bottom to add a bit of space between #footer's normal text and the bottom.

#footer ul - since we have no top or side padding on #footer we can put this inside the footer as a list (since it looks like a mini-menu). Bullets off, center, background-color - not all that different from #mainMenu.

#footer li and #footer ul a - again not all that different from #mainMenu. the only real difference is in coloring and border - and as you can see we use the .first class to turn off the left border on the first one. The only real issue with using li when border is involved is that there's an extra 'space' added between inline-level elements. Rather than use all the word-spacing/letter-spacing tricks (that they broke in FF 3.6, bastards) we'll just ballpark that extra space as being 0.4em, and add 0.4em to the padding on the opposite side.

From there it's just our hover states and we're done.

Hope this helps... When you determine what you want for images on the menu, drop me a PM and I'll walk you through that. The technique I advocate puts all your button states in a single file - though there's one question we'd have to answer first:

Are you thinking on just doing button images behind the normal text, or are you using images INSTEAD of the text in the markup?

The first is really easy, the second can get quite complicated but I have a few techniques that simplify things a bit while giving full accessbility - it ends up working an awful lot like what I did to that h1.

 

wooooooooow ... those are awesome responses, Thank you so much for the examples and such.... cant tell you how helpful they are, especially the css with the comments... I just wanted to acknowledge that I have seen all of it, but I will respond in depth once I fully digest everything you have said and showed me, I like to mull over things, I promise I will answer all your the questions you asked me in my next post... probably tomorrow...

THANK YOU*100000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000%

:*

 

Death... sent you a PM! you rock

 

to center the menu, the menu items have to be in a 'container' and the text-align of center outside of the container, then set the left and right margins to auto. It should then be centered, as long as the container does not have a float left/right.