SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question New Portfolio css issues, please help :)

    Ok I am in the middle of starting my portfolio site,this time taking on css3 with a few little tricks i have picked up along teh way, trying to keep imagery off the template as much as I can.

    So I am playing about at the moment just started a page with a huge logo in type or selectable text rather than an image, I am trying something new with it
    Untitled Document

    Take a peek

    Anyway, the problem I am having is trying to get rid of the large amount of space I have at the foot of the page.
    To make the "design" text I used a series of spans with a display: block in teh css to make them stand on top of each other..this seems to be the problem ..however I like this effect and how I achived it.. I really just want to keep it but also lose that large amount of empty space..

    Any suggestions??

  2. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Just to say that is a really cool bit of design work there, I'm very impressed at how you've got it all lined up. Yes, the extra space at the bottom is because you've used position:relative; with big negative values to pull the letters up the page.

    A quick play around in Dragonfly suggests that you can set a height on #content and it will crop the content div at that point but will leave the relatively positioned text exactly where you want it. You can set height:1em; if that's all you're having on the page, or work out the relevant height in ems (which should be pretty consistent across browsers, if you're lucky) if you need anything following the crossword.

    Disclaimer: I have tested this in Opera 11.5 but nothing else!

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Just to say that is a really cool bit of design work there, I'm very impressed at how you've got it all lined up. Yes, the extra space at the bottom is because you've used position:relative; with big negative values to pull the letters up the page.

    A quick play around in Dragonfly suggests that you can set a height on #content and it will crop the content div at that point but will leave the relatively positioned text exactly where you want it. You can set height:1em; if that's all you're having on the page, or work out the relevant height in ems (which should be pretty consistent across browsers, if you're lucky) if you need anything following the crossword.

    Disclaimer: I have tested this in Opera 11.5 but nothing else!

    Thanks for the comment I did indeed try your suggestion but it didnt work, I put a background colour on #content and teh container does shrink however the page remains quite long.

    I am going to have anotehr play with it and try to get rid of those negative margins, I really have never used them until today as this is quite different from the kind of stuff i usually come up with

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2010
    Location
    London, United Kingdom, United Kingdom
    Posts
    45
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok I fixed it very happy indeed with the result Basically I got rid of all negatiove margins and floated teh two vertical words to the left and right BEFORE relatively positioning them on the screen.


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •