6 replies [Last post]
RygirVague
Offline
newbie
Last seen: 15 years 43 weeks ago
Timezone: GMT+1
Joined: 2004-10-16
Posts: 4
Points: 0

I'm trying to build a title bar, that has a logo to the left and a special graphic to the right, the height should be determined by the title text centered over this bar.

The problems I'm currently stuck with :
-with tables, I would have made a fixed width (# of pixels of image) table cell followed by a totally freeform cell with an x-repeating background and again a cell with a fixed width, so that if you resize the window, the title bar keeps looking complete without strange gaps, yet doesn't stretch the graphics or anything.
-Another thing I'm in doubt about : Is it possible to center the title over those 3 area's? How about just 2? I'm pretty sure I can put it relative to the first area, and give it a little offset to the right...
-How do I avoid having the images slide under/over/into eachother when the browserwindow gets too small; i.e. I'd like to have a minimum width (which would be under 640*480, but still).
-And considering this might get complicated - how do I keep everything under it (which will probably be a bit of text, with a couple of images positioned next to them in an table-like layout when I finally get this :oops: ) positioned correctly (I'm thinking working with 'em' values will solve that)?

RygirVague
Offline
newbie
Last seen: 15 years 43 weeks ago
Timezone: GMT+1
Joined: 2004-10-16
Posts: 4
Points: 0

"resizing" title bar

To quickly illustrate what I'm trying to describe and recreate in CSS :http://users.pandora.be/rygir/EXAMPLE/tabletest.html
The basic idea of how it behaves when the window is resized works almost flawlessly.

Things I hope to be able to fix :

  • it should not become smaller than the rightmost cell and leftmost cell added together; that would be everything without the filler cell in the middle.
  • If the window cannot contain everything below the title bars (currently only the words "text bla"), it should display scrollbars, which it does not in firefox (did not try IE) [obviously to test this you need to make the window very small]

-additional questions after the above is functional-
(Finally, I hope to make text fit across all 3 cells, overlapping them, ignoring the 'cells' completely is perhaps best. Actually it would be multiple rows of cells, maybe that complicates things?)[/]

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 13 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

"resizing" title bar

When using CSS you can actually get images sliding under each other in the manner you chose to create headers that adapt to multi page widths. You actually need to lay out your graphics on bits of paper and decide how they will interleave. I've had up to 8 objects all layered in a header. Take a look at the one I made in http://www3.ns.sympatico.ca/d.elliott/chair/ and see how the layers slide as you narrow the window.

If you think something like that would work for you, I may be able to guide you through the process. You have to think differently, though than in conventional layouts.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

RygirVague
Offline
newbie
Last seen: 15 years 43 weeks ago
Timezone: GMT+1
Joined: 2004-10-16
Posts: 4
Points: 0

"resizing" title bar

I looked at your example, amazing work with transparancy up there, and my first thoughts were that this was not going to work in IE...but then I checked, it looks virtually identical and still functional, I'm very impressed!

I gladly accept your help! Even more so because this might enable me to build the design as I had originally conceived...

The layering bit is a mystery to me at the moment, perhaps you could start with that?

PS : Have to say I'm kind of sad to find out that there is no "replacement" for some functionality of tables (other than to create tables of course)!

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 13 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

"resizing" title bar

Before we can get into this in any detail, you are going to have to do some background reading on absolute and relative positioning.

Google a few CSS tutorials that talk about absolute and relative positioning using css and get the concepts down - especially absolute positioning inside relatively positioned objects. Once you have a grasp on that, read the following excellent article since he describes the type of method I generally use: http://www.stopdesign.com/articles/absolute/

Then we will have a frame of reference for discussing what you may wish to do.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

RygirVague
Offline
newbie
Last seen: 15 years 43 weeks ago
Timezone: GMT+1
Joined: 2004-10-16
Posts: 4
Points: 0

"resizing" title bar

I'm still reading Tongue, so this is just to show I'm not dead...

I already knew the W3C definitions of positioning by heart, and read a few tutorials before but it's interesting reading on how some people make use of it. Wish I had more time but school is demanding a lot of my attention atm.

DCElliott
DCElliott's picture
Offline
Leader
Halifax, Canada
Last seen: 3 years 13 weeks ago
Halifax, Canada
Timezone: GMT-3
Joined: 2004-03-22
Posts: 828
Points: 0

"resizing" title bar

NP, its your schedule. I'll be kicking around. Good on you for doing your homework - there are many who practice whimpering instead of coding. . .

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS