CSS formatted links not working

[mehstg1319]

Hi there

Am doing some work on a page at the moment, a bit of a newbie at the
moment with CSS and am having a few troubles.

The left hand navigation does not seem to work when a gap is inserted
in the space between it and the body text. I could not get left margin
or left padding to work. So in the end, I positioned the bodytxt div
as relative and put left:10px; in to give a 10px gap. When this gap is
removed, the left nav works fine, but for some reason it will not work
with the space.

Here is the link to the page:
www.fuzzcube.com

for what it is worth, the left nav is built up using a SSI include,
the target for the link page is:
www.fuzzcube.com/leftlinkinclude.php

Thanks in advance
Paul

[mehstg1319]

On May 22, 9:15*pm, mehstg1319 <meh...@gmail.c omwrote:

Hi there

Am doing some work on a page at the moment, a bit of a newbie at the
moment with CSS and am having a few troubles.

The left hand navigation does not seem to work when a gap is inserted
in the space between it and the body text. I could not get left margin
or left padding to work. So in the end, I positioned the bodytxt div
as relative and put left:10px; in to give a 10px gap. When this gap is
removed, the left nav works fine, but for some reason it will not work
with the space.

Here is the link to the page:www.fuzzcube.com

for what it is worth, the left nav is built up using a SSI include,
the target for the link page is:www.fuzzcube.com/leftlinkinclude.php

Thanks in advance

Paul

sorry got the link wrong:

http://www.fuzzcube.com/leftLinkInclude.php

[dorayme]

In article
<2a************ *************** *******@r66g200 0hsg.googlegrou ps.com>,
mehstg1319 <me****@gmail.c omwrote:

http://www.fuzzcube.com/leftLinkInclude.php

Care to comment on why you are marking up like this?

--
dorayme

[Jonathan N. Little]

mehstg1319 wrote:

Hi there

Am doing some work on a page at the moment, a bit of a newbie at the
moment with CSS and am having a few troubles.

The left hand navigation does not seem to work when a gap is inserted
in the space between it and the body text. I could not get left margin
or left padding to work. So in the end, I positioned the bodytxt div
as relative and put left:10px; in to give a 10px gap. When this gap is
removed, the left nav works fine, but for some reason it will not work
with the space.

Here is the link to the page:
www.fuzzcube.com

for what it is worth, the left nav is built up using a SSI include,
the target for the link page is:
www.fuzzcube.com/leftlinkinclude.php

Thanks in advance

Use Firefox with WebDeveloper's Bar, set to "Outline Current Element"
and hover you cursor over your links and see what div#bodytxt
covers...hint, your menu won't work that way..

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Bergamot]

mehstg1319 wrote:

>
The left hand navigation does not seem to work when a gap is inserted
in the space between it and the body text. I could not get left margin
or left padding to work. So in the end, I positioned the bodytxt div
as relative and put left:10px; in to give a 10px gap.

www.fuzzcube.com

I had to read this several times to figure out what this "gap" thing is
supposed to be. I see no text in the page to illustrate the problem,
probably due to the absolute height values coupled with overflow:hidden .
Hint: try looking at the page in a narrower window, like around 800px.

I'm going to take a shot in the dark anyway. You want a 10px space
between the left column and the text in the main content area. Yes? If
so, then you're not understanding how floats work, or more specifically,
how other elements flow around them.

If you don't already have it, get the Web Developer extension for
Firefox, then turn on outlines for block elements. You'll see that the
left edge of the #bodytxt block is not at the right edge of #left-nav
like you probably thought. Set margin-left of #bodytxt to 10px more than
the width of #left-nav and drop the left:10px. The width setting should
now be unnecessary, as #bodytxt will now take all the available space.

for what it is worth, the left nav is built up using a SSI include

That should be irrelevant.

--
Berg

[Jim Moe]

On 05/22/08 01:15 pm, mehstg1319 wrote:

>
Am doing some work on a page at the moment, a bit of a newbie at the
moment with CSS and am having a few troubles.

The left hand navigation does not seem to work when a gap is inserted
in the space between it and the body text. I could not get left margin
or left padding to work. So in the end, I positioned the bodytxt div
as relative and put left:10px; in to give a 10px gap. When this gap is
removed, the left nav works fine, but for some reason it will not work
with the space.

The positioning moved the bodytxt div over the menu blocking access to
the menu.
Here is a method for a 3 column layout that has the left and right
columns at a fixed size:
- Float the left column left
- Float the right column right
- Set the center column (your #content) with a left margin large enough
for the left column, and a right margin large enough for the right column.

Get rid of all of the positioning CSS rules.
Get rid of the overflow rules.
Get rid of the height rules (except for images).
You will have to change #bodytxt to .bodytxt so that you can insert the
right column <divin between two bodytxt blocks (one for the heading,
which should be an h1, the other for the body text).

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

[mehstg1319]

On May 23, 12:48*am, Jim Moe <jmm-list.AXSPA...@s ohnen-moe.comwrote:

On 05/22/08 01:15 pm, mehstg1319 wrote:

Am doing some work on a page at the moment, a bit of a newbie at the
moment with CSS and am having a few troubles.

The left hand navigation does not seem to work when a gap is inserted
in the space between it and the body text. I could not get left margin
or left padding to work. So in the end, I positioned the bodytxt div
as relative and put left:10px; in to give a 10px gap. When this gap is
removed, the left nav works fine, but for some reason it will not work
with the space.

* The positioning moved the bodytxt div over the menu blocking access to
the menu.
* Here is a method for a 3 column layout that has the left and right
columns at a fixed size:
- Float the left column left
- Float the right column right
- Set the center column (your #content) with a left margin large enough
for the left column, and a right margin large enough for the right column.

* Get rid of all of the positioning CSS rules.
* Get rid of the overflow rules.
* Get rid of the height rules (except for images).
* You will have to change #bodytxt to .bodytxt so that you can insert the
right column <divin between two bodytxt blocks (one for the heading,
which should be an h1, the other for the body text).

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

Have almost got it working now, seems to break in Safari and Opera now
though (Mac versions, i'm not sure about windows.)
Paul

[Bergamot]

mehstg1319 wrote:

>
Have almost got it working now, seems to break in Safari and Opera now

re: http://www.fuzzcube.com/

You need to get rid of the fixed heights. What do you expect to happen
when there is more text than will fit in height:500px? All you have to
do is bump up the text size a couple times and it all spills out.

You also don't need to make a separate div for every image, or use empty
paragraphs to space things out. Make use of margin, padding and
background images better and you can get rid of a lot of bloat.

Use the cube image as a background for the left column, move some of
those styles to other elements and trim the HTML.

#left-nav {
background: #ff0 url(../img/cube.jpg) center top no-repeat;
padding-top: 180px; /* img height + some padding */
}
#left-nav ul {
border-top: 1px solid #fff;
}

<div id="left-nav">
<ul><li><a href="http://www.fuzzcube.co m/index.php?id=1" >Home </a></li>
....
</ul>
</div>

Likewise, use the silhouette as a background image for the #bodytxt
area. Apply padding right to keep the text clear of the image. No need
for an empty div for this.

--
Berg

[mehstg1319]

On May 23, 7:45*pm, Bergamot <berga...@visi. comwrote:

mehstg1319 wrote:

Have almost got it working now, seems to break in Safari and Opera now

re:http://www.fuzzcube.com/

You need to get rid of the fixed heights. What do you expect to happen
when there is more text than will fit in height:500px? All you have to
do is bump up the text size a couple times and it all spills out.

You also don't need to make a separate div for every image, or use empty
paragraphs to space things out. Make use of margin, padding and
background images better and you can get rid of a lot of bloat.

Use the cube image as a background for the left column, move some of
those styles to other elements and trim the HTML.

#left-nav {
background: #ff0 url(../img/cube.jpg) center top no-repeat;
padding-top: 180px; /* img height + some padding */}

#left-nav ul {
border-top: 1px solid #fff;

}

<div id="left-nav">
<ul><li><a href="http://www.fuzzcube.co m/index.php?id=1" >Home </a></li>
...
</ul>
</div>

Likewise, use the silhouette as a background image for the #bodytxt
area. Apply padding right to keep the text clear of the image. No need
for an empty div for this.

--
Berg

Berg

Right, cut as much of the cr*p code out as much as I can (correct me
if I have missed any).

I don't really want to remove the height of the content pane (white
box) as the whole design of the site is that it all sits in that box
in the centre. If anything, I would want the overflow on the bodytext
div to scroll if necessary.

If there any way of doing this it would be great, if not, back to the
drawing board!!

Also, now I have removed the heights, the right image and bgcolour of
the left nav do not fill the whole content pane anymore. Any ideas on
how to fix this?

Cheers

Paul