Hi!
I am experiencing a problem with a two-column layout -- apparently I
am not the first person, but the solutions I found in GG did not
give me what I was looking for.
The page should be as follows:
................................
.. +----------+-------+ .
.. I Logo + sloganI .
.. +----+-----+-------+ .
.. I I I .
.. I N I I .
.. I I content I .
.. +----+ I .
.. I I .
.. I I .
.. I I .
.. +---------------+ .
................................
I want to have the main navigataion (N) on the left, expanding
downwards as much as necessary. The main content should be right of
the menu, taking the remaining space.
FIRST TRY:
I basically did this with individual floating DIVs and it worked OK
with just a "Lorem ipsum" in it. But as the content text grew
longer, the DIV was wrapped and placed below the navigation.
Well, this effect is OK, if there really is not enough space to hold
the content layer (i.e. on a handheld device). But in that case, it
would have been enough to do normal word-wrapping (there was at
least 66% of the screen width left).
SECOND TRY:
I then created a container layer (clear: both;), holding the
navigation (float: left; width in EM) and the content (margin in
EM). This works more or less. But now the problem is that the
content layer does never wrap, so with big font size the menu will
eat up all space and the page is not readable anymore.
So I am now looking for a method to tell the content layer: "Be as
wide as you can and, if you cannot be at least x EM wide, then go
down". The usage of min-width is OK, but the "as wide as you can"
does not work. Or, it would be nice to have some kind of "be 100%
minus the width of the navigation". Any help?
Thank you very much. Kind regards
Philipp 10 1695
On Thu, 04 May 2006 12:38:28 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote: The page should be as follows:
............................... . +----------+-------+ . . I Logo + sloganI . . +----+-----+-------+ . . I I I . . I N I I . . I I content I . . +----+ I . . I I . . I I . . I I . . +---------------+ . ...............................
Give the content box a left margin just a bit more wide than is your
navigation box (say 10em;). Absolutely position the navigation box at the
left margin and fix its width (at say 8 em). There will remain a 2em gap
between your main content and your navigation. The content box is liquid
in so far that the width adapts to the width of the view port of the
browser. No need to go underneath the navigation. Or do I misunderstand
you?
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Barbara de Zoete schrieb: Give the content box a left margin just a bit more wide than is your navigation box (say 10em;). Absolutely position the navigation box at the left margin and fix its width (at say 8 em). There will remain a 2em gap between your main content and your navigation. The content box is liquid in so far that the width adapts to the width of the view port of the browser. No need to go underneath the navigation. Or do I misunderstand you?
I tried this. The point is, that I *want* to go the content box
below the navigation, once it would be too small to be readable.
However, as long as it is large enough, I of course want to have it
next to the navigation.
I have already tried your variant. It worked, but with the
limitation that the content cannot go under the navigation anymore.
Maybe it is just impossible to do what I want, I don't know. For me,
it seems that the problem is the way the content box' width is
calculated. The browsers want to expand it more than necessary (I
think to 100%) and so it wraps.
But if I define a max-width of x%, there is another problem: Once
the content goes below the navigation (as I want it to), max-width
prevents it from filling out the entire width.
This is why I was looking for some expression telling the DIV that
it should be "*" wide (as with frames some years ago): (width minus
navigation), if not wrapped, and (width) when wrapped.
Philipp
On Thu, 04 May 2006 14:27:06 +0200, Philipp E. Imhof <pu****@fippu.ch>
wrote: Barbara de Zoete schrieb: Give the content box a left margin just a bit more wide than is your navigation box (say 10em;). Absolutely position the navigation box at the left margin and fix its width (at say 8 em). There will remain a 2em gap between your main content and your navigation. The content box is liquid in so far that the width adapts to the width of the view port of the browser. No need to go underneath the navigation. Or do I misunderstand you?
I have already tried your variant. It worked, but with the limitation that the content cannot go under the navigation anymore.
In that case, create an empty box with exactly the same dimensions as the
nav box has, and float it underneath the nav box. Now, if the content is
too wide to fit next to the nav box (and the float that is underneath it),
it will move below. Ugly hack, but possibly useful.
--
______PretLetters:
| weblog | http://www.pretletters.net/weblog/weblog.html |
| webontwerp | http://www.pretletters.net/html/webontwerp.html |
|zweefvliegen | http://www.pretletters.net/html/vliegen.html |
Barbara de Zoete schrieb: In that case, create an empty box with exactly the same dimensions as the nav box has, and float it underneath the nav box. Now, if the content is too wide to fit next to the nav box (and the float that is underneath it), it will move below. Ugly hack, but possibly useful.
Good idea. I did not know that this was possible.
Anyway, if I get it correctly, this will mean that if the content
moves below, there will always be the same margin on the left side.
In that case it could also stay next to the navigation... ;-)
Philipp Oops, my bad. With putting that extra empty float in the same spot as your nav box, there is no need to set a margin on the content box. Just an explicit min-width.
I tried it, but it would not work. Problems are:
- I cannot make the dummy box have exactly the same dimensions as
the navigation box, because the height is not known
- it does not resolve my problem with the madatory width for the
content, because it is still getting larger than necessary and will
wrap with no need
Too bad... :(
Regards
Philipp E. Imhof schrieb: Maybe it is just impossible to do what I want, I don't know. For me, it seems that the problem is the way the content box' width is calculated. The browsers want to expand it more than necessary (I think to 100%) and so it wraps.
I changed my mind. There are just too many things I cannot predict,
so the layout will never be perfect anyway.
My solution is:
- for normal browsers, the content will never wrap. If someone
really wants to enlarge the font 10 times, it's his problem, not
mine and one cannot expect a perfect layout in such circumstances
- for handheld devices, I will define another style sheet where the
content "flows" around the navigation:
xxx ....
xxx ....
.........
or maybe one with the content below the navigation, I will see.
Thank you for your help. Maybe CSS 17 will allow to give "*" as
width-setting.
Regards
Philipp
Philipp E. Imhof wrote: I am experiencing a problem with a two-column layout -- apparently I am not the first person, but the solutions I found in GG did not give me what I was looking for.
Search for "two column css".
The page should be as follows:
. +----------+-------+ . . I Logo + sloganI . . +----+-----+-------+ . . I I I . . I N I I . . I I content I . . +----+ I . . I I . . I I . . I I . . +---------------+ .
This is a fairly simple layout. Using the techniques found in the search
should yield a good result.
Posting an URL would greatly assist us helping you.
--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)
Jim Moe schrieb: Search for "two column css".
This is a fairly simple layout. Using the techniques found in the search should yield a good result.
I'm afraid, it is not that simple. The two column layout is ok. The
problem is to control the wrapping and to have content go below
navigation in *some* cases.
CSS provides ways to
- never have it below navigation
- always have it below navigation
- have it below, if it is smaller than x%, *but* when below, it
will not expand to 100% anymore
but there seems to be no way for telling a DIV to eat up remaining
space, e.g.
- 100% - width_of_navigation when not wrapped
- 100% when wrapped
I changed my layout to something that can be coded in CSS/XHTML
*and* understood by current browsers.
Posting an URL would greatly assist us helping you.
Yes, you're right. I will do that tonight and post a link.
Regards
Philipp This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: SimonC |
last post by:
I'm looking to do something similar to a feature found on
Ticketmaster.com, where you select your seats at a venue, and then you
have two minutes in which to take or leave them.
QUESTION 1a....
|
by: Willem |
last post by:
Hi,
I have a newbie question: is it possible to make a search form in asp that
searches in two different databases (access)?
Willem
|
by: Hank1234 |
last post by:
Can I use one Data Adapter and one Command Builder to update amny tables?
Currently in my data adapter I query two tables and fill them into two tables
in a data set. When I make a change to a...
|
by: Matt K. |
last post by:
Hi there,
I have a form in an Access project that contains a subform which
displays the results of a query of the style "select * from
where = #a certain date#". In the main part of the form...
|
by: Prabhudhas Peter |
last post by:
I have two object instances of a same class...
and i assigned values in both object instances (or the values can be taken
from databse and assigned to the members of the objects)...
Now i want to...
|
by: clintonG |
last post by:
I applied aspnet_regsql to SQL2K which was working fine throughout Beta 2
development. After installing Visual Studio and SQL Express RTM my
application has blown up. Logging in to the application...
|
by: Steven |
last post by:
Hello,
I have a question about strcmp(). I have four words, who need to be
compared if it were two strings. I tried adding the comparison values
like '(strcmp(w1, w2) + strcmp(w3, w4))', where...
|
by: dhable |
last post by:
I just started working with Python and ran into an annoyance. Is there
a way to avoid having to use the "from xxx import yyy" syntax from
files in the same directory? I'm sure it's been asked a...
|
by: Peter Olcott |
last post by:
http://groups.google.com/group/comp.lang.c++/msg/a9092f0f6c9bf13a
I think that the operator() member function does not work correctly, does
anyone else know how to make a template for making two...
|
by: lllomh |
last post by:
Define the method first
this.state = {
buttonBackgroundColor: 'green',
isBlinking: false, // A new status is added to identify whether the button is blinking or not
}
autoStart=()=>{
|
by: DJRhino |
last post by:
Was curious if anyone else was having this same issue or not....
I was just Up/Down graded to windows 11 and now my access combo boxes are not acting right. With win 10 I could start typing...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 4 Oct 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM)
The start time is equivalent to 19:00 (7PM) in Central...
|
by: tracyyun |
last post by:
Hello everyone,
I have a question and would like some advice on network connectivity. I have one computer connected to my router via WiFi, but I have two other computers that I want to be able to...
|
by: NeoPa |
last post by:
Introduction
For this article I'll be using a very simple database which has Form (clsForm) & Report (clsReport) classes that simply handle making the calling Form invisible until the Form, or all...
|
by: isladogs |
last post by:
The next Access Europe meeting will be on Wednesday 1 Nov 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM)
Please note that the UK and Europe revert to winter time on...
|
by: NeoPa |
last post by:
Introduction
For this article I'll be focusing on the Report (clsReport) class. This simply handles making the calling Form invisible until all of the Reports opened by it have been closed, when it...
|
by: isladogs |
last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM).
In this month's session, Mike...
|
by: GKJR |
last post by:
Does anyone have a recommendation to build a standalone application to replace an Access database? I have my bookkeeping software I developed in Access that I would like to make available to other...
| |