SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Evangelist Scheisskopf's Avatar
    Join Date
    Nov 2004
    Location
    Southampton, UK
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    tricky image layout

    my site template

    I am trying to create the site in the link above. as you can see the logo goes diagonal across lines which encompass the site.

    I am trying to figure out the best way to create this. Ideally i would like to keep the main site in a table, with a border. But then i would have to create some sort of div tag for the diagonal logo.

    any ideas?

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, I have an idea. I'd use a transparent .gif or .png image, then overlay that on top of your layout using CSS's positioning and z-index properties.

  3. #3
    SitePoint Evangelist Scheisskopf's Avatar
    Join Date
    Nov 2004
    Location
    Southampton, UK
    Posts
    537
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the troublem is the site is centered. i only know how to do what you said if the x and y doesn't change. but they will change if the site is centered because of different screens/windows sizes etc..

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then give the design a relative position so you can position the logo absolutely (relative to the position of the design, rather than the browser window).

  5. #5
    SitePoint Member
    Join Date
    Aug 2006
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    To expand on what Dan is saying, I'd give the header (with grey border) a position relative, and cut up the logo to include the borders or make it transparent and position it absolutely to the top left minus 50 pixels or whatever. You could also do negative margins but position is def the best way

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,495
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I woudn't include the border on the image. Just make it transparent - that way if you ever change the border color (or decide to get rid of it) you won't have to change the graphic as well.


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
  •