aligning with CSS

Discussion in 'HTML' started by Gernot Frisch, Mar 16, 2006.

  1. No clue.
    - I want to align the red, green, blue boxes in one line
    - red,green,blue must be 45px high
    - red (center) must be as wide as possible
    - yellow must start exactly below the line
    - yellow must be left aligned with red one.


    Please, please help!


    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//DE">
    <html>
    <head>
    <style>

    /* MAIN AREA*/
    .X1{
    display:inline;
    background-color: green;
    margin-left: 32px;
    width: 12px;
    height: 45px;
    }

    .X2{
    display:inline;
    background-color: red;
    width: 90%;
    height: 45px;
    }

    .X3{
    display:inline;
    background-color: blue;
    width: 12px;
    height: 45px;
    }
    .Y2{
    width:90%;
    background-color: yellow;
    margin-top: 45px;
    margin-left: 44px;
    }

    </style>
    </head>
    <body>

    <div class="X1">&nbsp;</div>
    <div class="X2">Header</div>
    <div class="X3">&nbsp;</div>
    <div class="Y2">Her is some long text</div>

    </body></html>
     
    Gernot Frisch, Mar 16, 2006
    #1
    1. Advertising

  2. Gernot Frisch

    Neredbojias Guest

    With neither quill nor qualm, Gernot Frisch quothed:

    >
    >
    >
    > No clue.
    > - I want to align the red, green, blue boxes in one line
    > - red,green,blue must be 45px high
    > - red (center) must be as wide as possible
    > - yellow must start exactly below the line
    > - yellow must be left aligned with red one.
    >
    >
    > Please, please help!


    Use a div, background:red; float inner sized red div left, blue right.

    Another div below, yellow background, body-background inner divs similar
    to above.

    In some browsers divs may not show unless they have content.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Mar 16, 2006
    #2
    1. Advertising


  3. >> No clue.
    >> - I want to align the red, green, blue boxes in one line
    >> - red,green,blue must be 45px high
    >> - red (center) must be as wide as possible
    >> - yellow must start exactly below the line
    >> - yellow must be left aligned with red one.
    >>
    >>
    >> Please, please help!

    >
    > Use a div, background:red; float inner sized red div left, blue
    > right.
    >
    > Another div below, yellow background, body-background inner divs
    > similar
    > to above.


    I'm totally new to css/html and I don't understand everything you
    said. Can you give an example?
     
    Gernot Frisch, Mar 16, 2006
    #3
  4. Gernot Frisch

    Good Man Guest

    "Gernot Frisch" <> wrote in news:47ti6eFh8kptU1
    @individual.net:

    >
    >>> No clue.
    >>> - I want to align the red, green, blue boxes in one line
    >>> - red,green,blue must be 45px high
    >>> - red (center) must be as wide as possible
    >>> - yellow must start exactly below the line
    >>> - yellow must be left aligned with red one.
    >>>
    >>>
    >>> Please, please help!

    >>
    >> Use a div, background:red; float inner sized red div left, blue
    >> right.
    >>
    >> Another div below, yellow background, body-background inner divs
    >> similar
    >> to above.

    >
    > I'm totally new to css/html and I don't understand everything you
    > said. Can you give an example?


    i hate to come in sounding snarky, but have you considered buying a book or
    doing some online tutorials? The best way to learn is by figuring things
    out. Nobody is going to do your work for you.
     
    Good Man, Mar 16, 2006
    #4
  5. Gernot Frisch

    dorayme Guest

    In article <Xns9788ABF29B742sonicyouth@216.196.97.131>,
    Good Man <> wrote:

    > i hate to come in sounding snarky, but have you considered buying a book or
    > doing some online tutorials? The best way to learn is by figuring things
    > out. Nobody is going to do your work for you.


    Well, I dunno, you could say something like this to be nicer:

    > Please, please help!
    >


    > /* MAIN AREA*/
    > .X1{
    > display:inline;
    > background-color: green;
    > margin-left: 32px;
    > width: 12px;
    > height: 45px;
    > }
    >
    > .X2{
    > display:inline;
    > background-color: red;
    > width: 90%;
    > height: 45px;
    > }
    >
    > .X3{
    > display:inline;


    You can't do it this way. Ask yourself what the 90% width of the
    X2 class could be a percentage of?

    Look at a series of blocks and css to get as close to what you
    want as possible: here is a little rough unfinished start, ask
    about how to improve it or revise it so it actually does what you
    want as long as it is a sensible thing to want... I give a simple
    fixed width container example, that looks closest to what you
    want. Fluid layouts are trickier but much more worthwhile in the
    end. Have a go with different widths, auto or percentages.

    http://dorayme.150m.com/test/alignWithCss.html

    Post the results of your efforts in a URL and try not to use a
    miserable lowdown cheapskate free host like me...

    Mr. Flavell is going to help you, but he needs to see you try
    harder. He is like that. Stern and Scottish, you see... :)

    --
    dorayme
     
    dorayme, Mar 17, 2006
    #5
    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. Sebastian Fey

    big CSS-trouble! aligning in listitem!

    Sebastian Fey, Jul 17, 2003, in forum: HTML
    Replies:
    6
    Views:
    400
    Chris Harris
    Jul 17, 2003
  2. Jukka K. Korpela

    Re: (CSS) Aligning signed numbers in cells

    Jukka K. Korpela, Aug 10, 2003, in forum: HTML
    Replies:
    0
    Views:
    480
    Jukka K. Korpela
    Aug 10, 2003
  3. badstyle
    Replies:
    4
    Views:
    535
    badstyle
    Dec 18, 2003
  4. news.frontiernet.net
    Replies:
    6
    Views:
    1,126
    news.frontiernet.net
    Apr 16, 2004
  5. TheStonge
    Replies:
    9
    Views:
    430
    Edwin van der Vaart
    May 24, 2004
Loading...

Share This Page