CSS Help Please

cannockwolf

<span class="poty">POTY (Joint) 2016</span>
Messages
2,858
Name
Dave
Edit My Images
No
I have been learning CSS layout and need a bit of help, I have used position: relative; to place some menu text on top of a graphic which works fine but the 2 columns under it move down relative to the size of the div even though its not taking that space up

i know i havent made myself clear :s but heres the page i have so far, the colums are supposed to be under the blue line

http://www.enviroarm.co.uk/test/
 
ye i agree i explained it terribly

i mean directly under and not 60-70px away from it, if you look at the code it comes straight after but appears quite a bit down, is that any better?
 
I think I understand now, maybe ...

you need the .header to be position:relative
and the .head-text to be position:absolute

positioning an element absolutely means it wont occupy space in the 'flow' of the document, and by absolutely positioning it within a relatively positioned element its offset will be measured from the top left of the .header div rather than the body of the page - if that makes sense

also it's a good idea to add z-index on positioned elements to make sure they stack up how you want them
 
Try setting a specific height in pixels on the .header class in the css
 
I think I understand now, maybe ...

you need the .header to be position:relative
and the .head-text to be position:absolute

positioning an element absolutely means it wont occupy space in the 'flow' of the document, and by absolutely positioning it within a relatively positioned element its offset will be measured from the top left of the .header div rather than the body of the page - if that makes sense

also it's a good idea to add z-index on positioned elements to make sure they stack up how you want them

we have a winner :D

thanks mate, worked a treat

its ok reading tutorial books but when something like this happens they're not much use, cheers :thumbs:
 
oh ye ill look at the z-index now :)
 
i only knew html a few weeks ago and thought i ought to drag myself into the 21st century :)

im too old to be doing this lol
 
even though it may seem daunting at first, learning the code is the easy bit,

there are so many facets to web development it's a never ending rabbit-hole of learning new stuff, I started messing around with HTML 8 years ago and have never stopped since.
 
Back
Top