Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > Left-hand menu in CSS

Reply
Thread Tools

Left-hand menu in CSS

 
 
Kim André Akerĝ
Guest
Posts: n/a
 
      06-04-2004
I'm in the process of making my first table-free website, but I've run into
a problem with the CSS. To be more specific, it has to do with the use of
floating <div>s and other content.

Take a look at this page (I've used this page as an example due to the
amount of text I've already written for it):
http://www.drittmaskin.com/personvern.php

Once the text in the contents area passes the left-hand floating menu, it
jumps to the far left, making the page look broken up and all bad.

As you can see by the source code, the text itself is contained within a
<div> with the id named "contents".

Any bright ideas how to make the contents line up perfectly on the left-hand
side? Don't worry about blank space below the left-hand menu, as I'll be
adding more to that menu later (username listings, latest articles, etc.)

--
Kim André Akerĝ
- http://www.velocityreviews.com/forums/(E-Mail Removed)
(remove NOSPAM to contact me directly)


 
Reply With Quote
 
 
 
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      06-04-2004
Quoth the raven Kim André Akerĝ:

> I'm in the process of making my first table-free website, but I've run into
> a problem with the CSS. To be more specific, it has to do with the use of
> floating <div>s and other content.


Perhaps this template I made for a friend will help. The colors and
borders were for illustration.
http://home.rochester.rr.com/bshagnasty/twocolumn.html

Lots of other good templates available here as well.
http://nemesis1.f2o.org/templates.php

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
 
 
 
rf
Guest
Posts: n/a
 
      06-05-2004

"Kim André Akerĝ" <(E-Mail Removed)> wrote in message
news:40c091a8$1@proxy....
> I'm in the process of making my first table-free website, but I've run

into
> a problem with the CSS. To be more specific, it has to do with the use of
> floating <div>s and other content.
>
> Take a look at this page (I've used this page as an example due to the
> amount of text I've already written for it):
> http://www.drittmaskin.com/personvern.php
>
> Once the text in the contents area passes the left-hand floating menu, it
> jumps to the far left, making the page look broken up and all bad.
>
> As you can see by the source code, the text itself is contained within a
> <div> with the id named "contents".


Don't even need to look. Add margin-left: whatever to your #contents rule,
where whatever is the width of the nav bar div.

Cheers
Richard.


 
Reply With Quote
 
Kim André Akerĝ
Guest
Posts: n/a
 
      06-06-2004
"Beauregard T. Shagnasty" <(E-Mail Removed)> skrev i melding
news:8P2wc.52155$(E-Mail Removed)...
> Quoth the raven Kim André Akerĝ:
>
> > I'm in the process of making my first table-free website, but I've run

into
> > a problem with the CSS. To be more specific, it has to do with the use

of
> > floating <div>s and other content.

>
> Perhaps this template I made for a friend will help. The colors and
> borders were for illustration.
> http://home.rochester.rr.com/bshagnasty/twocolumn.html


I've tried the "float: right" approach, but it just ends up looking like
crap. I don't even know what to do with the width, since the left menu is
100-110pt wide while the contents is supposed to fill the rest of the
browser width (no matter what screen resolution you have). Meaning, the
<div> with the id "contents" can't have the width parameter set (neither pt,
em or % will help in this case).

--
Kim André Akerĝ
- (E-Mail Removed)
(remove NOSPAM to contact me directly)


 
Reply With Quote
 
Kim André Akerĝ
Guest
Posts: n/a
 
      06-06-2004
"rf" <(E-Mail Removed)> skrev i melding
news:95dwc.6628$(E-Mail Removed)...
>
> "Kim André Akerĝ" <(E-Mail Removed)> wrote in message
> news:40c091a8$1@proxy....
> > I'm in the process of making my first table-free website, but I've run

> into
> > a problem with the CSS. To be more specific, it has to do with the use

of
> > floating <div>s and other content.
> >
> > Take a look at this page (I've used this page as an example due to the
> > amount of text I've already written for it):
> > http://www.drittmaskin.com/personvern.php
> >
> > Once the text in the contents area passes the left-hand floating menu,

it
> > jumps to the far left, making the page look broken up and all bad.
> >
> > As you can see by the source code, the text itself is contained within a
> > <div> with the id named "contents".

>
> Don't even need to look. Add margin-left: whatever to your #contents rule,
> where whatever is the width of the nav bar div.


The CSS now contains this line:
#contents { display: block; margin-left: 130pt; }

It still isn't quite right. Click the link above again, it should reflect
the changes I just did.

The text starting below the area of the left menu is about 2-3pt to the left
of the above text (in my browser starting with the text "Dine
kontoopplysninger vil bli holdt skjult...").

Now what?

--
Kim André Akerĝ
- (E-Mail Removed)
(remove NOSPAM to contact me directly)


 
Reply With Quote
 
Kathy
Guest
Posts: n/a
 
      06-07-2004
"Beauregard T. Shagnasty" <(E-Mail Removed)> wrote in message
news:8P2wc.52155$(E-Mail Removed)...
> Perhaps this template I made for a friend will help. The colors and
> borders were for illustration.
> http://home.rochester.rr.com/bshagnasty/twocolumn.html


Any workaround for what happens when the window width is narrowed to 700
pixels or less in IE?

http://home.midsouth.rr.com/notmychi...twocolumn1.gif
http://home.midsouth.rr.com/notmychi...twocolumn2.gif

- Kathy


 
Reply With Quote
 
Whitecrest
Guest
Posts: n/a
 
      06-07-2004
In article <8d2xc.980$(E-Mail Removed)>, (E-Mail Removed)
says...
> > http://home.rochester.rr.com/bshagnasty/twocolumn.html

> Any workaround for what happens when the window width is narrowed to 700
> pixels or less in IE?
> http://home.midsouth.rr.com/notmychi...twocolumn1.gif
> http://home.midsouth.rr.com/notmychi...twocolumn2.gif


Nope, fluid (in the minds of many) seems to mean that it just falls
apart at a smaller width than non fluid. I personally see no difference
in having it fall apart at 500px, 700px, 800px, or what ever width.

It should be called "kinda-fluid" design, or "fluid for a while" design
(it also falls apart in mozilla)

--
Whitecrest Entertainment
www.whitecrestent.com
 
Reply With Quote
 
Beauregard T. Shagnasty
Guest
Posts: n/a
 
      06-07-2004
Quoth the raven Kathy:

> Any workaround for what happens when the window width is narrowed to 700
> pixels or less in IE?


Nope, can't say as I do. Works fine until text size gets quite large.
Maybe I'll have a look at it sometime later.

--
-bts
-This space intentionally left blank.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
CSS MENU and CSS photo gallery desjardins.daniel@gmail.com Javascript 1 02-19-2006 06:22 PM
only wanna show Sub Menu of root menu mike ASP .Net 2 11-30-2005 10:50 PM
Horizontal Menu and Sub menu in asp.net 2.0 itzikkl ASP .Net 0 03-27-2005 12:50 PM
Menu and sub-menu in asp.net as windows menus made with vb, delphi, etc..? Vilmar ASP .Net 0 05-27-2004 05:52 PM
Jump Menu (DropDown Menu) in ASP.net. Can someone help me out? Miguel Dias Moura ASP .Net 3 04-03-2004 08:17 AM



Advertisments