CSS-P Problems

glenwheeler

Senior Member
Hi All,

I am a new member and just want to ask about a few problems i am having with some css psoitioning any help would be great, ill need to speak someone through it so if you think you could help me with some position please PM me, any help would be great, thanks guys.

Regards,
Glen Wheeler
 
Welcome to the forums. I along with many others on the forum can probably help you!

Hows about you post up the html and css code, a link to the site or "hidden" page and what it needs to look like?

Im sure I or others will soon be posting helpful information...
 
the website can be found here;
UK Value Design | Home

i want to place a little nav under where the phone number is in the header, i have 3 images located;


http://www.ukvaluecomputing.co.uk/tests/images/home.jpg
http://www.ukvaluecomputing.co.uk/tests/images/contact.jpg
http://www.ukvaluecomputing.co.uk/tests/images/sitemap.jpg

How would i go about placing these? I tried adding a DIV inside the header DIV but this didnt seem to work, it just kept dropping down the container area, any help would be cool,

tbwcf tried sending you a PM but it said your inbox was full. Thanks anyway and i appreciate your time.
 
ah sorry I'll clear some out tomorrow!

It sounds like you need to add your div inside the header div, and give it

position:absolute;
right:150px; (ish)
bottom:10px; (ish)

and put the images in there. that will position your div absolutely in relation to the div its in . so it should be 150px from the right and 10px from the bottom of the header div (being the header - and for this to work the header needs to have position:relative; which you already have)

hopefully that makes sense!

although this isn't exactly what your after this link should help to understand 24 ways: Absolute Columns

once you get the jist of relative/absolute positioning together css becomes much much easier! (at least it did for me).
 
ok I just checked for you. your header had a height greater than your image (200px rather than 150px) so presuming you want the icons to appear under the phone number in the white area you need to change the headers height to height:150px; ((otherwise increse the bottom positioning of the mininav))

then make your nav (mininav) as i've called it {position:absolute; right:65px; bottom:10px;}

I uploaded an example here UK Value Design | Home

If you view the source it should make sense even if I haven't! (css in the head)

any problems just let me know and I'll take another look!
 
Woah thats wicked, i just think i need to change the nav images, they look rubbish! Thanks for your elp thats great, hopefully i can now move on, could you leave that test page on for today? ie Tuesday 7th April 2009 and ill get it done and they u can take ir down, thanks alot dude!
 
no worries, glad I could help. I'll leave the page up until you let me know your done!
 
Hi guys,

sorry bout this got another problem thats come up! why is my body area displaying at the top of the container? i have set the preoperties in the css file but still no joy i have highlighed my area in green, please see it here;

UK Value Computing | Home

strange problem! sorry for the noob questions...
 
I think it may be your comments rather than css, try deleting the two comments
<!------ Mininav Close ---->
<!------ Header Close ----->
 
hrrrmmm... remove or edit your comments like suggested as they are mal-formed...then remove from your source code the 2x br /> and add the following to your css..

#header { 5px 5px 5px 5px to ---> 75px 5px 5px;

I think that will get you where you want to be ? or hire me (see sig) and ill do the site for ya :)
 
ah yes the comments were the problem, please view here

UK Value Computing | Home

you can see that the website now displays ok, but how do i pull up the body area so its meets the bottom of the header?

I used: margin-top: 0px;

but this didnt work, any ideas? thanks for the help guys!
 
Hi Glen you've got these margins on the header margin: 5px 5px 5px 5px; (top, right, bottom, left).

Margins appear outside the element, padding on the inside - so its the margin on the bottom of the header stopping them meeting, nothing to do with margin on the body_area.

So either make the header margin: 5px 5px 0 5px; or give the body_area a top margin of -5px (you can have negative margins but not padding). I would suggest the first.
 
omg..i am so stupid and lazy...its been a hard day sorry..my fault for not checking that first! thanks buddy
 
No worries, I've just registered for a w3 web developer exam (css / xhtml) so its good practice for me!

I've had plenty off help from ppl on here so its nice to be able to return the favor - keep the good karma going!
 
Back
Top