SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Lightbulb dead centre with CSS only

    Hi again,

    I found this experiment/site on vertical aligning very interesting. I studied the CSS and added some more, to get this nice splashpage. Maybe you are also looking to implement some vertical and horizontal centering, this trick will be for you...

    original: http://www.wpdfd.com/editorial/wpd0103.htm#toptip
    my ellaboration: http://www.ict-id.nl/temp/sitepoint/...eadcenter.html

    it works on most of the good browsers, resize to see the amazing center

    let me know if you like it and let me see if you have some good use for it ...

    cheers
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  2. #2
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Potential good use is in printing.

    We have a lot of problems with margins on printed pages because the printer driver will never allow 0 margins.

    However with this method we don't care what the margins are - hopefully. Not sure that printers will see it that way though.

    But we'll give it a try.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  3. #3
    ********* Streaker Lister14's Avatar
    Join Date
    Jun 2002
    Location
    C:\Documents and Settings\Desktop\Recycle Bin
    Posts
    677
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i like it

    you could use it for a site, where you only fill the middle, leave the 1/2/3/4 actually blank...

    should be great compatible accross browsers
    roy.lu
    C:\DOS... C:\DOS\RUN... RUN\DOS\RUN...!

  4. #4
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I can confirm that this works very well to set exact margins - so long as the margins in the printer settings are symetrical.

    They have to be symetrical because that is what the centering uses as its boundary, but so long as they are and I think also they must be less than the actual desired margins, then all works very well.

    Anyway very useful, because that margin problem has been most annoying.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  5. #5
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    small problem with A4

    I'm using this to print a page and the page looks great, but the onscreen is all up the creek. Any ideas?

    You can view here or the code follows:

    Code:
    <!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>CSS Center</title>
    <style>
    .horizon        
    	{
    	color: white;
    	background-color: transparent;
    	text-align: center;
    	position: absolute;
    	top: 50%;
    	left: 0px;
    	width: 100%;
    	height: 1px;
    	overflow: visible;
    	visibility: visible;
    	display: block;
        border: 1px solid green;
    	}
    
    .content    
    	{
    	font-family: Verdana, Geneva, Arial, sans-serif;
    	background-color: transparent;
    	position: absolute;
    	visibility: visible;
    	margin-left: -95mm;
    	top: -138.5mm;
    	left: 50%;
    	width: 190mm;
    	height: 277mm;
        border: 1px solid red;
    	}
        body {height:297mm; width:210mm; border: 1px solid blue}
    </style>
    </head>
    <body>
    
    <form runat="server">
    <div class="horizon"><div class="content">
    </div></div>
    </form>
    
    </body>
    </html>
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  6. #6
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    thnx for sharing

    but what is the onscreenproblem? I see a calendar which is not 100% in height, but its flexible in the width-department.
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  7. #7
    SitePoint Guru dale_burrell's Avatar
    Join Date
    Aug 2002
    Location
    Wellington, New Zealand
    Posts
    861
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Re: thnx for sharing

    Originally posted by wisbin
    but what is the onscreenproblem? I see a calendar which is not 100% in height, but its flexible in the width-department.
    Opps sorry, I found a partial fix (i.e. to only apply the style @media print {} ). I've undone that now and you can see how it looks.
    If you aren't living life on the edge
    - you're taking up too much space
    Creative Dreaming Ltd / Ask The Local / Amanzi Travel

  8. #8
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Errmmmm, what happens if you want a fixed sized layer in the centre of the page rather than just text in a % sized layer? (Or have I missed the point?)

    G

  9. #9
    SitePoint Zealot wisbin's Avatar
    Join Date
    Jan 2003
    Location
    Netherlands
    Posts
    115
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yup I guess

    the % is for putting the horizon in place, the contentlayer is fixed size width and 1/2 the width for the margin, putting it to the left of the 0,0 point in the flow, this will be in the middle, but you have to know the width of the contentlayer!


    /* ascii-art WARNING */

    ------| |--- 50%

    ----| |----- 50% - 1/2width = dead centre


    cheers!
    Wisbin from ict-id.nl

    Every day I see your face I wish that I'd stayed
    Don't even know what made me run away
    It's just the way I play the game
    ..


  10. #10
    Drupaler bronze trophy greg.harvey's Avatar
    Join Date
    Jul 2002
    Location
    London, UK
    Posts
    3,258
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah! Like it. Good stuff.....

    *sound of Recycling Bin emptying after just being filled with old JavaScripts*


  11. #11
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know I keep asking this, but so far no-one has the bottle (or knowledge) to repond, so I'll give it a go here...

    Anyone know how to get the top example (dead center/negative margin kludge) to work in IE5 (mac only?) when using a full, valid (xhtml) DTD?

    It seems that IE5 will only implement the above method when using a partial HTML4.01 Transitional DTD (w/o url) or no DTD at all (neither of which are an option in any site I'm gonna put my effort into.)

    TIA
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature


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
  •