Question about alignment for text and images

Discussion in 'HTML' started by Becky Lash, Nov 23, 2004.

  1. Becky Lash

    Becky Lash Guest

    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++++
     
    Becky Lash, Nov 23, 2004
    #1
    1. Advertising

  2. On Tue, 23 Nov 2004 02:45:39 -0600, Becky Lash <>
    wrote:

    > 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,

    --
    Weblog | <http://home.wanadoo.nl/b.de.zoete/_private/weblog.html>
    Webontwerp | <http://home.wanadoo.nl/b.de.zoete/html/webontwerp.html>
    Zweefvliegen | <http://home.wanadoo.nl/b.de.zoete/html/vliegen.html>
     
    Barbara de Zoete, Nov 23, 2004
    #2
    1. Advertising

  3. Becky Lash

    Becky Lash Guest

    "Barbara de Zoete" <> wrote in message
    news:eek:pshwtq5lsx5vgts@zoete_b...
    > On Tue, 23 Nov 2004 02:45:39 -0600, Becky Lash <>
    > wrote:
    >
    >> 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.
    >


    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
     
    Becky Lash, Nov 23, 2004
    #3
  4. Becky Lash

    rf Guest

    Becky Lash wrote:

    > 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.

    --
    Cheers
    Richard.
     
    rf, Nov 23, 2004
    #4
  5. Becky Lash

    Becky Lash Guest

    see "Becky" below.
    "rf" <rf@.invalid> wrote in message
    news:RSDod.45750$...
    > 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?
    I've updated that link to reflect <div> tags and they are floated in the css
    declaration.
    >
    > 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.
    >
    > --
    > Cheers
    > Richard.
    >
    >
     
    Becky Lash, Nov 23, 2004
    #5
  6. Becky Lash

    Neal Guest

    On Tue, 23 Nov 2004 03:19:59 -0600, Becky Lash <>
    wrote:

    > 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.
     
    Neal, Nov 23, 2004
    #6
  7. Becky Lash

    Becky Lash Guest

    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.
    "Neal" <> wrote in message
    news:eek:...
    > On Tue, 23 Nov 2004 03:19:59 -0600, Becky Lash <>
    > wrote:
    >
    >> 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, Nov 23, 2004
    #7
  8. Becky Lash

    Becky Lash Guest

    +++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
     
    Becky Lash, Nov 23, 2004
    #8
  9. in alt.html, Becky Lash wrote:
    > see "Becky" below.
    > "rf" <rf@.invalid> wrote in message
    > news:RSDod.45750$...
    > > 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. :)


    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...

    > > 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.


    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.

    > > 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?
    > 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┬╣

    > > 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).


    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.

    --
    Lauri Raittila <http://www.iki.fi/lr> <http://www.iki.fi/zwak/fonts>
     
    Lauri Raittila, Nov 23, 2004
    #9
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Pete
    Replies:
    6
    Views:
    1,107
    Inger Helene Falch-Jacobsen
    Mar 5, 2004
  2. Johannes Koch
    Replies:
    0
    Views:
    1,685
    Johannes Koch
    Jul 29, 2003
  3. Karsten Wutzke

    Text field text alignment

    Karsten Wutzke, Dec 14, 2006, in forum: HTML
    Replies:
    5
    Views:
    884
    Jonathan N. Little
    Dec 14, 2006
  4. Deep Silent Ocean

    Different header and text alignment in winform datagrid ??

    Deep Silent Ocean, Sep 30, 2005, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    168
    Deep Silent Ocean
    Sep 30, 2005
  5. Deep Silent Ocean

    Different header and text alignment in winform datagrid ??

    Deep Silent Ocean, Sep 30, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    195
    Deep Silent Ocean
    Sep 30, 2005
Loading...

Share This Page