Am I overcomplicating this css? (comments welcome)

[theEclipse]

http://cliffsideski.com/

First off, does the css for this website stand up to be logical? I have had to resort to using php to change some of the rules for IE.

Second, If you notice the 'footer' (most of which is there for debugging and will be removed) I can't get it to stay put. The top of it is placed at the bottom of the page copy sections (div class=content). This is okay except when the copy is shorter than the menu and then it looks out of place. (see 'contact us' for example). Any thoughts as to how I can get this thing to be at the bottom?

Third, I cant figure out a decent place for the address. Right now it is sitting in the middle of the left bar and it kind of drives me nuts. Is the footer a good place for this? I was trying to make it more visible.

My client is really happy with it....but it feels clunky to me. Yet, the longer I stare at it the less ideas I have about how to fix it.

Thanks for reading.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[traingamer]

Why do you think you have to resort to php for IE? You can always use conditional statements to load a different css file for IE.

One of the problems with your approach (at least while viewing in IE6) is that the screens jump as you are changing pages.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[GUJUm0deL]

The same "jumping" is seen in FF2.0.0.4

In FF, I get a rollover effect for the menu options but not in IE6.




____________________________________
Just Imagine.

http://www.imajinarts.com

 

[ChrisHunt]

Hmmm...

I think - if possible - I'd use single divs to hold each area of the layout (not necessarily in this order):

<div id="header"> ... </div>
<div id="menu"> ... </div>
<div id="content"> ... </div>
<div id="sidebar"> ... </div>
<div id="footer"> ... </div>

Then you can work your CSS positioning magic on these 5 divs to get all the bits where you want them. You might need to wrap a container div around menu, content and sidebar too. Elements that you put inside these divs would then need minimal tweaking of margins etc. You're nearly doing this now, but your main content is a series of div.content elements. Search for tips on three-column CSS layouts, there's plenty of stuff out there. I think you'll find it easier to handle that way.

Otherwise, the only other thing you should change is the way you've marked up the content:

<div class="content">
<span class="header">Ship Your Equipment to us</span>
As a partner with San Juan Hut Systems, Cliffside will receive, unbox, and, if necessary, assemble your bike for $25.  At the end of your trip we disassemble, pack, and ship your bike for $25 plus the cost of shipping (via Fedex).<br /><br />
[Another paragraph might start here...]
</div>

[tt]<span class="header">[/tt]? What's wrong with [tt]<h1>[/tt] (or whatever level header is appropriate)? Two [tt]<br />[/tt]s to separate paragraphs? That's what the [tt]<p>[/tt] element is for. It means less typing too!

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[theEclipse]

I don't get a jumping at all...FF2.0.0.4 or IE6 (didn't check IE7 as its only on the laptop). What do you mean by jumping? What screen size is the browser set at? What O/S? Any ideas about my approach that might lead to jumpyness?

As far as using PHP for the css switching, I find it easier (and more logical) to put all my css rules in one file. This way, no matter what I am doing inside the stylesheet, I always download styles.css.php from the server. I also have had to implement specific rules for safari or opera in the past and (as far as I know) this is impossible to achieve with conditional comments. As of now I don't have any browser version switching (e.g. IE7 vs IE6) but I haven't needed to either. Besides, I am already processing the content through a php template so I figure why not.

It is simple and looks something like this:

<?
header ("Content-Type: text/css");
$browser = $_SERVER['HTTP_USER_AGENT'];
$ieb =  (	(stristr($browser, "MSIE") || stristr($browser, "Internet Explorer")) && (!stristr($browser, "opera"))	);
$opb =  (stristr($browser, "opera"));
$ffb = ( (stristr($browser, "Firefox")) && (!$ieb) );
?>

.    .     .

#advert {
	width:150px;
	position:absolute;
	top:175px;
<?php if ($ieb) { ?>
	top:172px;
<?php } ?>
	left:846px;
	margin:auto;
	text-align:center;
	overflow:hidden;
}

The reason I did the <span class="header"> statements is because a <h*> tag is not valid inside a <p>, <div>, or any other container. I have also had validation errors putting a <p> inside a <div>. Then, I am unable to get the content to have a border that includes the header.

The reason for the class="content" vs id="content" is simply because in the past (on other websites) I have needed more than one content 'module' to fit in the center. Its probably not necessary on this website -- I guess I probably did it that way out of habit.

Any ideas about how to get the copyright text to stay put at the bottom of the layout?

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[ChrisHunt]

a <h*> tag is not valid inside a <p>, <div>, or any other container

Not true. You can put <h*>, <p> and whatever other block level tags you like inside a <div>.

You do have some pages with multiple "modules", but I'd still use a single div to apply your positioning markup to. I'd mark up your content area like this:

<div id="content">
  <div class="module">
    <h2>Module Heading</h2>
    <p>Blah blah blah.</p>
    <p>Yak yak yak.</p>
  </div>

  <div class="module">
    <h2>Another Module Heading</h2>
    <p>Yadda yadda yadda.</p>
  </div>
</div>

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

 

[traingamer]

What do you mean by jumping?

In IE6, it looks like the page is being painted, then the margins go away. It is noticeable on each page change. It may (or may not) be related to the css being served up as a php file each time a page is requested.

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill

 

[theEclipse]

Thanks friends.

As for the page jumping, I don't think that the php filter on the stylesheet is why. I think that it is actually because the server that it is on is slow (not my server choice).

Chris - maybe I am thinking that you cant put a <h*> inside of a <p>. I'll have a look at how things work if I rearrange things a bit.

Thanks again for the input.

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[audiopro]

The jumping you are experiencing may be caused by the top picture (width 1024px) which is making the page too wide and forcing the horizontal scroll bar. The address is a very important item on your particular site and could go in the sky. I do not have Flash installed on my dev machine so I get a 'download Flash' request on each page rather than a fancy graphic.

Keith

http://www.studiosoft.co.uk

 

[traingamer]

The jumping you are experiencing may be caused by the top picture (width 1024px) which is making the page too wide and forcing the horizontal scroll bar.

That's not it. The monitor is plenty wide and does not get a horizontal scrollbar. It may be related to the slow server speed, but probably is also related to the fact that the css file seems to be generated and downloaded for each page rather than using a common cached css file (downloaded once).

Greg
"Personally, I am always ready to learn, although I do not always like being taught." - Winston Churchill