[thelist] CSS & DIV rendering trouble
Emma Jane Hogbin
emmajane at xtrinsic.com
Mon Mar 3 20:24:01 CST 2003
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 ]]
More information about the thelist
mailing list