Jump to content

overlapping


mest22

Recommended Posts

ok i created a template in psd the client likes it now im trying to cut it up and get it looking the same for html use,

 

i seem to be running into a problem tho, my menu overlaps my header, now i am trying to find the best way possible to slice this up and get it into code, do i slice it up into too diffrent images or sperate images and intergrate them indivdualy for each one for menu buttons....

 

when i do it as a header image then a menu image they dont overlap because of the auto padding due to each being its own div, so i said ok lets not make them overlap, but i run into the problem that the menu boxs dont line up with the images... im a bit confussed i didnt really stop and try to figure this out as i have 2 other projects i am doing aswell that are a bit easyer to get into code...

 

thanks

 

franco

Link to comment
Share on other sites

Um, thats a big question... Could you post your code and maybe a link if possible. That would help get the ball rolling. :D

 

[insert "hmmm" smilie here]

 

Well, I guess if you are planning on using "buttons" for navigation You'll need individual slices. If your planning on using text, one big slice would probably be OK.

Link to comment
Share on other sites

do i slice it up into too diffrent images or sperate images and intergrate them indivdualy for each one for menu buttons....

 

Lots of image slices, especially if structured in a table, are absolute hell to edit later and use an old method of coding.

 

If you have the time, learn HTML and CSS and use divs. You should then be able to use a single large image as a background, or a few large background-images in a few divs, and code content text or images on top. It makes much simpler code.

 

Having created a background for the whole page, you then create your menu as a horizontal or vertical list and can use separate images for each button or text on a background-image for each button. Buttons that are only images need a title attribute so that screen readers for blind people indicate which button is which.

 

After reading your post again, what you might have is:-

a body background-image for the whole page

a header image in a header div or a header div with background-image and text headings

a menu ul tag with a general background-image for the menu if required

li tags for each button with text or background-images for each button (preferably with text)

a content div

a footer div

Edited by Wickham
Link to comment
Share on other sites

yea i understand what you are saying , here is a link to the mockup im trying to code..

 

I was thinking of just having a big BG image for the whole page then fill the reset with the bg gif when its required...I have an idea how to code it , I know basic html and css just not a pro at it still learning, I just didnt know if I left the whole image for a BG was a good or bad idea i guess trial and error works best...

 

 

 

http://img.photobucket.com/albums/v255/mest22/barber_mock.jpg

Link to comment
Share on other sites

This one will be a bit tough to code, mainly because of the image in the upper right... I'd suggest using a header div (which would contain the logo / navigation), a content div (including the main content), absolutely positioning the image "above" both divs, and finally a footer div.

 

The header would use one large background image, and the navigation would use an unordered list with individual images per nav item.

Link to comment
Share on other sites

This is one solution which uses your image mainly as it is for the whole of the wrapper div , but it could be done in other ways, I'm sure.

 

http://www.wickham43.com/forumposts/mest22081226.html

 

Remake your image so that the text, links and photo are removed. I can't do that so the link above shows my text and image over the top of your's.

 

I've tested in IE6, IE7, Firefox, Opera and Chrome.

 

It assumes that the page height is fixed. If not, the content and footer divs would have to have different code.

 

You will need to adjust the margins and padding and the footer div widths if you add more to the side divs.

Link to comment
Share on other sites

This is one solution which uses your image mainly as it is for the whole of the wrapper div , but it could be done in other ways, I'm sure.

 

http://www.wickham43.com/forumposts/mest22081226.html

 

Remake your image so that the text, links and photo are removed. I can't do that so the link above shows my text and image over the top of your's.

 

I've tested in IE6, IE7, Firefox, Opera and Chrome.

 

It assumes that the page height is fixed. If not, the content and footer divs would have to have different code.

 

You will need to adjust the margins and padding and the footer div widths if you add more to the side divs.

 

 

thank you thats pretty much what i was ending up doing- i believe i follow most of the code some is new but i understand what you have done for the most part..

 

but i want to keep the content area fluid as when more content is added and remove allowing the footer to expand with the content, right now the footer is fixed..'

Link to comment
Share on other sites

This is flexible in height:-

 

http://www.wickham43.com/forumposts/mest22081227.html

 

Your main background-image cannot repeat for any height without repeating the header image and footer band, so I made a 50px high brown image which has been put as a body background behind the main image so that it shows below for any content height.

 

You will have to remove the footer black band as well as the text and photo from your image.

 

I added 20px white borders to the top and bottom of #wrapper; if you don't want the white space top and bottom, delete the borders. I found that the brown body background-image went over a body margin top and bottom so it was easier to make white borders.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...