Question about alignment for text and images

[Becky Lash]

Hi, all,

Thanks to all of you who made the suggestion to start with basic html in a
different thread ("CSS2 question" posted 11/22/04). That has made things
much simpler. Because I am constructing most pages from scratch, I decided
to try to learn transitional XHTML syntax that validates. So far, both my
first page and .css file validate at the W3C site.

I have three questions pertaining to the following URL:

http://www.smallbusinessproofreading.com/woodstone/index2.asp

1. When you pass the mouse cursor over the top menu buttons, the text does
not align on the buttons. What are the best
properties to add to my .css to make the text align? I do not want to use
<br /> tags, but I will do that if there is no other way.

Note: I am not crazy about this menu, but the owner insisted that I use
this. I much prefer text-driven menus with not so many graphics.

2. On the left side, the sliced images are not aligning correctly either.
What is the best way to fix this in the .css?

3. The alignment is slightly different in Firefox and Internet Explorer.
Does anyone have any tips on how to deal with these differences in .css? I
googled this and tried a few workarounds I found, but the workarounds did
not fix the difference in alignment. What am I doing wrong?

Note: The site is not finished, of course. The animated GIF was added
because the owner insisted after I pointed out the design issues to him.

I am posting the .css as well, after my closing name "Becky". Thank you
<<very>> much for any insights. I do appreciate the help so much and hope
one day to return the favor when I am better at .css.

Kind regards,

Becky

+++++CSS follows+++++

body

{

margin: 10px;
padding: 0;
border: #FFFFFF;

}

p

{

font-family: Verdana, sans serif;

color: #0000A0;

}


p.menu { font-size: 10px;

color: black;

text-align: center;

text-decoration: none;

padding-top: 3em;



}

a.menu {font-size: 10px;

color: black;

font-weight: bold;

text-decoration: none;

padding-top: 0em;

}

#topnav {

float: left;

width: 100%;

background: transparent;
padding-bottom: 1em;
}

#columnleft {
width: 190px;
float:left;
padding-bottom: 1em;
background: url(../images/woodstone1_3x1.jpg);
vertical-align: top;
border-right-style: solid;
border-right-color: #74c3fc;
border-right-width: thin;
}

#columnmain {
padding-top: 1em;
margin: 0 2em 0 200px;
}

#footer {
clear: both;
padding-bottom: 1em;
border-top: 1px solid #333;
text-align: center;
}

#layer5 {
position: absolute;
width:36px;
height: 40px;
z-index: 7;
left: 690px;
top: 16px;
visibility: hidden;


}

#table24 {
width:70px;

background: url("../images/woodstone2_1x7.jpg");
height:108px;
background-repeat: no-repeat;




}

#layer4 {
position: absolute;
width: 36px;
height: 40px;
z-index: 6;
left: 623px;
top: 16px;
visibility: hidden;


}

#table22 {

width:67px ;

background: transparent url(../images/woodstone2_1x6.jpg);
height:155px;
background-repeat: no-repeat;

}

#layer3 {
position: absolute;
width: 69px;
height: 220px;
z-index: 5;
left: 555px; top: 16px;
visibility: hidden;


}

#table20 {

background: transparent url(../images/woodstone2_1x5.jpg);
width:68px;
height:214px;
background-repeat: no-repeat;



}



#layer2 {
position: absolute;
width: 48px;
height: 36px;
z-index: 4;
left: 487px;
top: 16px;
visibility:hidden;



}

#table21 {

width:68px ;

background: transparent url(../images/woodstone2_1x4.jpg);
height:149px;
background-repeat: no-repeat;


}

#layer1 {

position: absolute;
height: 40px;
width: 36px;
z-index: 3;
left: 419px; top: 16px;
visibility: hidden;


}


#table23 {

width:68px ;
background: transparent url(../images/woodstone2_1x3.jpg);
height:108px;
background-repeat: no-repeat;


}

#layer7 {

position: absolute;
width: 517px;
height: 132px;
z-index: 2;
left: 237px;
top: 124px;
visibility: visible;


}

#layer8 {

position: absolute;
width: 11px;
height: 266px;
z-index: 1;
left: 755px;
top: -10px;
visibility: visible;

}


H1 { font-weight: bold; font-size: 14px; font-family: Verdana, Arial,
sans-serif;

color: #74C3FC; text-decoration: none}
H2 { font-weight: bold; font-size: 14px; font-family: Verdana, Arial,
sans-serif;

color: #74C3FC; text-decoration: none}
H3 {font-weight: bold; color: #21962E;font-family: Verdana, Arial,
sans-serif;

text-decoration: none ; padding-left: 5em}
H4 {font-weight: bold; color: #74C3FC; font-family: Verdana, Arial,
sans-serif;

text-decoration: none }




++++end of css++++

 

[Barbara de Zoete]

Hi, all,

<snip *>5Kb* of stuff>

I've had it with all those who upload there files here as plain text in
stead of just making it available through the web by uploading it to a
test environment and posting a simple link. First of all I hate the size
of these posts. Secondly, I wont tweak plain code and I'm not going to
cut&past it into a file I have to create to test it.

I'm not going to read any more original posts of anyone who's name I've
not seen before. I'm most likely not going to read any more of becky's.

Good luck,

 

[Becky Lash]

<snip *>5Kb* of stuff>

I've had it with all those who upload there files here as plain text in
stead of just making it available through the web by uploading it to a
test environment and posting a simple link. First of all I hate the size
of these posts. Secondly, I wont tweak plain code and I'm not going to
cut&past it into a file I have to create to test it.

Barbara--

Thanks for letting me know. I apologize for my sloppiness. I'll post a link
next time. I thought posting the pertinent .css on this newsgroup was
customary.

Becky

 

[rf]

Hi, all,

Er, G'day.

http://www.smallbusinessproofreading.com/woodstone/index2.asp

I apoligise up front for you are *not* going to like this at all. Please
don't take it as personal affront or anything, I'm not trying to be nasty,
it is just how I feel about this page.

Now, with a smile...

If I were given this page to "fix" I would not.

I would start totally again, from the ground up, with nothing at all in my
editor except the caret.

I would then start typing, reproducing what the page *should* look like and
keeping the KISS principle firmly in mind as I go.

I would not try to fit pieces of graphic together as foreground. Those
peices *will* drift apart when the surrounding content changes size because
of the user changing viewport size or font size. I would put it all in the
background. By way of example, narrow your browser window to about 600
pixels. That whole navigation thing wraps and looks, at best, odd.

I would not try to line up dozens of "layers". I would put everything into
divs, probably floated ones, and let the browser worry about lining them up,
judiciously of course, I would not want my content to overwrite the
background graphic.

In the end I might even decide that this design is not suited to CSS at all
(being sort of last century anyway) and could be better expressed using
tables for layout. Often it is not the fact that tables are used for layout
but the fact that the design *assumes* that this is going to be the case. If
you really want to use CSS for layout then you must use a design that is CSS
friendly.

I would most certainly not use pictures of text instead of the real text.
Pictures of text are a major accessibility problem. Poorly sighted people
can not resize them and, frankly, your pictures of text look like fly
droppings on my system

If the customer insists on pictures of text then it is time for the customer
to either be educated or to find a new developer.

I would also seriously consider how that navigation would work when
javascript is disabled. Hint: aural browsers may not "read" javascript.
Googlebot certainly does not. View the page using Lynx and see if you can
navigate (I didn't try but I suspect it might be difficult).

Lastly I would not use a WYSIWYDG "editor". I would use a straight text
editor and a selection of browsers for testing, after taking it over to the
validator of course

Phew. I really hope that helps.

 

[Becky Lash]

see "Becky" below.

Becky Lash wrote:

I would start totally again, from the ground up, with nothing at all in my
editor except the caret.

Becky: Just spent the last 15 hours doing that.

I would then start typing, reproducing what the page *should* look like
and
keeping the KISS principle firmly in mind as I go.

Becky: ditto.

I would not try to fit pieces of graphic together as foreground. Those
peices *will* drift apart when the surrounding content changes size
because
of the user changing viewport size or font size. I would put it all in the
background. By way of example, narrow your browser window to about 600
pixels. That whole navigation thing wraps and looks, at best, odd.

Becky: Yep, agree. I'm testing different options.

I would not try to line up dozens of "layers". I would put everything into
divs, probably floated ones, and let the browser worry about lining them
up,
judiciously of course, I would not want my content to overwrite the
background graphic.

Becky: Are you looking a file that has been uploaded in the last few hours?

In the end I might even decide that this design is not suited to CSS at
all
(being sort of last century anyway) and could be better expressed using
tables for layout. Often it is not the fact that tables are used for
layout
but the fact that the design *assumes* that this is going to be the case.
If
you really want to use CSS for layout then you must use a design that is
CSS
friendly.

Becky: Yes, I'm considering using a combination of tables and CSS for this.

I would most certainly not use pictures of text instead of the real text.
Pictures of text are a major accessibility problem. Poorly sighted people
can not resize them and, frankly, your pictures of text look like fly
droppings on my system

If the customer insists on pictures of text then it is time for the
customer
to either be educated or to find a new developer.

Becky: Actually, I tried to get out of this project after the owner
completely redesigned the navigation. But, because of some complicated
circumstances, I must finish this project.

I would also seriously consider how that navigation would work when
javascript is disabled. Hint: aural browsers may not "read" javascript.
Googlebot certainly does not. View the page using Lynx and see if you can
navigate (I didn't try but I suspect it might be difficult).

Becky: Users won't be able to use the navigation. I explained that to the
owner, but he would not budge on the requirement to use these menus. I am
stuck with them, unfortunately.

Lastly I would not use a WYSIWYDG "editor". I would use a straight text
editor and a selection of browsers for testing, after taking it over to
the
validator of course

Becky: I do use notepad. And Dreamweaver when I get tired.

Phew. I really hope that helps.

Becky: Yes, thank you.

 

[Neal]

Thanks for letting me know. I apologize for my sloppiness. I'll post a
link
next time. I thought posting the pertinent .css on this newsgroup was
customary.

With all due respect, a cursory glance through the past week's posts
yields many examples of people being asked to provide links rather than
code.

 

[Becky Lash]

As I said, I apologize for my sloppiness. I have been up two days with no
sleep and did not intend to be a problem on this newsgroup.

 

[Becky Lash]

+++snip+++++

I have three questions pertaining to the following URL:

http://www.smallbusinessproofreading.com/woodstone/index2.asp

The .CSS is at the following URL:

http://www.smallbusinessproofreading.com/woodstone/templates/woodstone2.css

CSS as plain text:

http://www.smallbusinessproofreading.com/woodstone/templates/woodstone2.txt

+++end of snip++++


I am shifting text and styles at the previously posted links. If you were
going to comment, which I doubt is going to happen anyway in the near
future, you might want to wait as I am finding fixes to a few things. I have
solved the 2d question on my original list:

+++snip++++

2. On the left side, the sliced images are not aligning correctly either.
What is the best way to fix this in the .css?
+++end of snp++++

I believe I fixed it by twiddling with the alignment properties in the css
declaration and adding "display: block;" to a couple of divs. Honestly, I am
so tired, I can't really remember, but thought I'd share what I do remember
as others have shared their knowledge in general ways.

For those of you who are looking at my CSS: Yes, fixed width is lousy. And,
yes, I am stuck with it, to my knowlege. Now on to the rest of my building
blocks.

Becky

 

[Lauri Raittila]

see "Becky" below.



Becky: Just spent the last 15 hours doing that.

Hm. It seems I should have given you bit more information. It should not
take more than 15minutes per page...

Or, I as usual, overevaluated your abilities... (this is certainly not
easiest layout to get using CSS)

It would be much easier for me to get this done using CSS than tables.
But:
a) you already have that table stuff, and it almost works
b) you have lots to learn on CSS and flexible design...

Becky: ditto.

No, you abviously didn't keep it simple. It is *much* better though.

Could you make test case with just your problem. So, a site with only
content and style enaugh to find what it is all about. I was able to find
the HTML involved in those menu buttons finally, but there is lots of CSS
I have no idea if they do something or not.

Becky: Yep, agree. I'm testing different options.

Becky: Are you looking a file that has been uploaded in the last few hours?
I've updated that link to reflect <div> tags and they are floated in the css
declaration.

Hm. I seems to break quite badly on Opera 7... Effect looks like you had
line-height:3, but you don't have, so it must be something else...

Becky: Yes, I'm considering using a combination of tables and CSS for this.

No need. Your one big problem will be that you have fixed wdith buttons.
Text wont fit them...

What you should do, is make it possible to those buttons to strech. Very
hard to do, unless you skip IE that don't support alpha transparency (you
can feed px fonts for that, it is better than making images of text - or
you could use IE specific transparency stuff). Then it is only hard.

That is irrelevant of your current problem, but much more interesting, so
I go on and explain:

1. Take that brushed steel part of page.
2. Cut it to left and right piece
3. Make middle piece that allow image to go longer. It is easier if you
make it streight, but curiving is not impossible either.
4. Divide your buttons to left and right part, make streching middle
part.
5. Position those buttons behind that steel bar, in order . Do not
position them on their own, but as a block, so that they will take the
space they need to. If you wish them to be same width, use em unit to set
their size. Start positioning them from right hand side.
6. Then position that steel bar over the images. Make it 100% of site
(you may use some sensible max-width)
7. Make onmouseover stuff to change background image and height of those
buttons you did.

Becky: Actually, I tried to get out of this project after the owner
completely redesigned the navigation. But, because of some complicated
circumstances, I must finish this project.

If you do it well, it will be good addition in your resume. Thise kinds
of layouts aren't done well usually¹

That is not as hard as it seems. Make them clickable, getting somewhere.
So use something like
<a href="foobar.html" onclick="js-stuff">

I just found your menu buttons. You had marked them up as paragraphs.
That is not good idea.


[1] Never seen any exept some test cases.