PDA

View Full Version : Image placement



cjwsb
Sep 8th, 2004, 08:58 PM
Hi all,

I'm making a test page for a friend. Currently, I have a drop down menu, an image "flowing" into that menu, and a logo. I want to position the logo (a globe) OVER the green wavy thing on the left.

Can't seem to get it over there to save my life. Any thoughts?

The page is at http://www.bartlett-family.net/test2

Thanks!

Chris

Roy Sinclair
Sep 8th, 2004, 10:39 PM
Maybe this is too obvious but why not merge the logo image with the "green wavy thing" as a single image?

bradyj
Sep 8th, 2004, 11:11 PM
True or just take that logo right out of the flow of the document with a nice healthy:


.logo {
background: #ffffff url(GFS_Logo3.jpg) no-repeat top left;
width: 352px;
height: 214px;
margin: 1px 0px 0px 0px;
z-index: 200;
position: absolute;
left: 2px;
top: 10px;
}


That way it can go where it wants to go without affecting the rest of the document. You can obviously adjust the position as you want.

As a side note, and this isn't for your question but it could be helpful -- you can use some semantic coding that would be easier for yourself and would be better for google ranking and accessibility. Instead of <div class="logo> why not make that an <h1>Company Name</h1>



h1{
background: #ffffff url(GFS_Logo3.jpg) no-repeat top left;
width: 352px;
height: 214px;
margin: 1px 0px 0px 0px;
z-index: 200;
position: absolute;
left: 2px;
top: 10px;
text-indent: -5000px;
}


Then put all those menu a tags in list items so they make more sense. Other things can be h2 and so on, and paragraph tags. We call your code 'divitis' in web design:)

Mostly because you're gaining by not using tables, but your code is still going to be just extra stuff that means nothing for the content, but everything for the presentation. Just a helpful hint, it'll make things easier than all these div classes in the long run, but it's pretty clean so far :thumbsup:

cjwsb
Sep 9th, 2004, 04:47 AM
Sorry I didn't post earlier, guys. Roy was right, and I thought about that almost immediately after originally posting... I made the two images one. Simplest solution that I hadn't thought of at the time.

Only one more thing I'd like to do... Center the whole thing. How do I do this (without using the cheesy "<center> deprecated HTML tags)?

Thanks!

Chris

cjwsb
Sep 9th, 2004, 05:38 AM
Nevermind, figured it out. Didn't like it, so I left it as is.

Chris