[thelist] CSS & DIV rendering trouble

[Emma Jane Hogbin]

On Mon, Mar 03, 2003 at 08:38:57PM -0500, burgan at iprimus.com.au wrote:
> I've not got this far - http://www.greaterthani.com/test/index.html
> The css file linked to this document is at
> -http://www.greaterthani.com/test/inc/style.css

Neat design. :)

Unfortunately this appears to me to be a classic case of Dreamweaver
pointy-clicky without an understanding of the mechanics behind...

I'm not entirely sure why you have the hr elements on the page. Based on
your position values it looks like you're trying to create decoration
lines around your content. I would recommend using borders for this
instead of hrs.

You have three main stripes of content:
	titlebar
	logo (and photobar)
	menubar

Right now you have a very thin stripe of white between the logo stripe and
the stripes that sandwhich it. I think you're trying to colour in these
stripes, but I'm not entirely sure. I acutally really like them as white
stripes! However, if you wanted to change the colour of the stripes this
is how I would do it:
	a) remove all positioning for .titlebar, .menubar and .logo. Divs
	will automagically create new lines. Remove top and left
	properties as well.

	b) put these two pictures into the .logo div, in this order.
	<img src="pics/logo.gif" alt="greater than i" width="146" height="81">
	<img src="pics/phot1.jpg" alt="" name="phimg" width="700" height="110" border="0" id="phimg">

	bi) crop the photo down. We only want the people in there
	bii) adjust the attribute for width post-cropping
	biii) put a valid alt in for all your images
	biv) do NOT change any other attributes, just copy and paste them over.
	We're going to use them later.

	c) make sure the divs are tight against each other by removing the
	margins.
		margin: 0;

	d) add a border to the logo bar which will appear between
	titlebar/logo and logo/menubar, add the background colour back in
	to compensate for the cropped image of the people:
		.logo {
			border-top: 1px solid gray;
			border-bottom: 1px solid #666;
			background: #ccc;
		}

	e) fix the positioning of your images in the .logo bar:
		.logo img {
		float: left;
		width: 40%
		}

		.logo img#phimg {
		float: right;
		width: 40%;
		}

	d) uninstall DreamWeaver, it's impeding your learning. ;)


> By the way: What is the general opinion on making sure pages view properly
> in NN4. If you open my page in NN4, the Horizontal Rule's don't view and
> the javascript doesn't work.

As long as the content isn't obstructed by incorrect placement, I don't
really care about NN4. I've often @imported the style sheet so the content
is completely unstyled for NN4. My mother has finally submitted to having
her browser upgraded (she's having it professionally done because she
thinks it's too hard), bless her soul.


--
Emma Jane Hogbin
[[ 416 417 2868 ][ www.xtrinsic.com ]]