Centered layers?

  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Is there a way to position a layer centered verticaly & horizontally with CSS?
  • Anonymous
  • Bot
  • No Avatar
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

http://www.thenoodleincident.com/tutori ... tered.html

I believe it can be done with regard to margins from the top and bottom; make the margins 10px top and bottom and 10px left and right, but make sure your box is big enough.

I think we need rtm223 over here to check on me; he's the real CSS expert.
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

Sorry in a rush, but check out my answer in this thread:

http://www.ozzu.com/website-design-forum/centering-website-t26082.html

:D
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Great. Thank you rtm :D
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

I have tried every combination that I can think of and can't get your method to work, I guess I don't know enough about CSS to figure out where to put it or what I'm doing wrong. Here is my external CSS

Code: [ Select ]
.one {font: 80% Arial, Helvetica, sans-serif;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
    }
body {
}
.envelope{position: absolute;
  top: 100px;
  left: 15px;
  height: 63px;
  width: 250px;
  z-index: 1}
}
  1. .one {font: 80% Arial, Helvetica, sans-serif;
  2.     margin-top: 10px;
  3.     margin-bottom: 0px;
  4.     margin-left: 0px;
  5.     text-align: center;
  6.     }
  7. body {
  8. }
  9. .envelope{position: absolute;
  10.   top: 100px;
  11.   left: 15px;
  12.   height: 63px;
  13.   width: 250px;
  14.   z-index: 1}
  15. }


and here is my html

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jeremy Lang</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css" media="all">    @import "jeremy-lang.css"; </style>
</head>

<body>
<div class="envelope" id="envelope"> <img src="http://www.jeremy-lang.com/img/jeremy-lang-logo.gif" width="250" height="63">
 <p class="one">Coming Soon!</p>
</div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Jeremy Lang</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. <style type="text/css" media="all">    @import "jeremy-lang.css"; </style>
  7. </head>
  8. <body>
  9. <div class="envelope" id="envelope"> <img src="http://www.jeremy-lang.com/img/jeremy-lang-logo.gif" width="250" height="63">
  10.  <p class="one">Coming Soon!</p>
  11. </div>
  12. </body>
  13. </html>


Where should I put your code? I have tried to name my layer as .centered, but that didn't work. I tried a few other things but I haven't been able to get any of them to work. Thanks in advance.
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

FYI- also tried this but it no dice

Code: [ Select ]
.one {font: 80% Arial, Helvetica, sans-serif;
    margin-top: 10px;
    margin-bottom: 0px;
    margin-left: 0px;
    text-align: center;
    }
body{
  text-align center;  /*IE 5x bug*/
}
.centered{
  margin-left:auto;
  margin-right:auto;
  text-align:left;  /*counter the effect of bug above*/
    height: 80px;
  width: 250px;
}
  1. .one {font: 80% Arial, Helvetica, sans-serif;
  2.     margin-top: 10px;
  3.     margin-bottom: 0px;
  4.     margin-left: 0px;
  5.     text-align: center;
  6.     }
  7. body{
  8.   text-align center;  /*IE 5x bug*/
  9. }
  10. .centered{
  11.   margin-left:auto;
  12.   margin-right:auto;
  13.   text-align:left;  /*counter the effect of bug above*/
  14.     height: 80px;
  15.   width: 250px;
  16. }
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

This page describes it using a table: http://www.quirksmode.org/css/centering.html

This actually looks centered: http://spiritual-pixel.com/there/vertical.html

This also may help you: http://www.ozoneasylum.com/5339

Do you mean that you wrote [div class=".centered"]? If you did, write it without the dot. You're better than that, though :D

CSS really needs to have a way of centering things vertically.
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

Thanks. I got it to work horizontally but I can't get vertical. It's not really a big deal since it it just for a temporary page untill I get the site up & running.
  • conorific
  • Proficient
  • Proficient
  • User avatar
  • Posts: 350
  • Loc: NY

Post 3+ Months Ago

I was going to ask about that. Maybe it's good that it's temporary - no one should kill themselves over CSS ;)
  • rtm223
  • Mastermind
  • Mastermind
  • User avatar
  • Posts: 1855
  • Loc: Uk

Post 3+ Months Ago

CSS struggles with vertical alignment. Simply because vertical alignment ONLY works inside "table cell" elements and only affects "inline" elements inside. CSS tends to uses block level elements so vertical align doesn't apply anywhere. I tried some tests using
Code: [ Select ]
display:table-cell;

But everyone's favourite browser can't handle it :roll: this link that conorific posted:

http://spiritual-pixel.com/there/vertical.html
is the only way to center vertically using css comletely cross browser. It is a very clever method but it suffers from the following flaws:
1) if you shrink the page down there are bits that cannot be seen even if you scroll
2) You have to specifically set the height of the container
3)text-zoom breaks the whole damn thing.

IMO vertical centering is very rarely <b>needed</b> Most of the time the content will go off the bottom of the screen anyway (which will stop the method posted from working) If I ever really need vertical centering, which is probably never, even I would use a table (shock horror), simply to save myself a big 'ole headache


TBH, I wish you had said what you were trying to do beforehand. I see all you have is an image and some text:

Code: [ Select ]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Jeremy Lang</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div style="text-align:center">
  <img src="http://www.jeremy-lang.com/img/jeremy-lang-logo.gif" width="250" height="63">
  <p>Coming Soon!</p>
</div>
</body>
</html>
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  2. <html>
  3. <head>
  4. <title>Jeremy Lang</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  6. </head>
  7. <body>
  8. <div style="text-align:center">
  9.   <img src="http://www.jeremy-lang.com/img/jeremy-lang-logo.gif" width="250" height="63">
  10.   <p>Coming Soon!</p>
  11. </div>
  12. </body>
  13. </html>
  • jlknauff
  • Expert
  • Expert
  • User avatar
  • Posts: 502
  • Loc: Florida

Post 3+ Months Ago

:shock: Gasp, rtm-tables? What is this world coming to? I never would have thought that word would come from you :D

BTW-I see that your CSS tutorials is finally going...the gods have listened, lol.

Post Information

  • Total Posts in this topic: 11 posts
  • Users browsing this forum: No registered users and 40 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.