7 replies [Last post]
luke
Offline
newbie
Last seen: 16 years 41 weeks ago
Joined: 2004-04-05
Posts: 4
Points: 0

i tried to do that an code a page, 99% in css

worked partially

tried to achieve the following layout: (window-manager-style)
thats a part of the page Wink

tried that for the header (windowstyle-where the caption will be)
three lines of boxes! here the first line:

<div class="header_top_left_corner">
  <div class="header_top_left">
    <div class="header_top_middle">
      <div class="header_top_right">
          <div class="header_top_right_corner"></div>
      </div>
    </div>
  </div>
</div>

why 5 divs, cause:
border --> (has to be textable) color --> blending* -->(has to be textable) color* --> border
every div (box) will be filled with an image

* = may be left out in an style

how can i do an fariable size? (fill up to 100%?)

already worked it out till color2 (texting) but cannot get it working further Sad

can someone help me?

TIA
Luke

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 12 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

design with boxlayout only?

Quote:
why 5 divs, cause:
border --> (has to be textable) color --> blending* -->(has to be textable) color* --> border
every div (box) will be filled with an image

I almost understand, but not quite. You need to explain
what you want plain words, and lots of them.

http//www.positioniseverything.net/

luke
Offline
newbie
Last seen: 16 years 41 weeks ago
Joined: 2004-04-05
Posts: 4
Points: 0

design with boxlayout only?

pictures say more than thousand words Smile
hope i can explain it better by illustrating it
(sorry, pictures are not accurate by px Wink )

oops sorry, the font on the 2 lower examples should be black, hard to see in white :oops:
TIA
Luke

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 12 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

design with boxlayout only?

You might do as in this page:
http://www.positioniseverything.net/temp/csscreator/foobartest.html.

There is a full width div that has a very wide BG
image attached to the right edge, and the image
looks like your #4 and #5 images joined in one.

Laying on top of that is a left float with no width
assigned, so it will shrink to fit the words inside.
IE/Mac won't do this, so it may not be good for you.

The float also has a BG atached to the right edge,
and this one looks like #2 and #3 joined. Finally
you need a float inside the float, but floated left.
that one has the #1 BG image, or maybe a normal
image instead.

As you see, it does work in general, but getting what
you want might take some hard tweaking, and I can't
figure out how to make IE/Mac look good.
HTH

http//www.positioniseverything.net/

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

design with boxlayout only?

What do you plan to do if the combined content is wider (from large text size or small window size) than the browser width. That has an impact on possible solutions.

A couple of ideas I have floating (actually they are non-floating ideas Laughing out loud ) around are to use two absolutely positioned boxes with right aligned text on the right but the real problem is how to handle potential wrapping.

This highlights one of the design problems with CSS - Divs are independent while with tables, one cell can borrow from the other while keeping the designer's desired total table width.

I build a lot of headers with overlapping absolute divs which works wonders for graphics, but as soon as you have to work with text that can be of variable width, you face significant design constraints.

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Big John
Big John's picture
Offline
Enthusiast
Arizona
Last seen: 17 years 12 weeks ago
Arizona
Timezone: GMT-7
Joined: 2003-10-29
Posts: 94
Points: 0

design with boxlayout only?

Yes, I forgot to mention that wrapping text will shatter
this design. I got too caught up in just trying to explain
it in 5000 words or less. Oh well...

http//www.positioniseverything.net/

luke
Offline
newbie
Last seen: 16 years 41 weeks ago
Joined: 2004-04-05
Posts: 4
Points: 0

design with boxlayout only?

i guess everything has its bad side,
i just use 800x600 as minimum resolution for a page
(1024x768 is standard by now, isn't it?)

id o not know anyone looking @ pages in smaller window size
(most ppl prefer maximized browsing...)
anyway you can set window size by generating your page in an popup
where your popup is minimum 800x600 --> my boxlayout just hast to fit into eg 400px without wrapping (smaller windows wil get other looks)

i'll work on that
msg you later

Luke

luke
Offline
newbie
Last seen: 16 years 41 weeks ago
Joined: 2004-04-05
Posts: 4
Points: 0

design with boxlayout only?

sorry, but you are right
boxlayout with text sucks;

my result was quite good
perfect look in opera BUT (yeah, right guess, MS *beep*s it up *lol*)
IE does a newline, no idea why, but it does!

now, solved it by usting tables, which get nearly all their details from css

Luke