33 replies [Last post]
klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Hi all,

I am not new to css as such - but I am new to getting rid of tables and facing some problems what I have not found a good solution for yet - hope you can help.

Problems:
1. The 3 columns (left nav, right nav and center) are suppose to be 100% height - yet they stop at various heights. I have tried setting body, html {height:100%}; but no joy...

2. The middle bit (where all the content eventually will be paced) is NOT pushing down the footer - it places above it.

3. I am using float left and float right for the two nav's but is that the best way forward - at least I think I should use top: auto; for the 3 (left, middle, right) ?

4. On the left hand side I have a list of countries - I need the to be in two columns - I tried:

#cleft {float:left; width:50%; margin-right:0px; padding-bottom:0px;}

and make the first <ul> set in a <div id="cleft"> - and it almost works - bit it places the second batch of countries with bullets in front of the names..

To make matters worse - the page looks slightly different in Opera, Firefox and IE Crying

Really appreciate your help in this - my goal is to rewrite the entire site in xhtml (not tables) and using css only for markup. My ambition is also to list story content at the very top of the HTML code and all the navigation at the very end.

Is the site layout possible - not using tables at all?

Cheers
Klaus

sbd
sbd's picture
Offline
Regular
New Harbor, Maine
Last seen: 17 years 40 weeks ago
New Harbor, Maine
Joined: 2004-10-30
Posts: 17
Points: 0

Need help moving forward

The site "looks" OK in FF.

But you have no DOCTYPE declaration and proper validation is impossible.

I'd try to get the site to validate first at http://validator.w3.org/

Then the tables can be replaced by CSS.

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Thanks - but I really need advise on the css bit on the test page - the generic site is ok'ish - but just to show what I want it to look like.

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
It's very hard to offer accurate help and advise when the pages are rendering in Quirks mode, your asking questions related to why certain CSS properties are not working and your layouts not right which is why
SBD advised that you try to validate the page; but first put a full dtd in the document then validate and clear up any little errors, then you can be safe in moving forward with the CSS and of knowing that the CSS specs are being followed by compliant browsers this will aid you then in gaining help here that is accurate.

Check out the "how to" section for further info on stuff like standards.

To answer your last question, yes all layouts are basically possible but it's sometimes a matter of loosing the "table layout mindset" and thinking in terms of pure semantic markup and CSS.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Hugo and SBD,

Thanks both - but I do in fact have that DOC Declaration in the test page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

yes it does not validate 100% - so I'll try to fix that up first - but is there anything else I need to do or?

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

validated now

hi again all,

I have now got my page to validate:

- any suggestions with regards to:

1. The 3 columns (left nav, right nav and center) are suppose to be 100% height - yet they stop at various heights. I have tried setting body, html {height:100%}; but no joy...

2. The middle bit (where all the content eventually will be paced) is NOT pushing down the footer - it places above it.

3. I am using float left and float right for the two nav's but is that the best way forward - at least I think I should use top: auto; for the 3 (left, middle, right) ?

4. On the left hand side I have a list of countries - I need the to be in two columns - I tried:

#cleft {float:left; width:50%; margin-right:0px; padding-bottom:0px;}

and make the first <ul> set in a <div id="cleft"> - and it almost works - bit it places the second batch of countries with bullets in front of the names..

Any suggestions with regards to my css codes?

Thanks in advance

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
Try removing the position absolute from the #contents div and any top/left positioning, leave the float left.

For the height try:

html, body{height:100%;}

the #content will now be 100% of the viewport height .

You will need to employ the "Faux Columns" technique to achieve the effect of equal height columns.

There's a lot of information in the "How To" section that you will find is relevant to your layout, give them a read, especially the post on floats.

Post back if you run into further difficulties.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

strange

Thanks Hugo,

Something strange happend - on FF and Opera the bachground color on the left nav becomes black half way down - but it is ok on IE? (well still not 100% but not black background either)

Any ideas?

Chers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
what your seeing is the natural end of the nav column, remember that it's length is dictated to by it's content, height 100% is only ever 100% of the visable screen.
The black is the background , this is why I pointed you to the "Faux column" link as it explains how to set repeating images the same as the column in order to achieve the look that the column flows to the bottom; but to achieve this you may have to set a wrapper div around all the others, give the Faux column a read , see what you make of it.
Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hugo,

Thanks - almost got it now.. - :?

With the new CSS I have in place I now face massive problems controling link colors etc in various Div's

Both me css and my xhtml validates - is there something you can spot that conflicts?

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
That looks like you've got it, Great stuff Smile

With the links the only problems I can see are perhaps the
.right set of rules if you are using multiple selectors you need to write them out in full each time i.e

.right a, .right a:link, .right a:visited{}

rather than .right a, a:link, a:visited{}
this will give control on that link "Top 25 Business"

looking at those declarations ( rather rushed I'm afraid) it occurs to me that you are probably over declaring the anchor rules and that you should just make an initial set of anchor declarations to cover all then use classes to target any you need to different from the main declarations.
let us know if there were other problems you are having with your anchors that I didn't spot.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Still problems

Hi Hugo,

Thanks for your help, yes it is getting much better (now it looks the same on IE, FF and Opera) - I re-wrote the code from the beginning to reduce it as much as possible but still having some issues:

1. I want to highlight a few special links and use:
.hlg {color: #3c0000; text-decoration: underline;}
.hlru {color: #9c0000; text-decoration: underline;}
.hlr {color: #9c0000;}

and in the code I use <a href ="http://" class="hlg">anchor text</a>

But it is being ignored by all browsers.. Sad

2. I want to align date and HOME | E-mail etc on the same line - HOME | ... aligned left and Date aligned right on the same line - any ideas?

3. In IE the countries on the lower left-hand navigation have a bullet in front of them (only the countries in the right column) - any suggestions as to how I can get rid of them?

4. are all these needed each time I declare:

a:link
a:visited
a:active

or is it enough with link and visited?

Thanks for your help...

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,

For the class links write them like this:

a.hlg (no space)

The top line will need something like a float on the .topnav class ul as at the moment it is spanning the full width of the div hence the date dropping down; try:

ul.topnav{float:left; width:160px;}

They should be both on the same line now, you will need to sort out the positioning of the line graphic though.

You don't have to declare the :active rule, just remember to declare the ones you do use in the right order

link
visited
hover
active

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

more ...

Hi Hugo,

Thanks a lot - got the top and the link colors sorted Wink

Now two issues:

1. The bullets visible in IE ont he left hand lower side before countires - how do I kill them?

2. I inserted a picture with a Caption - looks fine on IE - but does not work on FF or Opera - any suggestions?

Sorry for being such a pain..

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
It's no pain , at least you are trying which goes a long way.

For the bullets try something along the lines of :

ul.cleft{list-style-type:none;} //removes bullets from class .cleft
or;

ul.nav{list-style-type:none}// removes bullets from all ul nav elements.

You may need to play around with the selector order.

Klaus with the float, check the rule for the class .figure Wink

You still have a problem with the graphic horizontal rule at the top of the page, in Firefox it lies behind the floated date etc, as it should. You will either need to apply the "clearfix" ( found on this board) solution to the div holding it all or maybe close the div after the floats and open a new div after for the image so it sits bellow.

A question are you checking your work in IE first ? if so you really should check in FF first then the problems that arise can be dealt with rather than working with the false sense of security that IE gives, remember that IE will incorrectly expand a div around floats.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Hugo,

Appreciate your help - not easy to write code that looks the way you want on all browsers and that validates...

Anyway, got the bullets removed thanks!

I have attched a screenshot of what I see in Firefox for Mac - the entire right-hand navigation is moving 1pixel to the right and into the background for some reason?

I changed the date to <p> instead and closed it - did that do the trick? I can quite see what you mention in Firefox. I actually want the graphics to be below the date..

As for the picture - I am afraid I did not get the "check the rule for the class .figure" - When I set the width then the trouble starts - I guess I need to identify the width of the image somehow or?

I use IE and Firefox as primary tests.

Looking forward to your comments..

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Hugo,

I got the picture sorted - just need to figure out how to determine the width of the image I think? ie It looks fine now as I know the width and have fixed it in css to 260px - but in real life the width will change - so how do I work around that?

Any ideas please...

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
I'm not sure what your doing now, things seem to be getting a little confused

The problem with the image was an error in the selector you had two classes together you only needed to space them so I'm not sure why you have changed things but it seems to be ok .

When you say you have enclosed the date in a <p> all I suggested was that you needed to float the left hand links which should have sorted out the problem.
To get the graphic under that line as I said before try closing the div after the date element and putting the graphic in a new div after it
in the flow or try using the "clearfix" solution found on this forum.

I'm not sure what you mean by "finding the width of the image"
that sounds like it may be a Javascript problem or PHP

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Hugo,

Sorry for the confusion - just felt this worked better for me - except for Opera ?!

What I mean by "finding the width of the image" - if you see the page as it is now and I then insert a picture with half the width for example then the frame/placeholder will remain the 260px as stated in the CSS - I would need that number to be auto-image-width somehow - any suggestions?

I tried fixing the top - not sure it worked though as I can't see the problem on my machine - please advise..

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,

In the CSS add this rule

.clearfix:after{display:block; 
	   content: "."; 
	   height:0; 
	   clear:both; 
	   visibility:hidden; 
	  }


then add the class "clearfix" to the html as per this example

<div class="clearfix"> 
<ul class="topnav">


This will move the logo and tagline and bevel below the date line.

The div width problem I'm not sure of a solution to, other than to Re-iterate that you may need to look to PHP or javascript for that.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

roytheboy
roytheboy's picture
Offline
Guru
North Wales, UK
Last seen: 9 years 2 weeks ago
North Wales, UK
Timezone: GMT+1
Joined: 2004-09-18
Posts: 2233
Points: 41

Need help moving forward

This is how to set a div width to an image width using PHP:

$size = getimagesize("images/".$image);
echo "<div class=\"pic-wrap\" style=\"width: {$size[0]}px;\">\n";

If this is all double-dutch to you then you need to look for another solution as this will only work if you are using php to output your pages.

Life's a b*tch and then you die!

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Hugo,

used the clearfix - all looks the same to me - can you confirm that it worked?

roytheboy:
Thanks - I use Perl - guess I need to find a perl solution or a JavaScript - anyone with a JS solution?

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
That looks fine now in FF.
But can you explain what you mean by "all seems the same" if you checked in FF before the fix was applied did the bevel not appear out of place and with the fix applied does it not drop bellow ?

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Hugo,

No on my Firefox on Win XP it looked fine both before and after clearfix.. - but good it works for you now as well!?

I still have a problem with the picture on Opera - it is being pushed into the right hand nav area for some reason. It looks fine on IE and FF though..

Few more questions:

1. Can I reduce the css code I have now and still get the same result - (I like to have the minimum code)

2. I read somewhere that it is possible to have ex. the Story content listed first in the code and have all the navigation at the end of the code and still maintain the same layout (ie now my right navigation comes before the actual page content in the source)

But I just can't find the place again - have you heard about it and do you think it makes a difference at all? (probably Google likes it better)

Any other suggestions to make what I ahev now better? I intend to rewrite the entire site to validated xhmtl - so I really want to the get the elements top, left, right, footer right before moving on as the rest is relatively trivial.

Cheers
Klaus

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

Need help moving forward

You may be looking for Source Ordered Columns

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Thanks David - that was the page I was looking for...

Wonder if it is worth the effort though?!

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Hi Guys,

Please see attached - any suggestions as to make it look right in FF and Opera - looks fine in IE6

Cheers
Klaus

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

bump Wink

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

Need help moving forward

Try

<div style="position:relative;float: left;margin-top: 8px; width: 115px; border: #636363 1px solid; line-height:1em;">
 <div style="float: right; padding:0; margin: 0 0 0 1em;width:3em; font-size: .5em;">30.0%</div>
 <div style="position:absolute;top:50%;left:2px;margin-top:-5px;width: 65%; border: #636363 1px solid; padding: 1px;height:6px;" >
  <div style="height:6px; width:30.0%; float:left; color:white; background: url(http://www.ameinfo.com/images/bar_green.gif);"  title="You are using 15.01 MB (30.0%) of 50.00 MB">
  </div>
 </div>
</div>
This uses absolute positioning for the "thermometer" div so that it is always vertically positioned in the center of the parent div.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Thanks - but in IE it shows up as 3 green bars?

Cheers
Klaus

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

Klaus,
Try this slight variation on David's code;

<div style=" position:absolute;height:6px; width:30.0%; color:white; background:url(http://www.ameinfo.com/images/bar_green.gif) repeat-x;"  title="You are using 15.01 MB  
 (30.0%) of 50.00 MB">


Position absolute to contain the img div and repeat-x to stop the image repeating vertically.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

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

Need help moving forward

Thanks Hugo - it was a quickie using the EditCSS function in FireFox so I didn't check it in Internet Exploder.

Klaus - you mighty consider dropping the .0 - it takes up extra space and overlaps with a modest increase in font size and is not really useful precision.

I've appended a version that would allow you set the thermometer width and the "tool tip" with a simple variable substitution. There are some minor IE fiixups in the code - you would need to dial in the font-sizing to your taste. Note how the HTML part of the code is simplified and the thermometer implemented as three classes - one for the outer border, one for the inner thermometer frame, and one for the image. Because the image is specified in an image tag, there is additional possibilites of having other images served up for "amber" and "red" levels of disk space use.

Little things like this are fun and can teach you a lot.

DE

David Elliott

Before you ask
LearnXHTML|CSS
ValidateHTML|CSS

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 30 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Need help moving forward

I was posting at a rush and it was just a quick fix but felt it wasn't best solution.
That's a much better version you have written there.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

klaus
Offline
Enthusiast
Last seen: 17 years 36 weeks ago
Joined: 2004-11-28
Posts: 67
Points: 0

Need help moving forward

Thanks guys - works perfect Wink

Cheers
Klaus