• 0

Need litle help in CSS


Question

Hi

first of all i suck in CSS or HTML or anything that has to do with web designing however i like to try things my self, got a ready made layout and working on it, so far where i reach tell now is here http://zixyon.com/Zixyon/index.html

now the problem am stuck so far with is the bottom image under the border it should look like this http://zixyon.com/Picture.jpg i had a problem with the top one but after trying a few times i added part of it with the logo and kept with those padding and margin stuff and it worked but now i have no idea how to solve the bottom one

ohh and while you are at it, any suggestion would be very helpful

Regards,

zixyon

Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Here's how I would do it:

  • In your HTML, place #footer inside #content_wrapper (after #content).
  • In your CSS, remove the left and right margins on #footer.

If you prefer not to change your HTML, you're better off slicing the background image in two between the content and footer area and give #content_wrapper and #footer those sliced images as background.

Link to comment
Share on other sites

  • 0

ah i see. Your content / content_wrapper are Smaller in height than the background image.

what I woulda have done is set the content wrapper the same height as your background image there. Then position your #content inside the content_wrapper as how you would need it.

Its getting cut off because the box heights are smaller than the background image. This would also fix your header issue. I see what you did and you could fix this easily in one swoop.

so create a wrapper with your background image at http://zixyon.com/Zixyon/img/bg_content.png

make the height of this wrapper the SAME height as that background image.

inside your #wrapper, put the #header first then #content next. Position the header / content divs appropriately. And because of this you can have your logo image JUST be the logo and not have a chunk of the background image so that it lines up on how you have it now.

oh and I really like your simple design. Good work.

Edited by bolerodan
Link to comment
Share on other sites

  • 0

Set the min-height to 640px and background to "url(../img/bg_content.png) no-repeat scroll center -6px" for #container. That will solve the issue with background getting cut off. Once this is done the logo background can be just the logo and will not need to include the background for header.

Link to comment
Share on other sites

  • 0

thnx everyone for the advise, yeah i knows its been too long since you posted :p

so far what i reached is, in content_wrapper, i put this

but the image from the top is not showing fully now, its being cut just exactly where the logo is

background: url(../img/bg_content.png) no-repeat scroll center -140px;

margin: 0 auto;

padding:20px;

min-height:640px;

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.