SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to make this into div's - (Paul you have seen this before)

    Hi

    Paul kindly helped me on the overall layout for this a while back now at http://www.bfgroup.co.uk/omega/new/system-integration/

    Bu i now want to turn to turn the whole header into divs, but I am running into trouble hence the reason why i stuck a table or two in there!

    This is what I am trying to achieve http://www.omegadm.co.uk/header.jpg

    I hope this all make sense, and I hope someone can help me

    cheers

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Well as its a fixed width page you can basically just absolutely position everything where you want.

    However as that whole top banner seems to be completely made up with images I would be inclined to drop the whole lot in place in one go with no slicing. Place it all in one background element of appropriate height and width.

    You can then simply absolutely place any extras such as your flash panel, links etc on top of the correct part of the image .

    Thats how I'd do it because I like to keep things simple where possible.

    Paul

  3. #3
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I wish I could do that, but where the part has text, that has to be HTML text linking to there relevant pages...do you see what I mean?, this could be tricky!!

  4. #4
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Wink

    Would it be easier to insert a table instead?... I would rather not though!!

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    I would still do it like I said originally. You only have odd bits of text and these can be placed exactly where you want on top of the background. You have a fixed width so theres no wrapping to take care of.

    I div for the background of the whole top. then just absolulely place the text and whatever else you want on top of the image. Seems straight forward enough to me unless I'm missing something

    Should be a ten minute job once you've worked out the exact co-ordinates etc.

    If your still confused or I'm missing something then shout

    Paul

  6. #6
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul

    I understand what you are saying I think ...... but how do I exactly work out the co-ordinates.

    This is what I have done so far for the header

    #headerbground{
    width:561px;
    height:177px;
    margin:0;
    padding:0;
    background-image: url(images/bground-header.jpg);
    }
    #flash{
    position: absolute; right: 50%;
    margin:0;
    padding:0;
    }
    .floatleft{
    float:left;
    }
    #distribution{
    position: absolute; right: 20.2%;
    border-bottom:1px solid #fff;
    border-right:42px solid #779997;
    margin:0;
    padding:0;
    }

    <div class="floatleft">
    <div id="headerbground">
    <div id="flash">f</div>
    <div id="distribution">f</div>
    </div>

    With regard to the % I have put it, they are done by trial and error to be honest! and don't get the same results when viewed in different browsers

  7. #7
    SitePoint Member AdamsHC's Avatar
    Join Date
    Aug 2004
    Location
    Lithuania
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You do not need to use % values for your coordinates, pixels should work well for your fixed width layout. So, for every piece of text you want to put on top of background, you should use:

    display: block;
    position:absolute;
    top: ?px;
    left: ?px;

    Exact position you may get from your design. In addition you may want to reduce line-height, set padding and margin to 0px, set specific width if texts can be changed from CMS, etc.

  8. #8
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Okay

    I did what you said and made the whole top a background image and placed everything on to it.

    Got it too work, but now all the content below seems to be hidden by the top

    The page I have edited is at http://www.omegadm.co.uk/daves/daves.htm

    and this is a link to how it should look http://www.omegadm.co.uk/daves/services.htm

    Have I gone about this the right way now......

  9. #9
    SitePoint Member AdamsHC's Avatar
    Join Date
    Aug 2004
    Location
    Lithuania
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    you need to do the same thing for the rest of content - put it absolutely below the header

  10. #10
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    when I absolute position the divs below i am getting some strange renderings between the different browsers, this is becoming a bit of a mess now I am not convinced this is the right way to do it .. help!!!!!!

  11. #11
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i got it to look okay by adding a wrapper div (width specified around all of the content below the header)

    If i am doing fixed width page designs is absolute positioning the way to go, is it right that i don't have to worry about floats if this option is taken?

  12. #12
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The thing is now the footer I have at the bottom of the page will be overlapped by the content above.....agghhhhhh!!!

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    lol - don't panic.

    Sorry i don't have time to give you the solution as I'm in the middle of 2 jobs at the moment but all you need to do is get your content back in the flow.

    As the top of the page is absolutely placed then to get some flow back in the page you should make your content statically placed and use a margin-top to clear the header.

    However if your header contains everything then it doesn't need to be absolutely placed anyway and content can just follow on naturally. You just need to give the header the correct height so that following content will start afterwards as normal. The header is the first thing on the page so theres no need to position it. Just give it a position:relative for stacking context.

    The content within the header is absolutely placed in the correct positions and will not affect the rest of the layout. This way the flow of the page is preserved and your footer can then follow your content without problems.

    I hope thats clearer.

    Paul

  14. #14
    SitePoint Evangelist mumford1's Avatar
    Join Date
    Sep 2002
    Location
    UK
    Posts
    571
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smile

    Thanks for the response, yes that made it clearer, if you look at the main content (grey nav) and pics in IE you will see there seems to be some sort of pixel jog, viewed in Firefox and NN it looks fine.

    What can I do to correct this ? I thought by having

    * html #leftcontent {
    height:236px;
    margin-right:-3px;
    }

    Would fix this, but NO!!

    Its okay I have sussed it! Image width problem og bground image
    Last edited by mumford1; Oct 7, 2004 at 03:13.

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,296
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    sorry, for not geting back sooner but I had a layout of my own that wouldn't work lol and it needed to be done immediately.

    Hope you've sorted your problem out ok now

    Paul


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
  •