Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Couple bits on this mockup that itd be good to get help on, only small CSS things :)

Discussion in 'Website Design Forum:' started by bamme, Nov 5, 2010.

  1. bamme

    bamme Senior Member

    Hi everyone

    I'm in the process of building this

    www[dot]chinagardentakeaway[dot]co[dot]uk/dev (not a real URL because for some reason the actual url didn't show up correctly here, but replace [dot] with . )

    Please ignore crappy background and wrong page title etc..

    Basically what im looking at is the background of #wrapper. I simply want to position it 220px from the top, as well as repeat it vertically.

    It repeats vertically fine, but this rule just doesnt work (bold):

    #wrapper {    margin: 30px auto 0px auto;    width: 1038px;    background:url(../images/main.png) top left repeat-y;    background-position:0 220px;}
    Am i being really stupid?

    The other little annoying thing is the <h4>, currently reading "contact driving instructor", in the red bar below the header. I want it to be positioned at the far right of that red bar, minus 20px or so. But it seems to wanna stop right there where it is, and not go right to the end of the header.

    The current rule applied to it is:

    #header h4 {float:right;margin-top:40px;}
    I've also tried:

    #header h4 {text-align:right;margin-top:40px;}

    Can anyone help me? Sorry.. :L
  2. tbwcf

    tbwcf Active Member

    For the background image positioning, it will be positioned x pixels from the top however the repeat will still run above - you can't just make it start halfway then repeat down from that point.

    You'll need to take your header out from the wrapper then have the wrapper start below.

    The h4 has margin-top and is being stopped by the h2 tag - quick fix - give header {position:relative;} then make your h4 {position:absolute; right:40px; bottom:15px;}
  3. bamme

    bamme Senior Member

    Thanks tbwcf -- I've actually had to make revisions to the css rules in the layout; a half of the site needs to be fixed positioned so I'm gonna start this again and see if i have the same problem -- cheers, i"ll refer to this post if so! :)

    can i ask one question about positioning from this quotation? say if you have div 1, and div 2 inside div 1. you want to position div 2. do you therefore have to position div 1 absolute to corectly position div 2, which would therefore be relative? or do you use relative positioning for div 1, giving div 2 a rule of position:absolute for correct implementation of this?
  4. Sunburn

    Sunburn Active Member

  5. Monroe

    Monroe Member

    I'm no CSS guru but I feel inclined to offer any advice I can.

    Perhaps it's the order of your shorthand properties for background. Maybe try changing your #wrapper declaration to:
    #wrapper {    margin: 30px auto 0;    width: 1038px;    background: #000 url(../images/main.png) repeat-y absolute 0 220px;}
    So it would be:
    background: color image repeat attachment position;

    Are you clearing your floats?

Share This Page