Logo in two column liquid layout

#1

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

#2

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:

Quote:

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-
!-- Do weird things with divs to allow logo to appear to expand within
sidebar --
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

#3

Eric Lindsay <NOwebmasterSPAM (AT) ericlindsay (DOT) com> wrote:

Quote:

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

#4

Eric Lindsay wrote:

Quote:

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.

Quote:

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.

Quote:

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

#5

In article <1167294371.872301.67460 (AT) 48g2000cwx (DOT) googlegroups.com>,
"noff" <kechinoff (AT) gmail (DOT) com> wrote:

Quote:

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.

Quote:

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?

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

Quote:

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.

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

#6

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:

Quote:

In article <1167294371.872301.67460 (AT) 48g2000cwx (DOT) googlegroups.com>,
"noff" <kechinoff (AT) gmail (DOT) com> 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.

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?

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

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

#7

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

noff wrote:

Quote:

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 (AT) 48g2000cwx (DOT) googlegroups.com>,
"noff" <kechinoff (AT) gmail (DOT) com> 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.

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 orless
of it be visible in the sidebar?

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

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

#8

noff wrote:

Quote:

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

#9

In article <1167310280.286990.263530 (AT) n51g2000cwc (DOT) googlegroups.com>,
"noff" <kechinoff (AT) gmail (DOT) com> wrote:

Quote:

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.

Quote:

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

#10

Regarding changes to the design of the entry page of
http://www.queenslandarchitect.com/ which I am trying to make as a
belated Xmas present for my neighbour.

The current version is invalid, works in Safari and Opera, but not in
Firefox. I am not at all sure Safari and Opera should be so kind, so I
have to change it totally.

My neighbour the architect told me what he wanted something that looked
like :
http://www.troppoarchitects.com.au/
http://www.flightpatharchitects.com.au/
http://www.donovanhill.com.au/

The architect really seems to like having an entry page (if I can make
that distinction from a home page). I guess that makes sense to
architects, who often seem to want the entrance to a building to make a
grand statement. Pointing out these example pages had no search engine
position, and sometimes no navigation nor content (Flash or Javascript
required) made no difference.

One bit he really likes is in http://www.troppoarchitects.com.au/ The
horizontal table of images. I figured I would try to subvert an old
photogalley page, but on my first attempt with a list, I forgot that A
was inline, so I could hardly stick a paragraph block underneath.

I'd like to have the HTML stay with a ul (since that is how my other
menus are done, and seems to make some semantic sense). I want a
horizontal row of photos, each of which is a link. Underneath each
photo, I want a single word menu item link centered underneath each
photo (pointing to the same place as the photo). Plus I want the whole
thing liquid.

Can anyone point me to a nice example? I thought I had seen something in
the Max Design List tutorials, but now I can't find the example I
thought I recalled.

If I can't come up with a better idea, I'll change my list to divs, and
put up another example. But I am sure you folks will come though and
point me to some better idea.

--
http://www.ericlindsay.com