I am working on a new site and I have created a layer using css to position an image over top of a part of the website. If you visit my site breedingangelfish.info you will see what I am talking about. I want to make it so the angelfish image in the at the top, stays next to the links and title without moving if the browser size changes. Can anyone give me an idea of how to do this? Thanks.
What you need to do is wrap all your site in a fixed width div box. Then you can place your image in it with an absolute positioning and keep it where ever you want. Something like #page { margin:auto; //This'll centre your box width:800px; //Set your width to the width of your content } should do it. Then you can place this in your site at the very top with <div id="page"> and the very bottom close it with </div>
Gazelle, The best thing to do would be to bag the tables, and use Divs and CSS to position your site. If you want to stick with the tables, you will have to wrap the entire page with a div (as mentioned above by Narcotix), but you will have to do more to make it position the image of the fish where you want it. You will need to have this div have a CSS position of absolute or relative. This will make the images be absolutely positioned in relation to this div and not the entire page. Thus you will be able to position your fish where you want independent of browser size. Then you will need to put your fish picture inside of that div with a position of absolute. It would be something like this: #mainContainer{ position:relative;/*to make the image inside be positioned in relation to this div*/ width:780px; /*or whatever you want it to be */ margin:auto; } #fishImage{ position:absolute; left: whatever; top: whatever; } Code (markup): Let me know if you have any other questions, or would like some advice bagging the tables and switching to a CSS based layout.
Great info ! Could you tell us how to make that image linkable if we wanted to You know with basic html and table you would just just a img src tag But with css how would you make his fish clickable, I would love to know that and I am sure web gazelle might too , wasnt trying to jack @OP Web Gazelle I also agree full css is the best I just learned a lot of it and I am loving it, so much more flexible the tables
Thanks for the help guys. If you go to the site now you will see that you suggestions helped me solve it.
To make the fish clickable, you would just use standard HTML tags to do that. Something like: <a href="http://www.linkhere.com"><img src="fish-image.jpg" /></a> Code (markup): CSS just handles how things are displayed (for the most part). Gazelle, I just noticed that your page isn't centered in IE6. This is because your DocType is Transitional. When using CSS, you should always try to use a Strict DocType (especially if the page is brand new). When using a Strict DocType, you definitely want to make sure that you validate the page, and remove all validation errors. It will save you a lot of headaches down the road. Here is the text to make the DocType Strict, and solve your centering problem. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> Code (markup): I would also suggest using an external style sheet instead of inline CSS.