Jump to content

background side board help needed


Recommended Posts

Hello, I am not very good at css but trying to learn. I am still working on this site but you can at least see my problem http://www.printableshop.com/My problem at this point is the scissors image. I thought I could make an image with a white rectangle and scissors on the right hand side of the what image and made them a png as long as I made it the same width that #main then I could adjust the right side margins from there to make it all fit correct but the scissors are running down both sides. #main { float: right; width: 600px; padding: 0; margin: 0; padding-left: 10px; padding-right: 10px; background: url('images/scissors.png') scroll top;}Any help would much appreciatedThank youKimber

Link to post
Share on other sites

just remove the padding and make the image cut to fit. Just keep adding extra space on the left of the image until it lines up.

Link to post
Share on other sites

because you have not stated what sort of repeat you require, it uses the default and repeats it across as well as down, try using repeat-y.#main { float: right; width: 600px; padding: 0; margin: 0; padding-left: 10px; padding-right: 10px; background: url('images/scissors.png') top repeat-y;}to make it tight against the right edge you might want to include 'right' as well, as it will set it to 'center' by default as well.background: url('images/scissors.png') right top repeat-y;

Edited by dsonesuk
Link to post
Share on other sites

Hi!Let Me Clear 1 More Thing.If U R Using DivWidth: 600px;padding-left: 10px;padding-right: 10px;Then Ur Your Actual Div Size In Width Will Be 620px;So U'll Have To Use Image 620px In Size.Coz Right & Left Padding Will Be Add In Width Size.Same For Height If U R Using Top Or Bottom Padding.So Set Ur Width According To Left Or Right Paddinge.g:- as subtractwidth - padding left - padding rightorheight - padding top - padding bottomIf U R Using Fixed Height Or Width In SizeSo Try This CSS ID

/* right padding almost will be 40px; */#main {float: right;width: 550px;padding: 0px 40px 0px 10px;background: url('images/scissors.png') repeat-y;}

Link to post
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.

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...