Positioning "bug"

My final render:
http://www.twofast.ca/index2.php

My css file:
http://www.twofast.ca/template/style.css
(note: the color palette is not final)

I nearly fixed everything in my stylesheet, but I still got an issue, with my “cfloat” div:

Here is what I want:
HHHHHHHH
cccccccc
cccccxxc
cccccxxc
cccccccc
FFFFFFFF

Here is what I have:
HHHHHHHH
cccccccc
cccccxxc
____xx
FFFFFFFF

Frankly, is it only me or CSS is not the most intuitive thing to learn and/or play with it?

Thanks.

It’s my first post here, someone recommended me this forum for all my CSS needs! :smiley:

… and here it is with CSS. I also remastered the images to take less space by getting rid of all that pesky alpha transparency… and I messed with the styling just a hair, partly for compatibility and partly for simplicity.

As with all my examples the directory:
http://www.cutcodedown.com/for_others/Leko

is unlocked so you can get at the bits and pieces.

Valid XHTML 1.0 Strict, would be valid CSS 2.1 if not for the one behavior to fix IE’s hovers, apart from that not wasting any time on javascript. Tested working 100% in IE 6, 7 & 8, Opera 9.6 and 10.6, FF 2 & 3, and the latest flavors each of Safari and Chrome. Also tested 95% working in IE5, the only bug being extra padding on the left of the dropdown menu; Big deal, it still works which is about as much effort as I put into 5 these days.

As mentioned I stripped ALL the alpha transparency off the .pngs reducing the filesizes 50% or more, and recombined a few of things you had as separate images to a single file which makes it a bit easier to maintain.

Among the features is proper graceful degradation CSS off and “images off/CSS on”.

Something else just plunked it’s tuchas down on my desk, and I’ve got to give it priority, but when I’m done with that I’ll give you a section-by-section explanation of the markup and the CSS so that you can read through and learn from the choices I made. Hopefully by showing you how it’s done and explaining the CSS in question, you’ll come away being able to “think CSS” with less hassles.

Ooph that’s got problems. Javascript doing CSS’ job, javascript to replicate something that was deprecated in STRICT for a REASON (target) so you shouldn’t even be doing it, horribly small fixed width, four or five times as many DIV as should be used, definition list abuse for lord only knows what, MULTIPLE definition lists for what should be a single UL, clearing DIV like it was a decade ago, paragraphs around non-paragraph elements, non-breaking spaces doing padding’s job…which is how you ended up with 1k of excess markup. A full quarter of what you have should go on the floor.

The markup should be something more like this:


<!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"
	lang="en"
	xml:lang="en"
><head>

<meta
	http-equiv="Content-Type"
	content="text/html; charset=utf-8"
/>

<meta
	http-equiv="Content-Language"
	content="en"
/>

<meta
	name="description"
	content="Atelier de m&#233;canique g&#233;n&#233;rale et sp&#233;cialis&#233;e."
/>

<link
	rel="shortcut icon"
	href="./template/favicon.ico" type="image/x-icon"
/>


<link
	type="text/css"
	rel="stylesheet"
	href="screen.css"
	media="screen,projection,tv"
/>

<title>
	Twofast Performance
</title>

</head><body>

<div id="pageWrapper">

	<h1>
		TwoFast <span>Performance</span>
		<b><!-- image replacement --></b>
	</h1>

	<ul id="menu">
		<li>
			Services>>
			<ul>
				<li><a href="?content=atelier">Atelier de m&#233;canique</a></li>
				<li><a href="?content=formation">Formation</a></li>
			</ul>
		</li><li>
			<a href="?content=fournisseurs" title="">Fournisseurs</a>
		</li><li>
			<a href="forum/" title="">Forum</a>
		</li><li>
			<a href="?content=contact" title="">Contactez-nous</a>
		</li>
	</ul>

	<div id="content">
		{CONTENT_CONTENT}
	<!-- #content --></div>

	<div id="sideBar">
		<h2>Nouveaut&eacute;s sur le forum:</h2>
		<ul class="latestPosts">
			<li>
				2010-07-24 21:00
				<a href="/forum/viewtopic.php?t=33&amp;p=142#p142">DanielDub&#233; wrx spec r1</a>
			</li><li>
				2010-07-14 13:24
				<a href="/forum/viewtopic.php?t=30&amp;p=104#p104">Protune</a>
			</li><li>
				2010-07-08 20:28
				<a href="/forum/viewtopic.php?t=29&amp;p=92#p92">Traitement de pare brise AQUAPEL</a>
			</li><li>
				2010-07-08 20:19
				<a href="/forum/viewtopic.php?t=28&amp;p=91#p91">Hella Supertone</a>
			</li><li>
				2010-07-08 20:09
				<a href="/forum/viewtopic.php?t=27&amp;p=90#p90">LONG/STUD/ARP</a>
			</li><li>
		</ul>
	<!-- #sideBar --></div>

	<div id="footer">
		<ul>
			<li>
				<a href="http://www.subaru.ca/">
					<img src="template/subaru_logo.png" alt="Subaru" />
				</a>
			</li><li>
				<a href="http://www.mazda.ca/">
					<img src="template/mazda_logo.png" alt="Mazda" />
				</a>
			</li><li>
				<a href="http://www.perrinperformance.com/">
					<img src="template/perrin_logo.png" alt="Perrin" />
				</a>
			</li><li>
				<a href="http://www.motul-canada.com/">
					<img src="template/motul_logo.png" alt="MOTUL" />
				</a>
			</li><li>
				<a href="http://www.cobbtuning.com/">
					<img src="template/cobb_logo.png" alt="COBB Tuning" />
				</a>
			</li><li>
				<a href="http://www.napaautocare.com/">
					<img src="template/napa_logo.png" alt="NAPA AutoCare" />
				</a>
			</li>
		</ul>
	<!-- #footer --></div>

<!-- #pageWrapper --></div>

</body></html>

If I have time later I’ll toss together the CSS to show you how to approach that… In a ‘look ma, no javascript’ version. (unless you count a .htc for IE6/earlier) and maybe give you a line-by-line breakdown of the how/why.

In a lot of ways doing CSS is learning about what markup to use, and what markup NOT to use. Not everything needs a div slapped around it, and if you’ve got more tags than you do content, you’ve probably over-thought the solution.

It actually makes creating the HTML WAY simpler, once you get a handle on it. Case in point the above markup took me maybe two minutes, and is +/- 1% away from what it will be once I write the CSS to go with it.

George Carlin used to joke about birth control with “Not every ejaculation deserves a name” – in that vein, not every element needs a className… or a DIV around it, or a separate element for clearing after it, etc, etc…

It also gets simpler if you start using classes and ID’s that say what things are and NOT how they are going to appear. “cFloat” is a perfect example of this; It’s a sidebar, or a column… so use a meaningful name on it since ‘cFloat’ is not only appearance (at which point you might as well go back to using HTML 3.2) it doesn’t tell us a whole lot about what it’s wrapping AROUND. Same goes for “wrapper”, “hvoid” or “smenu1”

It’s only as complex as you make it – and there’s a lot of ways to make it clearer and simpler. FORMATTING for example using TABS. :wink:

8O Wow, awesome! I didn’t expected that much!!

Lord!!! By the way, I have to rewrite most of the code, for the moment, I was mainly focusing on the “template”. I know the “latest forum post” and “menu” needs a complete rewrite.

And I’ll make sure, I’ll use xhtml/css correctly. Thanks a lot!

Hi,

Welcome to Sitepoint :slight_smile:

I wasn’t exactly sure what I was looking for as it didn’t seem to match what you were saying above. Either you’ve fixed it by now or I’m looking in the wrong place :slight_smile:

If the issue is with floats snagging when they wrap then make sure that they clear the element above (clear:both).

If you still have an issue then point me in the right direction and I’ll take another look.