Sun, 2004-11-28 09:38
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 
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
Sun, 2004-11-28 16:37
#1
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.
Sun, 2004-11-28 16:46
#2
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
Sun, 2004-11-28 17:20
#3
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.
Mon, 2004-11-29 01:55
#4
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
Thu, 2004-12-02 15:05
#5
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
Thu, 2004-12-02 17:50
#6
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.
Thu, 2004-12-02 18:15
#7
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
Thu, 2004-12-02 19:52
#8
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.
Fri, 2004-12-03 07:55
#9
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
Fri, 2004-12-03 10:53
#10
Need help moving forward
Klaus,
That looks like you've got it, Great stuff 
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.
Sat, 2004-12-04 14:34
#11
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.. 
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
Sat, 2004-12-04 19:19
#12
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.
Sat, 2004-12-04 20:35
#13
more ...
Hi Hugo,
Thanks a lot - got the top and the link colors sorted 
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
Sun, 2004-12-05 15:34
#14
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
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.
Sun, 2004-12-05 17:22
#15
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
Sun, 2004-12-05 17:38
#16
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
Sun, 2004-12-05 23:23
#17
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.
Mon, 2004-12-06 05:42
#18
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
Mon, 2004-12-06 11:01
#19
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.
Mon, 2004-12-06 12:17
#20
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.
Mon, 2004-12-06 14:27
#21
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
Mon, 2004-12-06 16:31
#22
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.
Mon, 2004-12-06 17:11
#23
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
Mon, 2004-12-06 17:39
#24
Need help moving forward
You may be looking for Source Ordered Columns
DE
Mon, 2004-12-06 18:44
#25
Need help moving forward
Thanks David - that was the page I was looking for...
Wonder if it is worth the effort though?!
Cheers
Klaus
Wed, 2004-12-08 06:20
#26
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
Sun, 2004-12-12 04:25
#27
Need help moving forward
bump
Sun, 2004-12-12 13:03
#28
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
Mon, 2004-12-13 06:33
#29
Need help moving forward
Thanks - but in IE it shows up as 3 green bars?
Cheers
Klaus
Mon, 2004-12-13 10:24
#30
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.
Mon, 2004-12-13 13:06
#31
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
Mon, 2004-12-13 20:46
#32
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.
Wed, 2004-12-15 20:39
#33
Need help moving forward
Thanks guys - works perfect
Cheers
Klaus