What technique would you reccomend for the following job?

C

Crazy Jack

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

Barbara de Zoete

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...
Click to expand...
(pseudocode, no quotes, closing divs etc.)
Click to expand...

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; }
`------
 
N

Neredbojias

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.
Click to expand...

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

Beauregard T. Shagnasty

Crazy said:
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...
Click to expand...

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

Crazy Jack

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.
Click to expand...

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):
Click to expand...

snip.

Thanks very much. I shall play with the ideas.
 
C

Crazy Jack

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

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

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>
Click to expand...

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

Thanks.
 
N

Neredbojias

With neither quill nor qualm, Crazy Jack quothed:
On Mon, 20 Mar 2006 06:07:38 -0700, Neredbojias

Hi.



Yes, the latter, wrapping text.


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

Thanks.
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

What I can get the due left of every person easily for the following table [image attached] ? 0
Aligned to the left 3
Only one table shows up with the information 2
Align img inside nav tabs section 5
Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
Why is the e.target not working here? 1
I am trying to detect Which image id="" was clicked ? 22

Members online

No members online now.
Total: 31 (members: 0, guests: 31)
Robots: 319

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,011
Latest member
AjaUqq1950

Latest Threads

Top