What technique would you reccomend for the following job?

Discussion in 'HTML' started by Crazy Jack, Mar 20, 2006.

  1. Crazy Jack

    Crazy Jack Guest

    Hi.

    I do not do web authoring for profit, but I like playing with it and I
    want to do a small site for a local school. This is to be in html4.01
    strict and css only. I hope.

    The layout is basic, a header, left side nav, content and footer.
    Loads of tutorials out there. But I can't get the header to do what I
    want.

    In the header I want a picture, text, then another picture. The
    pictures to stay the same size (150 x 96) but the text to resize if
    the window is shrunk. This looks like a variation on a three column
    site, so I have been trying designs without sucess! The latest was to
    have the following divs...

    <div id=header> position absolute
    <div id=leftpic> float left
    <div id=rightcontainer> float right
    <div id=flexibletext> float left
    <div id=rightpic> float right

    (pseudocode, no quotes, closing divs etc.)

    I know it's simple to those that know, but I'm stuck. Any ideas on
    how to outline this? Thanks.

    --
    The Source For Premium Newsgroup Access
    Great Speed, Great Retention
    1 GB/Day for only $8.95
     
    Crazy Jack, Mar 20, 2006
    #1
    1. Advertising

  2. On Mon, 20 Mar 2006 12:15:17 +0100, Crazy Jack <> wrote:

    > In the header I want a picture, text, then another picture. The
    > pictures to stay the same size (150 x 96) but the text to resize if
    > the window is shrunk. This looks like a variation on a three column
    > site, so I have been trying designs without sucess! The latest was to
    > have the following divs...


    > (pseudocode, no quotes, closing divs etc.)


    pseudocode is never any good, because it doesn't give a true insight in
    what you want/need, or what you might be doing wrong.


    My guess is, this could be something like what you might want (not tested):

    ,------[ markup ]
    | <body>
    | <div id="heading">
    | <h1>Pages title</h1>
    | </div>
    |
    | [ rest of the page ]
    |
    | </body>
    `------

    ,------[ styles ]
    | div#heading {
    | position:absolute;
    | height:96px;
    | font-size:3em;
    | top:0;
    | left:0;
    | padding:.2em 0 .2em 160px;
    | text-align:center;
    | background:$color url(leftpic.png) top left no-repeat; }
    |
    | #heading h1 {
    | position:absolute;
    | height:96px;
    | top:0;
    | right:0;
    | padding:.2em 160px .2em 0;
    | text-align:center;
    | background:transparent url(rightpic.png) top right no-repeat; }
    `------


    --
    ______PretLetters:
    | weblog | http://www.pretletters.net/weblog/weblog.html |
    | webontwerp | http://www.pretletters.net/html/webontwerp.html |
    |zweefvliegen | http://www.pretletters.net/html/vliegen.html |
     
    Barbara de Zoete, Mar 20, 2006
    #2
    1. Advertising

  3. Crazy Jack

    Neredbojias Guest

    With neither quill nor qualm, Crazy Jack quothed:

    > Hi.
    >
    > I do not do web authoring for profit, but I like playing with it and I
    > want to do a small site for a local school. This is to be in html4.01
    > strict and css only. I hope.
    >
    > The layout is basic, a header, left side nav, content and footer.
    > Loads of tutorials out there. But I can't get the header to do what I
    > want.
    >
    > In the header I want a picture, text, then another picture. The
    > pictures to stay the same size (150 x 96) but the text to resize if
    > the window is shrunk.


    What do you mean by this last? -The actual font-size is to be reduced?
    Or simple wrapping? If the latter:

    <div style="width:100%;text-align:center;"><img style="float:right"
    src="image02.jpg" alt="Shalzbut!"><img style="float:left"
    src="image01.jpg" alt="Gadzooks!">Text here.</div>

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Mar 20, 2006
    #3
  4. Crazy Jack

    JDS Guest

    JDS, Mar 20, 2006
    #4
  5. Crazy Jack wrote:

    > In the header I want a picture, text, then another picture. The
    > pictures to stay the same size (150 x 96) but the text to resize if
    > the window is shrunk. This looks like a variation on a three column
    > site, so I have been trying designs without sucess! The latest was to
    > have the following divs...


    This sample of mine may help.
    http://k75s.home.att.net/banner.html

    --
    -bts
    -Warning: I brake for lawn deer
     
    Beauregard T. Shagnasty, Mar 20, 2006
    #5
  6. Crazy Jack

    Neredbojias Guest

    With neither quill nor qualm, JDS quothed:

    > On Mon, 20 Mar 2006 06:07:38 -0700, Neredbojias wrote:
    >
    > > Shalzbut

    >
    > Isn't that spelled "shazbut"?


    That was the Celtic version. (They talk funny in Boston.)

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Mar 20, 2006
    #6
  7. Crazy Jack

    Crazy Jack Guest

    On Mon, 20 Mar 2006 12:32:25 +0100, "Barbara de Zoete"
    <> wrote:

    >> In the header I want a picture, text, then another picture. The

    snip
    >> site, so I have been trying designs without sucess! The latest was to
    >> have the following divs...


    >> (pseudocode, no quotes, closing divs etc.)


    >pseudocode is never any good, because it doesn't give a true insight in
    >what you want/need, or what you might be doing wrong.


    Thanks for the reply. I used pseudo 'cos all I'm after is an overview
    of which structure you html designers might actually use. As I said,
    mine didn't work (and I feel I was making it more and more complicated
    trying to make it work).

    >My guess is, this could be something like what you might want (not tested):


    snip.

    Thanks very much. I shall play with the ideas.

    --
    The Source For Premium Newsgroup Access
    Great Speed, Great Retention
    1 GB/Day for only $8.95
     
    Crazy Jack, Mar 22, 2006
    #7
  8. Crazy Jack

    Crazy Jack Guest

    On Mon, 20 Mar 2006 06:07:38 -0700, Neredbojias
    <> wrote:

    Hi.

    >> In the header I want a picture, text, then another picture. The
    >> pictures to stay the same size (150 x 96) but the text to resize if
    >> the window is shrunk.


    >What do you mean by this last? -The actual font-size is to be reduced?
    >Or simple wrapping? If the latter:


    Yes, the latter, wrapping text.

    ><div style="width:100%;text-align:center;"><img style="float:right"
    >src="image02.jpg" alt="Shalzbut!"><img style="float:left"
    >src="image01.jpg" alt="Gadzooks!">Text here.</div>


    Simple. Elegant and simple! Sigh... I tried to make my attempt into
    a mini 3 column layout when all I needed was this.

    Thanks.

    --
    The Source For Premium Newsgroup Access
    Great Speed, Great Retention
    1 GB/Day for only $8.95
     
    Crazy Jack, Mar 22, 2006
    #8
  9. Crazy Jack

    Crazy Jack Guest

    On Mon, 20 Mar 2006 17:00:59 GMT, "Beauregard T. Shagnasty"
    <> wrote:

    Hi.

    >> In the header I want a picture, text, then another picture. The
    >> pictures to stay the same size (150 x 96) but the text to resize if
    >> the window is shrunk. This looks like a variation on a three column
    >> site, so I have been trying designs without sucess! The latest was to
    >> have the following divs...

    >
    >This sample of mine may help.
    >http://k75s.home.att.net/banner.html


    Similar to Nered above. Again, my thanks for the pointers.


    --
    The Source For Premium Newsgroup Access
    Great Speed, Great Retention
    1 GB/Day for only $8.95
     
    Crazy Jack, Mar 22, 2006
    #9
  10. Crazy Jack

    Neredbojias Guest

    With neither quill nor qualm, Crazy Jack quothed:

    > On Mon, 20 Mar 2006 06:07:38 -0700, Neredbojias
    > <> wrote:
    >
    > Hi.
    >
    > >> In the header I want a picture, text, then another picture. The
    > >> pictures to stay the same size (150 x 96) but the text to resize if
    > >> the window is shrunk.

    >
    > >What do you mean by this last? -The actual font-size is to be reduced?
    > >Or simple wrapping? If the latter:

    >
    > Yes, the latter, wrapping text.
    >
    > ><div style="width:100%;text-align:center;"><img style="float:right"
    > >src="image02.jpg" alt="Shalzbut!"><img style="float:left"
    > >src="image01.jpg" alt="Gadzooks!">Text here.</div>

    >
    > Simple. Elegant and simple! Sigh... I tried to make my attempt into
    > a mini 3 column layout when all I needed was this.
    >
    > Thanks.


    Actually, I think you can get rid of the width:100% in the div. Was
    from other page markup in my "testing template".

    Best o' luck.

    --
    Neredbojias
    Contrary to popular belief, it is believable.
     
    Neredbojias, Mar 22, 2006
    #10
    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. Citizen X
    Replies:
    7
    Views:
    423
    Citizen X
    Nov 20, 2003
  2. Mike Barnard
    Replies:
    1
    Views:
    410
  3. Mike Barnard
    Replies:
    0
    Views:
    326
    Mike Barnard
    Sep 7, 2005
  4. Mike Barnard

    Reccomend a colour wheel?

    Mike Barnard, Mar 2, 2007, in forum: HTML
    Replies:
    12
    Views:
    673
    Bergamot
    Mar 6, 2007
  5. John Doe
    Replies:
    1
    Views:
    271
    Pascal J. Bourguignon
    Dec 19, 2008
Loading...

Share This Page