27 replies [Last post]
diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 6 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

It would help if you

It would help if you would:

1. Validate your website and make sure it has valid html/css
2. Stop using inline style (style in the html) and move it to a stylesheet.
3. Stop using position:absolute, it really isn't necessary for your design.

CT

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Is there an easy way to

Is there an easy way to change it all to relative positioning?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Step one is to remove all

Step one is to remove all the style rules you have now. When you've done that, we'll do the next step.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Ok, it's back to bare bones

Ok, it's back to bare bones - no styles, all validated.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

diane22 wrote:Ok, it's back

diane22 wrote:
Ok, it's back to bare bones - no styles, all validated.

What's this then?

And it's a new page, so the DTD should be STRICT.

All presentation should be done with CSS and be left out of your html.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Oops. Fixed now, I think.

Oops.
Fixed now, I think.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 6 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

What I'd like you to do is

What I'd like you to do is look at this html and css. It isn't centered, but is valid html and semantic html and accessible for text readers and if images are switched off:

html:

New Page 2

Fetching Dog Collars

Get started by choosing a collar width:

  • 3/4 inch collar
  • 1 inch collar
  • 1.5 inch collar
  • 2 inch collar

Some css that might be suitable:

/* ::::: http://www.fetchingdogcollars.com/css2.css ::::: */

html,body,p,div,img,h1,h2,h3,h4,li,ul,ol,dl,dd,dt,form,table,td,tr{
margin:0px;
padding:0px;
border:0px;
border-collapse:separate;
border-spacing:0px;
}
input,select{
margin:0;
padding:0;
}
body{
font-family:arial;
font-size:100.1%;
}
strong,b{
font-weight:bold;
}
p{
font-size:90%;
line-height:1.1em;
}
.floatcontainer:after{content:".";display:block;height:0px;clear:both;visibility:hidden;font-size:0px}
.floatcontainer{display: inline-block;}
/* Hides from IE Mac \*/
* html .floatcontainer {height:1%}
.floatcontainer{display:block}
/* End Hack */

body {
text-align: center;
color: #808080;
}
#container {
margin:0 auto;
text-align: left;
zfont-size:76%;
}
h1 {
height:309px;
width:543px;
position:relative;
font-size:100%;
}
/* hide from Mac IE5.x \*/
h1 {overflow:hidden;}
/* end hide*/
h1 span {
background: url(logo.gif);
position:absolute;
left:0;top:0;
display:block;
height:309px;
width:543px;
}
h2 {
font-size:100%;
}
#collar-nav ul {
list-style-type: none;
}
#collar-nav ul li{display:inline-block}
#collar-nav ul li{
display:inline;
float:left;
}
#collar-nav ul li a {
height:40px;
width:131px;
position:relative;
font-size:79%;
display:block;
}
/* hide from Mac IE5.x \*/
#collar-nav ul li a {overflow:hidden;}
/* end hide*/
#collar-nav ul li a em {
position:absolute;
left:0;top:0;
display:block;
height:40px;
width:131px;
}
#collar-nav ul li a.collar3-4 em {
background: url(3-4-inch.gif);
}
#collar-nav ul li a.collar1 em {
background: url(1-inch.gif);
}
#collar-nav ul li a.collar1-5 em {
background: url(1.5-inch.gif);
}
#collar-nav ul li a.collar2 em {
background: url(2-inch.gif);
}
#nav ul {
list-style-type: none;
}
#nav ul li{
display:inline;
}

Now you can set about centering it by setting a min-width to the body and a width to the container (both the same value). Then you need to center whatever else you need centering inside the container.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 6 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

For those empty spans and

For those empty spans and ems, you might have to put a non-breaking space inside (   )

And, the header logo does not need to be anywhere as big, you can trim all/most of the whitespace and adjust it's position with the css background placement for the image.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

First off, we'll ignore the

First off, we'll ignore the styles completely and concentrate on the html.

Since the logo is the page's header, mark it up as the top level header, <h1>. The image's alt attribute should convey the same information as the image. It is the alternative content.

The collar widths your visitors have to choose, is that a form control for submitting for back end processing, or a menu of links? Let it be a list of links, for now. Use an unordered list to contain the links. Don't forget to put each image's equivalent text in its alt attribute.

The footer could also be a list of links, but let's leave it a paragraph consisting of the three links. You can redo it as a list if you like.

Since you'd like the whole thing to be centered, wrap a div around the content and call it #container. That will act as a contextual hook for the css.

Your content and its markup should look something like this:



Fetching Dog Collars


Get started by choosing a collar width:



  • ¾"


  • 1"


  • 1½"


  • 2"




Get your markup updated. View the page without any stylesheet, and/or images. The page should be usable and make sense. It doesn't need to be pretty yet. We'll attack pretty once your html is right.

//edit: Hah! Looks like we're crossing in the mail, CT.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Ok, it's updated.

Ok, it's updated.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 6 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

I think the OP used your

I think the OP used your code gary, over to you m8

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

<csscreator coding service

<csscreator coding service ®>

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

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

diane22 wrote:Ok, it's

diane22 wrote:
Ok, it's updated.

And your DTD is gone and there are now several html errors. You must always have a DTD - always.

And you must keep your html valid throughout the process. "I'll deal with it later" is not an acceptable procedure, not if you want to use CSS to design.

Your H1 element should have TEXT, not an image. The image, which is presentational not semantic, can be put back later with CSS and the text hidden.

On your site as it currently is designed, none of your images should be in the html because they are not content, they are decoration and therefore part of layout and presentation, all of which belongs in your CSS and not in your html.

Take a look at your site with graphics turned off and you'll find it is mostly just confusion. Your site needs to work for those with non-graphical browsers, too. One prominent client with a non-graphical browser that will look at your site, for instance, will be any of several search-engine spiders. If they can't tell what your page is about you won't get added to their search engine.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Ed Seedhouse wrote: Your H1

Ed Seedhouse wrote:

Your H1 element should have TEXT, not an image. The image, which is presentational not semantic, can be put back later with CSS and the text hidden.

I'm not sure what I have to do for that...

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Well, I'm having second

Well, I'm having second thoughts about my recommendation on that point. It might be a little too advanced for you to work with. Still it's really the right way to go about things, so take a look at the article and "A list Apart" and see what you think. The way you are doing it is not "best practice" but fixing up other things may be much more important. It is an advanced technique.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 6 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

diane22 wrote:Ed Seedhouse

diane22 wrote:
Ed Seedhouse wrote:

Your H1 element should have TEXT, not an image. The image, which is presentational not semantic, can be put back later with CSS and the text hidden.

I'm not sure what I have to do for that...

Sometimes I wonder why I bother.

Dianne22, did you even look a the code I posted?

It did exactly what ed suggests.

It has a valid dtd. Nuff said.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

ClevaTreva wrote:Sometimes I

ClevaTreva wrote:
Sometimes I wonder why I bother.

Dianne22, did you even look a the code I posted?

Yes, I looked at it, but I'm sure it's painfully obvious that I have no idea what I'm doing here. So I just picked one set of code at random. No offense intended by not choosing yours.

ClevaTreva
ClevaTreva's picture
Offline
Guru
A hilly place, UK
Last seen: 49 weeks 6 days ago
A hilly place, UK
Joined: 2004-02-05
Posts: 2902
Points: 0

diane22 wrote:Yes, I looked

diane22 wrote:
Yes, I looked at it, but I'm sure it's painfully obvious that I have no idea what I'm doing here. So I just picked one set of code at random. No offense intended by not choosing yours.

None taken. If you are as yuo say somewhat lost, I would be pleased to explain any bit you don't understand. That way you learn.

Load the code and then pick at it to understand it. That way, next time, you know more.

So, start with the doctype (dtd), the first lines of code in my posted code. Follow the link in my sig and read.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

So are there any (major)

So are there any (major) problems with this?

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Way too many cooks stirring

Way too many cooks stirring the pot. Smile I fear we're adding to the confusion rather than helping.

My code snippet was just partial, that was what should have appeared in the body. The head section (at that time) was fine after the initial cleanup.

@Ed: If the main header is an image, there is no reason not to mark it as an h1, as in my example. Search engines, assistive technologies, non-graphic UAs and folks with images disabled will see the alternative text. Image capable folk will see the text in the image. It is considerably simpler than most image replacement hacks. (Leave those until the OP has a better understanding of what's going on.) My tests in Lynx, Fire Vox (screen reader) and Fangs (Jaws text emulator) indicate no accessibility issues.

Dianne, where is your current version? The link in the original post seems to have reverted to the original markup.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

Ratz! I started my previous

Ratz! I started my previous post, then broke for dinner and a movie before finishing.

What you have now is non-semantic and not well structured.[1] The snippet I gave you is one version of perfection. CT's is probably another. Pick one, and use it. You will then have well structured semantic markup. At that point it will make sense to write the css.

cheers,

gary

[1] It is never a Good Thing to put style rules in the element. The use of &nbsp; to create spacing is never a Good Thing. Headers are tagged as hx. A menu is a list.

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

kk5st wrote: Dianne, where

kk5st wrote:

Dianne, where is your current version? The link in the original post seems to have reverted to the original markup.

The current version is posted.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Yet another version posted

Yet another version posted Smile

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 46 weeks 8 hours ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

kk5st wrote:@Ed: If the main

kk5st wrote:
@Ed: If the main header is an image, there is no reason not to mark it as an h1, as in my example. Search engines, assistive technologies, non-graphic UAs and folks with images disabled will see the alternative text. Image capable folk will see the text in the image. It is considerably simpler than most image replacement hacks. (Leave those until the OP has a better understanding of what's going on.) My tests in Lynx, Fire Vox (screen reader) and Fangs (Jaws text emulator) indicate no accessibility issues.

Makes sense. Thanks, always good to learn something.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

diane22 wrote:Yet another

diane22 wrote:
Yet another version posted Smile

Now we're cookin'.

Just as an FYI, it is a Good Thing

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

diane22
Offline
Regular
Last seen: 12 years 3 days ago
Joined: 2007-04-15
Posts: 12
Points: 0

Ok, thanks! I'm still

Ok, thanks! I'm still working on it, but the notes you made make sense to me and are helping quite a bit!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 18 hours 35 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9743
Points: 3822

There is no longer any

There is no longer any 'this' to look at. Repost the link.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.