Getting my content images to line up vertically with the header and the footer

[Krisnmal]

Good day! I am a beginner developer. Can someone please assist me with how I can code in css, I assume, my content images so that they line up evenly between my header and footer?

[cybershot]

The best way to get help from a forum is to post as much information as you can. This will save you a lot of time. You see, I could be answering your question right now instead of asking you for more information. Like, do you have a link? If I can’t see your issue, I can’t help you fix it. Can you post the css you are having trouble with? What do you mean so that they line up with your header and footer?

If you are learning, I would suggest that you watch all the videos on this site. There are many extremely helpful videos here that can help you solve a lot of your problems.

[Krisnmal]

My apologies for not posting correctly. This is my first time joining and posting to a forum. I have indeed reviewed the videos on this site. I am very thankful that I found this site and grateful that Chris posts such helpful content.
As for my question – The site I am working on is not published yet. I have a header and a footer. I have a vertical image that I want to be displayed in the middle of the page evenly distributed between the header and the footer. The header and footer do not move up or down as the page moves and the image does not either. As coded now, It now displays the image closer to the top of the footer leaving a large space between the top of the image and the bottom of the header. If this is not enough information, I am sorry, not sure what else to post to explain. Is this still too vague?

[cybershot]

well the easiest way to accomplish this is to know how big your content is. What you need to do is study “The box model”. So lets say your header is 960px wide by 150px height.

Then you content area is 960px wide by 600px height

then your footer is the same size as your header. The way you would or could space an image in the content area is by using css and padding or margins. So if my image is 500px high, that would leave me enough space to move it 50px from the header and 50px from the footer. In this case, i would do it like this

#content img { margin: 50px 0; }

This is css shorthand. It says to put a margin of 50px on top of the image, 50 px on bottom of the image and 0 px left and right. To center the image, you could try

margin: 50px auto;

that says 50 top, 50 bottom auto margin left and right.
Study css shorthand.
Install firebug for firebox and start using firefox. You can right click on an element and choose-inspect element. When you move your mouse over the code, it will high lite the elements on your page. Margin shows as yellow, padding as blue

[grovesk]

Krisnal – Follow cybershot’s suggestions and if you are still having problems, it would be helpful for you to post your code (HTML and CSS), and a screenshot perhaps, so that we can see what’s going on.

[Author]

Posts