CoffeeCup Software

I am attempting to design a website using CSS.. I have the first page written and posted, but need to get some tweaking done before I move on to other pages. www.gypsyvannerdreams.com/

Bear with me as this is all very new to me. My style sheet does not use tables and I am using percentages so that the page is fluid. First I want to know how to space my content (relative to the sidebar) so that it does not go to the far right side of the page when being viewed on large monitors. When I view the page on my 19" monitor, the content area is farther to the right side of the screen than when viewed on a 17" monitor.

I may not be describing this with the technically correct terms, but I hope close enough to get some help.

After I get that taken care of, my next task will be to place an
image on the left side of header that will overlap some into
the sidebar.

Soon, I hope to be able to complete a few more pages and then on to a page to sell a few items!

Here is the style sheet code.

Thanks for any help!

Sheila


.wrapper {
text-align: left;
width: 90%;
background-color: #ffffff;
background-image: url('none');
color: #364b6a;
border: 1px solid #ffffff;
margin: 15px auto;
}

BODY {
font-size: 12px;
font-family: verdana, arial, sans-serif;
background-image: url('images/blueboard.jpg');
background-attachment: fixed;
}

A:link {
color: #617dc6;
text-decoration: none;
font-weight: bold;
}

A:visited {
color: #666633;
text-decoration: none;
font-weight: bold;
}

A:hover {
background-color: #364b6a;
color: #ffff00;
text-decoration: underline overline;
font-weight: bold;
}

A:active {
color: #666633;
text-decoration: none;
font-weight: bold;
}

h1 {
font-family: georgia, georgia, serif;
background-color: #364b6a;
color: #e7e3e3;
font-size: 22px;
font-weight: bold;
border-top: 2px solid #819bb4;
border-right: 5px solid #819bb4;
border-bottom: 2px solid #819bb4;
border-left: 5px solid #819bb4;
padding: 5px;
}

h2 {
color: #364b6a;
font-family: tahoma, arial, sans-serif;
font-variant: small-caps;
font-size: 140%;
font-weight: bold;
letter-spacing: 2px;
}

h3 {
color: #e7e3e3;
font-family: "trebuchet ms", "comic sans ms", arial, sans-serif;
text-align: right;
font-size: 16px;
font-weight: bold;
}

h4 {
font-family: "trebuchet ms", "comic sans ms", arial, sans-serif;
color: #cococo;
font-size: 14px;
font-weight: bold;
}

h5, h6 {
font-size: 100%
font-weight: bold;
color: #000000;
}

.header {
background-color: #364b6a;
color: #e7e3e3;
font-size: 100%;
font-weight: bold;
font-style: italic;
text-align: right;
height: 110px;
padding-top: 40px;
padding-right: 20px;
border-bottom: 1px solid #e7e3e3
}

.header h1 {
font-family: georgia, georgia, serif;
background-color: transparent;
color: #e7e3e3;
font-size: 24px;
font-weight: bold;
font-style: normal;
letter-spacing: 3px;
margin: 0px;
border: 0px;
padding: 0px;
}

.sidebar {
float: left;
width: 180px;
padding: 5px;
}

.sidebar dl {
padding: 3px;
background: #d2dee8;
border: 1px solid #e7e3e3;
line-height: 15px;
}

.sidebar dt {
background-color: #364b6a;
color: #e7e3e3;
font-weight: bold;
padding: 6px;
margin: 2px 2px;
border: 1px solid #d2dee8;
}

.sidebar dd {
padding: 0px;
margin: 2px;
padding: 4px 4px 4px 4px;
background: #819bb4;
color: #e7e3e3;
}

.sidebar dd a:link, .sidebar dd a:visited, sidebar dd a:active {
display: block;
border: solid 1px #364b6a;
padding: 2px 6px 2px 6px;
background: #364b6a;
color: #e7e3e3;
text-decoration: none;
}

.sidebar dd a:hover {
background-color: #ffff00;
color: #364b6a;
border: 1px solid #ffff00;
text-decoration: none;
}

.content {
float: right;
width: 615px;
padding: 7px 7px;
font-family: verdana, arial, sans-serif;
line-height: 20px;
text-align: justify;
}

dt {
font-family: "trebuchet ms", "comic sans ms", arial, sans-serif;
color: #364b6a;
font-size: 16px;
font-weight: bold;
padding-bottom: 10px;
}

dd {
font-family: verdana, arial, sans-serif;
line-height: 1.2em;
font-size: 12px;
padding-bottom: 10px;
margin-left: 25px;
}

.footer {
clear: both;
height: 40px;
background-color: #364b6a;
color: #e7e3e3;
font-size: 75%;
text-align: center;
letter-spacing: 3px;
padding: 5px;
border-top: 1px solid #e7e3e3;
}

.footer a:link {
color: #e7e3e3;
text-decoration: none;
font-weight: bold;
padding: 3px;
border: 1px solid #604020;
}

.footer a:visited {
color: #e7e3e3;
text-decoration: none;
font-weight: bold;
padding: 3px;
border: 1px solid #604020
}

.footer a:hover {
background-color: #ffff00;
color: #364b6a;
text-decoration: none;
font-weight: bold;
padding: 3px;
border: 1px solid #e7e3e3;
}

.footer a:active {
color: #e7e3e3;
text-decoration: none;
font-weight: bold;
padding: 3px;
border: 1px solid #604020;
}

.imageleft {
margin: 2px 5px 0px 5px;
border-right: 6px groove #819bb4;
border-bottom: 6px groove #819bb4;
float: left;
}

.imageright {
margin: 2px 5px 0px 5px;
border-right: 6px groove #819bb4;
border-bottom: 6px groove #819bb4;
float: right;
}

Whew!!! that seems like a lot.....

As I do not have a 19inch or anything other than a 17inch monitor I can not reconstruct the issues you are having. However there are three 'errors' I can find in your CSS / page that may be causing an issue.

1. The colour for h4 should be #c0c0c0 and not the letter o you have

2. There is a semi-colon missing on your h5,h6 style

3. You need another clear at the end of the wrapper div -this will ensure that in more strict browsers other than IE then the whole of the text at the bottom is placed where it is intended. Make the div only 1px big so it doesn't affect the look of the page.

But let me say how pleased I am to see you attempting to use CSS rather than tables, as tables are really not for laying out your web site and can cause issues with people who rely on screen readers.

One last request though it would be better to use relative sizes for font sizes as people who have poor eyesight could resize the font at will if required. It is a simple matter of using in your styles something like 1 em or 100% rather than 12px.

Found it! I hope as I can't really test it. You have two fixed widths for your content and sidebar styles. These should be changed to relative widths so 25% and 75% for example -but don't forget that you have a margin in the middle and the two ends so you can't use those I have suggested above.

Another thing I noted about your markup is that you use a number of <p> tags without their corresponding </p> closing tags. Not invalid and it does work OK but is not cosidered to be very good form in later varieties of HTML (eg XHTML.)

I think some of these <p> tags should be <br> tags and what you mean to do (I think) is leave a blank line (bl) between two paragraphs.

Hope this has solved your problem.

Geoffrey,

Thanks for your help! I have corrected two of the errors you found! I didn't quite understand where to make this correction, "another clear at the end of the wrapper div"

Do you mind pasting that particular part here, so that I may correct it?

As for the font sizes, it is habit using the px sizes as
I know what to expect the size of font will be on the page.
Using em and %'s I am not so familiar.

I appreciate the tip as I did not know that that they could be resized if needed.

I will work on the relative widths of sidebar and content and review the use of <p>tags. I believe that will help.

The sidebar is floated left and the content is floated right. On a 19" monitor, there a larger than necessary space between the sidebar and content area (due to the float right). Is there a way to line the content area up a specific distance from the sidebar? So that it displays the same position, no matter the size monitor it is veiwed from. (unless it is a very small monitor of course)

It would be easier to use fixed width, I guess, but I rather like the idea of the page being fluid. Just don't have the necessary skills get it done. But, I am willing to learn and I have seen some great topic on CC forums.

Again, I appreciate your time and help. I'm off to work on some
<p> tags!!


Sheila

Part Two

Really the size of the monitor should make little or no difference to the layout of your page, Except for minor differences and the fact that 'white' spaces on larger monitors look bigger. But the solution I have given about using relative sizes in your sidebar and content styles should do what you want.

PS I also meant, in the last post, to say how wonderful it was to see someone structuring their heading tags correctly. You have a hierarchy of <h#> (ie <h1> <h2> ...) which makes the page much easier to scan for screen readers and thus simpler to understand for blind and partially sighted people so well done. I, personally have never been this organised and it is for me a humbling experience to see someone else doing it.

So thank you for showing me how I can achieve it.

Geoffrey,

Thanks for you awesome ideas! I do appreciate your time in helping me!

I have printed up your instructions and try to get it done today. I have yet to sit down and figure out the percentages to use in the sidebar and content areas yet.

I also appreciate your explainations about code as it applied to code readers and people that are partially sighted and the blind. I do not know much about this and it is a close topic to me as a few years ago I gave my Mom and Dad a computer, thinking my Mom would be the one to like it. To my surprise it was Dad that took a shine to the computer.

He purchased a book and taught himself how to use the computer (they are in a different state than me). Awesome for him as he had never even laid his hands on a keyboard, didn't know what a mouse was etc... To make a long story short, he was gradually losing his site, even while teaching himself computer skills and now he is legally blind and he often talks about how he wished he could use the computer again..

I am glad to know that I can write my site so that it may be usable to someone with a disability. Thanks for your words of encouragement.

I will post here again when I have all the corrections and additions made.

I am a volunteer for an organisation called ITCH (IT can help)and the RNIB (Royal national institute for the blind) in the UK and I support blind and partially sighted people to use computers for email and the like.

There is one particular person who never switches on her monitor, being registered blind there is no point, but computers have become a major way that she communicates with the world and I get a little frustrated with web designers who can not be bothered to make reasonable adjustments to their sites so screen readers actually have a chance to be able to understand what is being presented.

On the other hand the way you are designing your site is exactly what is required and an object lesson to us all.

What a rewarding thing you are doing with your volunteer time. It is a good use of your skills and a great compliment to your character.

A couple of things, before I forget. Could you provide links for information regarding the readers? You may send them to me privately, if you wish, so that we do not get too far off topic here. airgo@cyberback.com I wonder if my Dad could benefit from one? I believe he kept his computer, just cannot see well enough to use it.

I would also like to use ems or % for my font size. Is there a chart somewhere that shows the size relevance as opposed to using pixels. Or is it just a trial and error process?

Now, I have made most of the changes/corrections, I think.. One thing I am not very sure of though. My wrapper is sized at 90%. When I size my sidebar and content areas, should the percentages = 100% or should they total close to the 90% size of the wrapper. I actually am trying to use a reference book, but cannot find this answer.

I have made these adjustment to CSS file, but have not loaded it on server yet.

.sidebar {
float: left;
width: 20%;
padding: 5px;
}


.content {
float: right;
width: 70%;
padding: 7px 10px;
font-family: verdana, arial, sans-serif;
line-height: 20px;
text-align: justify;
}

It looks ok on my monitor.. I will load the changes here in a few minutes and see what it looks like live on the net!

Would you be able to help me with absolute positioning a graphic in my header? I would like for it to over lap the edges a bit.

Also, on a side note, my horses were imported from England to us in the United States! Actually I imported them off the internet.

Thanks ahead of time for your valuable time and assistance.

Sheila
gypsyvannerdreams.com/