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

CSS-P Problems

Discussion in 'Website Design Forum:' started by glenwheeler, Apr 5, 2009.

  1. glenwheeler

    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.

    Glen Wheeler
  2. philjohns

    philjohns Senior Member

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

    tbwcf Active Member

    Hi Glen, either post something up here or pm me and I will have a look!
  4. glenwheeler

    glenwheeler Senior Member

    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;

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

    tbwcf Active Member

    ah sorry I'll clear some out tomorrow!

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

    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).
  6. tbwcf

    tbwcf Active Member

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

    glenwheeler Senior Member

    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!
  8. tbwcf

    tbwcf Active Member

    no worries, glad I could help. I'll leave the page up until you let me know your done!
  9. glenwheeler

    glenwheeler Senior Member

    you can take it down now andy, got it done working on other area's cheers buddy..
  10. tbwcf

    tbwcf Active Member

    Thanks Glen will do later on.
  11. glenwheeler

    glenwheeler Senior Member

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

    tbwcf Active Member

    I think it may be your comments rather than css, try deleting the two comments
    <!------ Mininav Close ---->
    <!------ Header Close ----->
  13. tbwcf

    tbwcf Active Member

  14. Sunburn

    Sunburn Active Member

    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 :)
  15. glenwheeler

    glenwheeler Senior Member

    Cool, thanks for the tips guys, ill give it a go when i get back home, just in starbucks on the iphone!
  16. glenwheeler

    glenwheeler Senior Member

    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!
  17. tbwcf

    tbwcf Active Member

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

    glenwheeler Senior Member

    omg..i am so stupid and lazy...its been a hard day fault for not checking that first! thanks buddy
  19. tbwcf

    tbwcf Active Member

    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!
  20. glenwheeler

    glenwheeler Senior Member

    Hi Guys,

    Ive got this far now,

    UK Value Computing | Home

    nothing wrong with it apart from the <hr/> displays different in browsers

    i have tested it in IE, Firefox and Safari all display the line different

    Any ideas why?

Share This Page