...

View Full Version : Web Design/Coding Help



ajc1996
05-05-2011, 01:41 AM
Hi everyone. This is my second post on codingforums, so please don't expect perfection.

Background info: I have a basic knowledge of HTML and CSS. I have recently viewed web design and coding tutorials and want to finally put everything I know together and make a website for my computer class at school.

As there seem to be many styles of designing websites, I would like to declare now how I have seen it be done. Basically, you design in photoshop (in my case GIMP), then cut it up into bite sized chunks so that you can link them separately. I am currently stuck at the beginning:

I have a background image (bg.jpg), and a header image (header.png). I used css to add the background image: #container {background:url("bg.jpg") no-repeat;} . Please note that #container is my div for the whole body. I dont know why you should do that, but I saw it in a tutorial. Next, I had to insert my header: #header {position:absolute; top:57px; left:27px; padding:0px} . This positioned my header (almost) perfectly.

All was going well until I realized that I needed my background image (essentially my website) to be centered, for the obvious reason that on a widescreen monitor it would look horrible on the right ( i designed it as 1024x768). But when I centered the background image, then the header with the absolute positioning was way off!

the gist of my question is: 1. Do you recommend I use absolute positioning for my header, navigation, and other images (is there a different/better way)?
2. If I still should use absolute positioning, how can I find what my top and left spacing should be (previously I just measured in GIMP how much space was to the left of the layer and above the layer) when my background image is centered, therefore moving it many pixels?
3. Should I be absolute positioning the <div> or the <img>?

Thank you for any help, it will be greatly appreciated :)

--Andrew

Kevin_M_Schafer
05-05-2011, 05:33 AM
ajc1996,

I don't know much; I'm still learning myself, but I had the same positioning problem as you just this week. I was able to position items exactly where I want them by using this:

margin-top:100px;
margin-left:50px;

I'm using XHTML 1.0 Transitional for my doctype.

I hope my two cents can help you some. There's experts here, though, and they have the answers.

sunfighter
05-05-2011, 05:35 AM
Don't use absolute positioning. You'll find that if you use once, you'll have to use all the time.

Since we're talking header and they are normally at the top and share the space with nothing else and your adding it to the container div -- use margins to position it.

mrjezz
05-05-2011, 02:31 PM
Don't use absolute positioning. You'll find that if you use once, you'll have to use all the time.

Since we're talking header and they are normally at the top and share the space with nothing else and your adding it to the container div -- use margins to position it.

Agreed. If you want your content to be centred then you might want to specify a width for your container and centre it:

#container { position: relative; width: 960px; margin: 0 auto 0 auto;}Your background image can be set on the body
body {background:url("bg.jpg") no-repeat;} then you can just chuck your header in the container and it will be at the top.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum