Stretchable header problem

S

sanbat

With that totally convoluted layout covered with the unnecessarily complex
CSS you never will fix this. You have taken the wrong approach to centreing
both the navigation block and the content together.

IMHO start again from scratch, firmly applying the KISS principal.

I didn't write the html code, my designer did. Short of finding
someone else to take over the work, would you be able to help give me
a sample mockup?
 
R

rf

I didn't write the html code, my designer did.

Bugger :)
Short of finding
someone else to take over the work, would you be able to help give me
a sample mockup?

From what I can discern from your prior post you want a fixed width design,
about 770 pixels wide. Both the content and that menu bar. (This is in
contrast to your original post, and your subject line, where you want a
stretchable header).

You complain that the menu bar shifted with reference to the content when
the browser canvas width changes.

Look at what you have. The content is a centred block 770 pixels wide. So
good so far.

Now look at that menu. The left hand side is a div floated left, 59% of the
canvas width. Inside that (nested a div or two deep) is a div floated right
with a width of 473 pixels. This contains your menu, in a ul.

You have two totally seperate blocks using totally different alignment.

The left hand side of that menu is *never* going to line up exactly with the
left of the content with varying canvas widths. Only one very specific
canvas width will cause it to happen, if at all, and that will be different
on different browsers, depending on how they translate from percentages to
pixels. Your current design is simply not viable.

The key to a fixed width centred design is to put *everything* into that
centred contend div. Header, menu bar and all. That should do for a start.
Nobody is going to do this for you, try it out yourself and show us what you
achieve.

BTW did you already have that menu bar sorted out before you asked for, and
received from several people, the code to make it happen? Sounds like it to
me.
 
D

dorayme

<[email protected]
m>,
That effect isn't the one I'm looking for. What I'm looking for is to
have the "My Stuff" and the "Search This" button exactly 800px apart,
centered. The dark green bar then extends out to the edges of the
browser window.

When a user's browser window is resized horizontally, only the dark
green bar should be extended, while the menu and search are still
800px apart, centered.

The goal is to make sure the "My Stuff" aligns to the left margin of
the content area, and the "Search This" button aligned to the right
margin of the content area, while the dark green bar keeps going to
the browser's edges.

I hope I'm making more sense now.

You are making more sense. But you need to say more before I
would spend any time on this. Is the slope important to you? Is
the thickening of the dark green where the search field is,
important to you? What exactly do you mean by "My Stuff" and the
"Search This" button exactly 800px apart"? I understand all the
words. What part of "My Stuff" falls within the 800px, from the
left edge of the text? What part of the search field, the left or
right edge, the right edge of the lighter green rectangle with
"Search this".

I don't mean to be rude, but you should be making all this clear
without being asked.
 
R

rf

I didn't write the html code, my designer did. Short of finding
someone else to take over the work, would you be able to help give me
a sample mockup?

Another thought:

Your designer wrote it? Did you pay him/her? If so then report back that it
is broken and you want if fixed. For free of course otherwise he/she is in
breach of contract :)
 
S

sanbat

From what I can discern from your prior post you want a fixed width design,
about 770 pixels wide. Both the content and that menu bar. (This is in
contrast to your original post, and your subject line, where you want a
stretchable header).

You complain that the menu bar shifted with reference to the content when
the browser canvas width changes.

Look at what you have. The content is a centred block 770 pixels wide. So
good so far.

Now look at that menu. The left hand side is a div floated left, 59% of the
canvas width. Inside that (nested a div or two deep) is a div floated right
with a width of 473 pixels. This contains your menu, in a ul.

You have two totally seperate blocks using totally different alignment.

The left hand side of that menu is *never* going to line up exactly with the
left of the content with varying canvas widths. Only one very specific
canvas width will cause it to happen, if at all, and that will be different
on different browsers, depending on how they translate from percentages to
pixels. Your current design is simply not viable.

The key to a fixed width centred design is to put *everything* into that
centred contend div. Header, menu bar and all. That should do for a start.
Nobody is going to do this for you, try it out yourself and show us what you
achieve.

From what the coder has told me, it's due to the left bar being
thinner than the thicker right bar. As a result, he's had to hack it
up like this.

The menu is supposed to be of a fixed width and centered. The green
bar though, is supposed to extend out to the browser width. This means
on the left side, a thin dark horizontal green bar, and on the right,
a thicker dark horizontal green bar.

He's saying if both sides of the bar were of equal thickness, this
would be much easier to design for.
 
R

rf

From what the coder has told me,


So, why are we not talking with the coder?


it's due to the left bar being
thinner than the thicker right bar. As a result, he's had to hack it
up like this.

The menu is supposed to be of a fixed width and centered. The green
bar though, is supposed to extend out to the browser width. This means
on the left side, a thin dark horizontal green bar, and on the right,
a thicker dark horizontal green bar.

He's saying if both sides of the bar were of equal thickness, this
would be much easier to design for.

Finally I can figure out what your problem is. Took a bit of bloody time!

You want a totally centred design. Easily achieved. Its the dark green bit
that is giving you, or your designer/coder problems. Correct?

Well, that is a bit tricky, I might think about it overnight, it being
almost tomorrow here anyway. First thought though is to use some creative
backgrounds in a div that contains your menu bar div, the latter sized and
centred just like the content div. The background might be a strip of green,
thin on the left, thick on the right, much wider than any screen out there,
centred. The navbar backgrounds can overwrite this accordingly.

Question: Why do you need the design to be exactly 770 pixels wide? My
browser canvas is rarely exactly that wide.
 
R

rf

You want a totally centred design. Easily achieved. Its the dark green bit
that is giving you, or your designer/coder problems. Correct?

Well, that is a bit tricky, I might think about it overnight, it being
almost tomorrow here anyway.

Here you go:

http://barefile.com.au/stuff/

While fiddling with this I had occasion to look closely at the code on your
page.

It is, well, not very good. Not good at all.

Javascript all over the place. You don't need any of that, especially
jquery. Do your dropdown menu with CSS (yes, it's possible these days). Use
a *real* form for the search bit, not a couple of orphaned input fields
driven by javascript.

The CSS is way, way over the top. Have a look at mine. About 30 lines, most
of which is obtaining that green band.

Compare the sizes of the two pages.

Yours is 150K all up, including 110K of javascript "libraries" and 31K of
CSS.
Mine is 10K all up.

Mine validates.

As I said before, it's time to re-write this and KISS.
 
R

rf

Bergamot said:
http://www.bergamotus.ws/screenshots/sanbat.png

Tis the problem trying to force text, which is of indeterminate size,
within the confines of a fixed number of pixels. Chances are it will
look "off" at best when an overflow condition exists.

BTW, that's my normal text size, not zoomed text. My normal window size
is no wider than that, and usually narrower.

I spotted that almost as soon as I uploaded this. This "corner" should be
attached to the form, not the ul, and then would actually work quite well.

I will, however, leave that as an exercise for the student :)
 
R

rf

That looks like a very nice job indeed Richard. In case sanbat
has been kidnapped or rendered, I thought someone should tell
you... <g>

Thankyou ma'am.

The problem Bergamot grouched about is also fixed. Increase your font size
to whatever.
 
S

sanbat

Here you go:

Thank you! That's great. :)
Javascript all over the place. You don't need any of that, especially
jquery. Do your dropdown menu with CSS (yes, it's possible these days). Use
a *real* form for the search bit, not a couple of orphaned input fields
driven by javascript.

The CSS is way, way over the top. Have a look at mine. About 30 lines, most
of which is obtaining that green band.

Compare the sizes of the two pages.

Yours is 150K all up, including 110K of javascript "libraries" and 31K of
CSS.
Mine is 10K all up.

That was a sample test page. The actual site uses Jquery for other
things. However you're right. Time to start cleaning things up!
 
R

rf

Thank you! That's great. :)

You're welcome.
That was a sample test page. The actual site uses Jquery for other
things.

What other things?
However you're right. Time to start cleaning things up!

Have a look at the thread happening over at comp.lang.javascript, subject
Prototype - Good/Bad/why?

It's about prototype.js but jquery is mentioned and bundled in with the
"library" concept.

It's a fair bet that you would be able to reproduce the functionality you
use in jquery in a far better manner and not waste that 100K of download.
Your code might just even work with IE8.
 

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

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,904
Latest member
HealthyVisionsCBDPrice

Latest Threads

Top