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

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):

Code: 
#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:

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

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


Can anyone help me? Sorry.. :L
 
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;}
 
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! :)



give header {position:relative;} then make your h4 {position:absolute; right:40px; bottom:15px;}
Click to expand...
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?
 
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:
Code: 
#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?
 
You must log in or register to reply here.
Back
Top