Images not floating properly

I’ve been trying to align 3 images next to each other but when the screen resolution changes the images lose alignment.

Also, in internet explorer my second navigation bar looks horribly dis configured as if a lot of the css isnt registering.

I’ve been browsing through tutorials to no avail.

Is there a simple css design principle im overlooking?

Here’s the site:
DArt - Student Page

Any help would be greatly appreciated.

Well, you’ll hear me say this a lot – CSS is only as good as the HTML it’s applied to… so let’s start out looking at your HTML.

First we have a tranny doctype – so you’re in transition from 1997 to 1998? Though I’m seeing the HTML5 shiv – so which is it?

My advice, use a RECOMMENDATION doctype instead of one that’s legacy or one that’s draft – like say HTML 4.01 strict or XHTML. Might not be your code problem, but trying to deploy some silly javascript shiv for a HTML format you aren’t even using… that’s going to confuse matters.

Another bit of advice, axe the jquery bull. There is nothing on that page so far that even warrants the presence of javascript… and as a rule of thumb all jquery does is take a huge steaming dump all over perfectly good page ideas.

You do not have a media type on your style embed, meaning you are sending your screen CSS to all devices. I would suggest adding media=“screen,projection,tv” to that LINK.

The HTML 5 header element has no place in a x1.0 tranny document, and frankly is a wasted extra wrapper. Your “header” jpeg (I really would use .png for that, it might be smaller given the lack of color depth and it wouldn’t suffer from artifacting) is a presentational affectation of text, so IMHO it doesn’t even BELONG in your HTML in the first place – that it has all sorts of page oddities in every browser likely isn’t helping that.

The “arrows” .png is ENTIRELY presentational, so that has NO BUSINESS WHATSOEVER being in the markup. I’m assuming you saved that as jpeg then as .png, given the rather annoying jp block artifacting.

The “navbar” DIV shouldn’t be a div at all – that’s a menu, a menu is a list of choices… LIST? Don’t we have tags for lists?

Your quoteBanner wrapping DIV is ok, and I’d treat that image as content so the IMG tag is fine – but blockquote cannot directly contain inline-level elements or CDATA. That should have two paragraphs inside it. That said, it’s refreshing to see someone actually try to use blockquote and cite on a blockquote and cite… Thumbs up for that! Unfortunately 90% of your ID in that section are completely unneccessary. That’s what I’ve borrowed from Carlin to call “not every ejaculation deserves a name”. You’ve got a perfectly good ID on the DIV, it’s not like you have other IMG or blockquote tags inside that DIV… so what’s with all the ID’s?

#divider on the other hand needs to go. That’s either margin or padding on an EXISTING element’s job.

#photonav is a miserable accessibility /FAIL/ – I assume that’s what the jquery garbage was in there for? You’ve got this wierd non-related/non-nested thing going on with the elements when you really should probably only have one set of anchors, the text and the images… Instead you’ve got the nav anchors separate, empty anchors for christmas only knows what, and image tags with classes on them that shouldn’t really be neccessary.

Then another pointless divider, again doing margin/padding’s job…

The rest of it I really can’t make a whole lot of sense out of since it seems to just be a bunch of images slapped in there any old way, instead of actual content… Whatever it is you’re trying to do there, I suspect (but am not 100% certain) you’re using WAY too many DIV to try and do it.

Going into your vaguely named “style.css”, (I know ‘everybody’ does it, doesn’t make it right!) you’re using the universal reset which pretty well shtups form elements, you’re method of declaring the font on body is a miserable accessibility /FAIL/ since the lack of a style/weight makes the property be ignored in some browsers, the px metric font size means you instantly lose the ability to have dynamic content fonts site-wide, the lack of a metric on the line-height DESPITE the wild claims of it working or being useful breaks horribly more often than not, … and I’m not even past the body tag?

Oh, and back to the HTML side, there is no such thing as a float attribute in HTML… in HTML it’s called “align” – an attribute you have no business using after sometime around 2003 when we kicked nyetscape 4 support to the curb.

Also, I’m not sure the width for your images actually adds up properly to the available width of your layout – of course such design elements pretty well force you into a fixed width layout, one of the three cornerstones of accessibility failures. (the other two being fixed metric fonts and illegible color contrasts).

So, you’re first order of business would be to clean up that HTML… I’m going to show you how I’d approach that using XHTML 1.0 Strict, one of the two most recent RECOMMENDATION ways of building a site. (I prefer it over H4.01 Strict due to the more rigid structural rules).

I’ll only go down to the part that has working images. Word of advice, when building a site I HIGHLY recommend semantically marking up all of your content (or a reasonable facsimile of it) FIRST, before you even THINK layout… then build the layout in CSS – then and only then fire up the goofy paint program to make the graphics you’ll hang on it. That way your content will dictate the layout instead of trying to shoe-horn content into a fixed size image.

So…


<!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"
/>

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

<title>
	DArt - Student Page
</title>

</head><body>

<div id="pageWrapper">
	<h1>
		DART
		<small>
			<span>-</span>
			Digital Arts and Multimedia Design
			<b><b><!-- image replacements --></b></b>
		</small>
	</h1>
	
	<ul id="mainMenu">
		<li><a href="#">About</a></li>
		<li><a href="#">People</a></li>
		<li><a href="#">Portfolio</a></li>
		<li><a href="#">Projects</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
				
	<div id="quoteBanner">
		<img
			src="http://www.sitepoint.com/forums/images/joe.jpg"
			width="225" height="218"
			alt="Joe"
		/>
		<blockquote>
			<p>
				Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
			</p><p>
				<cite>Joe Namath - Student.</cite>
			</p>
		</blockquote>
	</div>
	
	<ul class="groupMenu">
		<li class="faculty">
			<a href="#">
				Faculty
				<img
					src="http://www.sitepoint.com/forums/images/faculty.jpg"
					width="341" height="250"
					alt="Faculty"
				/>
			</a>
		</li>
		<li class="student">
			<a href="#">
				Student
				<img
					src="http://www.sitepoint.com/forums/images/faculty.jpg"
					width="341" height="250"
					alt="Faculty"
				/>
			</a>
		</li>
		<li class="alumni">
			<a href="#">
				Alumni
				<img
					src="http://www.sitepoint.com/forums/images/faculty.jpg"
					width="341" height="250"
					alt="Faculty"
				/>
			</a>
		</li>
	</ul>
	
<!-- #pageWrapper --></div>
	
</body></html>

Is all I’d have for markup for that entire top section. Gimme a bit and I’ll toss together an example CSS to go with that.

Mind you this is pure guessing since you don’t seem to have a logical document structure or complete content for said layout – or any content for that matter. (Images are not real content)

Oh, and your 1023 total width, is not actually 1024 screen friendly – remember the scrollbar and any browser window edges take away from it, which is why it’s usually advisable to allocate 48px for that, dropping the desired width for a 1024 friendly layout to 976px.

Again, NOT that I’d design to a fixed width.

You’re also putting background on HTML, an unreliable element, and using an image for a solid color (?!?)

Here’s what I came up with:

DArt - Student Page

as with all my examples the directory is unlocked for easy access to the bits and pieces:

Index of /for_others/ryanRudolph

Should work in pretty much every browser out there. Took a few artistic librerties with the hover effects on those sections though to reflect the somewhat different markup. Oh, and I fixed the aspect ratio on those images, was driving me batty :smiley:

There is a bug in IE where if all the elements add up to the “perfect width” of the parent container, the last one will sometimes “drop” down to the next line. I added a negative margin to the “alumni” one – this makes browsers think that element is that many pixels narrower without effecting how big it renders on screen… naturally this prevents IE from thinking all the elements add up to the perfect width…

I also shrunk the layout to fit a 1024 screen width… and made some structural changes as to how the images are applied.

Hope this helps – any questions about the how/why fire away.

Still got your arms wrapped around that VT100, eh? This statement is, of course, nonsense. On a site dealing with photography, art, design, fashion, etc., the images are the content, and the text is incidental. News flash: the web has become a visual medium, not a textbook.

Thanks a lot deathshadow60! You’re a savior.

I planned on using unique image headers, hence why the header isnt done in CSS.

A lot of that extra crap in the CSS and Html is from me trying to fix everything by doing anything I can think of. Trying to figure out everything for myself while being oblivious to a lot of the fundamentals of structuring and semantics ended up horribly wrong.

Glad you were here to help.

Thanks again,