Website Design Forum - Logo in two column liquid layout

Author

Logo in two column liquid layout

Eric Lindsay

2007-01-27, 11:33 pm

I want to put a logo in the top right hand corner of a two column
(content, plus right hand navigation sidebar) liquid layout, styled with
CSS. First I tried a fixed width div floated right, width equal to the
logo. The logo was included as a background image in the sidebar div,
and the div was the same width as the logo. Not happy when fonts are
enlarged, so that seemed the wrong approach.

Next I did a very wide two tone background image for the body, used
background: #444 url(images/background4000rgb444_666.gif) 75% 0 repeat-y
; to make things look like two columns. Now I could make my sidebar
something close to 25%, and handle different width displays.

However my logo sits off in the right hand top, looking too narrow when
a wide browser window is available. What I need is a logo that stretches
horizontally when the display gets wider.

Since the logo had only about 5 strong horizontal areas on its far left
hand side, I thought I could imitate these five areas in the sidebar div
with a set of divs with coloured borders. I was thinking along these
lines because I had seen some national flags done with borders, and had
just tried the same idea to do some sparkline like graphs, dimensioned
in ems so they expanded and contracted with the type size used.

So to imitate the left hand side of the 100 px wide 159 px high logo I
used-

<div style="border-style: solid; border-width: 0 0 57px 0; border-color:
#888; margin-right: 98px; "></div>
<div style="border-style: solid; border-width: 0 0 1px 0; border-color:
#0819b1; margin-right: 98px; "></div>
<div style="border-style: solid; border-width: 0 0 94px 0; border-color:
#008484; margin-right: 98px; "></div>
<div style="border-style: solid; border-width: 0 0 1px 0; border-color:
#002685; margin-right: 98px; "></div>
<div style="border-style: solid; border-width: 0 0 6px 0; border-color:
#fff; margin-right: 98px; "></div>

However it would be very messy to put this into each HTML page. Would I
be correct to imagine a more standard way of solving this problem would
be to somehow generate a very wide logo image, and just let more or less
of it be visible in the sidebar?

I am graphically challenged, and didn't find any tool that could modify
the image (all my searches lead to Photoshop, which I don't own). If
that is the correct approach, I'll find a way to make the graphic.

--
http://www.ericlindsay.com

noff

2007-01-27, 11:33 pm

Hi, I'm from Russia, and I don't completely understand, what you want -
too much letters.
In two words - say, what you want, in two sentences, something like: "I
want make picture as background of my site's header. But I can't make
picture." or "I need that in my site's header there were Site's Title
on Gray BG, Then Blue delimiter and then Green textfield."

If I understand what you need, I make it.

Greetings.
Mikhail Kechinov.
www.mkechinov.ru

Eric Lindsay wrote:
> I want to put a logo in the top right hand corner of a two column
> (content, plus right hand navigation sidebar) liquid layout, styled with
> CSS. First I tried a fixed width div floated right, width equal to the
> logo. The logo was included as a background image in the sidebar div,
> and the div was the same width as the logo. Not happy when fonts are
> enlarged, so that seemed the wrong approach.
>
> Next I did a very wide two tone background image for the body, used
> background: #444 url(images/background4000rgb444_666.gif) 75% 0 repeat-y
> ; to make things look like two columns. Now I could make my sidebar
> something close to 25%, and handle different width displays.
>
> However my logo sits off in the right hand top, looking too narrow when
> a wide browser window is available. What I need is a logo that stretches
> horizontally when the display gets wider.
>
> Since the logo had only about 5 strong horizontal areas on its far left
> hand side, I thought I could imitate these five areas in the sidebar div
> with a set of divs with coloured borders. I was thinking along these
> lines because I had seen some national flags done with borders, and had
> just tried the same idea to do some sparkline like graphs, dimensioned
> in ems so they expanded and contracted with the type size used.
>
> So to imitate the left hand side of the 100 px wide 159 px high logo I
> used-
> 
> <div style="border-style: solid; border-width: 0 0 57px 0; border-color:
> #888; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 1px 0; border-color:
> #0819b1; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 94px 0; border-color:
> #008484; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 1px 0; border-color:
> #002685; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 6px 0; border-color:
> #fff; margin-right: 98px; "></div>
>
> However it would be very messy to put this into each HTML page. Would I
> be correct to imagine a more standard way of solving this problem would
> be to somehow generate a very wide logo image, and just let more or less
> of it be visible in the sidebar?
>
> I am graphically challenged, and didn't find any tool that could modify
> the image (all my searches lead to Photoshop, which I don't own). If
> that is the correct approach, I'll find a way to make the graphic.
>
> --
> http://www.ericlindsay.com

Spartanicus

2007-01-27, 11:33 pm

Eric Lindsay <NOwebmasterSPAM@ericlindsay.com> wrote:

>However my logo sits off in the right hand top, looking too narrow when
>a wide browser window is available. What I need is a logo that stretches
>horizontally when the display gets wider.

It takes considerable effort for someone else to imagine what you are
doing based on a description only. Posting a URL generates better and/or
more answers.

--
Spartanicus

John Hosking

2007-01-27, 11:33 pm

Eric Lindsay wrote:
> I want to put a logo in the top right hand corner ...

>
> So to imitate the left hand side of the 100 px wide 159 px high logo I
> used-

> <div style="border-style: solid; border-width: 0 0 57px 0; border-color:
> #888; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 1px 0; border-color:
> #0819b1; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 94px 0; border-color:
> #008484; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 1px 0; border-color:
> #002685; margin-right: 98px; "></div>
> <div style="border-style: solid; border-width: 0 0 6px 0; border-color:
> #fff; margin-right: 98px; "></div>

What the other first responders have said is true: an URL would have
been (and still would be) useful. But what you seem to have at the
moment is really:
<div style="border-bottom:solid 57px #888; margin-right:98px;"></div>
<div style="border-bottom:solid 1px #0819b1; margin-right:98px;"></div>
<div style="border-bottom:solid 94px #008484; margin-right:98px;"></div>
<div style="border-bottom:solid 1px #002685; margin-right:98px;"></div>
<div style="border-bottom:solid 6px #fff; margin-right:98px;"></div>

Whether this solves your problem, I can't really tell from your OP.

>
> However it would be very messy to put this into each HTML page.

You could have something like

<div id="logo1"></div>
<div id="logo2"></div>
<div id="logo3"></div>
<div id="logo4"></div>
<div id="logo5"></div>

with a reference to a stylesheet containing styles for those divs.

> Would I
> be correct to imagine a more standard way of solving this problem would
> be to somehow generate a very wide logo image, and just let more or less
> of it be visible in the sidebar?

Can't tell without the URL or more clues. But maybe what you want is to
make an image, 1 pixel in width, with #888 for 57 pixels in height, then
1 pixel of #0819b1, then 94 pixels of #008484, etc. Then you can use
this 1-pixel-wide image where you need it, stretching it (repeat-x) as
needed.

Again, without the URL, I have the feeling I'm solving the wrong problem.

--
John

Eric Lindsay

2007-01-27, 11:33 pm

In article <1167294371.872301.67460@48g2000cwx.googlegroups.com>,
"noff" <kechinoff@XXXXXXXXXX> wrote:

> Hi, I'm from Russia, and I don't completely understand, what you want -
> too much letters.
> In two words - say, what you want, in two sentences, something like: "I
> want make picture as background of my site's header. But I can't make
> picture." or "I need that in my site's header there were Site's Title
> on Gray BG, Then Blue delimiter and then Green textfield."
>
> If I understand what you need, I make it.
>
> Greetings.
> Mikhail Kechinov.
> www.mkechinov.ru

Many thanks for your offer. You are correct, too many letters.
[color=darkred]

For test purposes, I just wrote a web page with a set of 5 divs where
one border of each was styled with the colours and height I needed to
match (and the other borders didn't exist). Since they stack, I set a
margin to reveal the picture, and then stretched the web page really
wide (about 4000 pixels). That let me use use the Grab app to capture
the now - apparently - stretched logo, and test whether this would work.
It does. And I can stuff it back in to a web page as a background image
to test if it works. It does! Yeah!

If the resulting graphic were better, this would be exactly what I need.
Now I just need to find the right graphics app so I don't try to do this
in some equally weird manner
[color=darkred]

I have asked in Macintosh newsgroups to see whether anyone can point me
to a suitable graphics application.

When I get a bit more of this solved I will upload the result and ask my
remaining questions. Thanks to everyone.

--
http://www.ericlindsay.com

noff

2007-01-27, 11:33 pm

Free graphics editors:
http://www.ironspider.ca/freetools/grfxeditors.htm
Use anyone to paint your problem and than we will see, whats a problem.

// ...please, learn me speak english, I dont know many (much?) words.

PS: if you already have some html-result of your problem, let us see
it.

Eric Lindsay wrote:
> In article <1167294371.872301.67460@48g2000cwx.googlegroups.com>,
> "noff" <kechinoff@XXXXXXXXXX> wrote:
>
>
> Many thanks for your offer. You are correct, too many letters.
>
>
> For test purposes, I just wrote a web page with a set of 5 divs where
> one border of each was styled with the colours and height I needed to
> match (and the other borders didn't exist). Since they stack, I set a
> margin to reveal the picture, and then stretched the web page really
> wide (about 4000 pixels). That let me use use the Grab app to capture
> the now - apparently - stretched logo, and test whether this would work.
> It does. And I can stuff it back in to a web page as a background image
> to test if it works. It does! Yeah!
>
> If the resulting graphic were better, this would be exactly what I need.
> Now I just need to find the right graphics app so I don't try to do this
> in some equally weird manner
>
>
> I have asked in Macintosh newsgroups to see whether anyone can point me
> to a suitable graphics application.
>
> When I get a bit more of this solved I will upload the result and ask my
> remaining questions. Thanks to everyone.
>
> --
> http://www.ericlindsay.com

noff

2007-01-27, 11:33 pm

For future: russian adage: "=D0=9B=D1=83=D1=87=D1=88=D0=B5 1 =D1=80=D0=B0=
=D0=B7 =D1=83=D0=B2=D0=B8=D0=B4=D0=B5=D1=82=D1=8C, =D1=87=D0=B5=D0=BC
100 =D1=80=D0=B0=D0=B7 =D1=83=D1=81=D0=BB=D1=8B=D1=88=D0=B0=D1=82=D1=8C". (=
"It's better 1 time to see, than 100
times to hear.")

noff wrote:[color=darkred]
> Free graphics editors:
> http://www.ironspider.ca/freetools/grfxeditors.htm
> Use anyone to paint your problem and than we will see, whats a problem.
>
> // ...please, learn me speak english, I dont know many (much?) words.
>
> PS: if you already have some html-result of your problem, let us see
> it.
>
>
> Eric Lindsay wrote:
-[color=darkred]
"I[color=darkred]
ld I[color=darkred]
ould[color=darkred]
less[color=darkred]
dify[color=darkred]

Bergamot

2007-01-27, 11:33 pm

noff wrote:
> For future: russian adage: "Лучше 1 раз увидеть, чем
> 100 раз услышать". ("It's better 1 time to see, than 100
> times to hear.")

English equivalent: A picture is worth 1000 words

That seems the case here, in any language. :)

--
Berg

Eric Lindsay

2007-01-27, 11:33 pm

In article <1167310280.286990.263530@n51g2000cwc.googlegroups.com>,
"noff" <kechinoff@XXXXXXXXXX> wrote:

> Free graphics editors:
> http://www.ironspider.ca/freetools/grfxeditors.htm
> Use anyone to paint your problem and than we will see, whats a problem.

Thank you for that list of graphic editors. All except The Gimp are
Windows programs. I use a Macintosh. My computer does not use Windows. I
have asked about suitable graphics editors in a Macintosh news group.

> // ...please, learn me speak english, I dont know many (much?) words.
>
> PS: if you already have some html-result of your problem, let us see
> it.

Here is the logo image done with a bunch of div to extend it (they
overwrite the CSS version on this test page).
http://www.queenslandarchitect.com/apartments/unit.html

Here is the logo image done only as a CSS background. I now believe this
use of a stretched background image is the right way to allow an image
to stretch horizontally. I just have to do a better version of the
stretched image.

http://www.queenslandarchitect.com/sitemap.html (or actually any of the
other pages - that one still has typos that stop validation)

Well, actually, I also have to fix the many other faults in these test
pages :-) Starting with the 12 pages where I broke validation, mostly
with height and width in img tags. However the other 33 pages are valid,
and these ones will be by this evening. Then I will have a bunch of
questions about things I don't understand.

--
http://www.ericlindsay.com