473,327 Members | 2,069 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,327 software developers and data experts.

CSS formatted links not working

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
Jun 27 '08 #1
8 1454
On May 22, 9:15*pm, mehstg1319 <meh...@gmail.comwrote:
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
Jun 27 '08 #2
In article
<2a**********************************@r66g2000hsg. googlegroups.com>,
mehstg1319 <me****@gmail.comwrote:
http://www.fuzzcube.com/leftLinkInclude.php
Care to comment on why you are marking up like this?

--
dorayme
Jun 27 '08 #3
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
Jun 27 '08 #4

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
Jun 27 '08 #5
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)
Jun 27 '08 #6
On May 23, 12:48*am, Jim Moe <jmm-list.AXSPA...@sohnen-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
Jun 27 '08 #7

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.com/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
Jun 27 '08 #8
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.com/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
Jun 27 '08 #9

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

5
by: Richard | last post by:
I am filling a TEXTAREA with text and links from a database. I need to display the <a href....> code in the TEXTAREA as a clickable link with _blank targetting. I realise I could simply use a TD...
5
by: D. Alvarado | last post by:
Hello, DOes anyone have a recommendation for some free code to send out HTML-formatted emails? The code does not have to be cross-browser compatible. Thanks for any advice, - Dave
7
by: Jonas Smithson | last post by:
Hello all, I have an absolute positioned parent div, and nested inside it is an absolute positioned child div -- I mean the div *code* is nested inside, but the child is physically positioned so...
4
by: frogman042 | last post by:
My daughter is playing around trying to learn JavaScript and she wrote a small program that prints out a message in increasing and decreasing font size and color changes. She is using document...
2
by: Steven T. Hatton | last post by:
I'm still not completely sure what's going on with C++ I/O regarding the extractors and inserters. The following document seems a bit inconsistent:...
3
by: Clint MacDonald | last post by:
Hello, I am trying to create a small application that creates labels and I have purchased a thermal transfer label printer. Now I need to be able to print the formatted label to the printer...
3
by: Aaron Gray | last post by:
I need to print formatted decimal numbers to a set number of decimal places. Is there a way to do this with JavaScript ? If not is there any existing/"library" functions to do this ? Many...
3
by: Chris F.A. Johnson | last post by:
On 2008-05-25, mehstg1319 wrote: .... What if my window is less than 500px high? Like many people, I find having to scroll sections of a page annoying, but you can do it with: overflow:...
1
by: robnoper | last post by:
XP SP2, access and outlook 2003 I have a form with 3 command buttons on that when one is pressed it opens up a html email for the user to send. Two of the emails work fine and open with the full...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.