What is Digg?103 Comments
- ryanbrill, on 10/12/2007, -0/+26I've done this at least 3 years ago, and much more simply: http://www.infinitywebdesign.com/research/cssverticalcentereddiv.htm
Certainly nothing new, and certainly not something pikerust developed. - gibecrake, on 10/12/2007, -0/+11Doesn't work on Safari. Blank page...
- stutteringstan, on 10/12/2007, -1/+9ha ha, I have an adbocker that screwed this up.
id="waxpadvertpropwaxpadautoid1"
id="waxpadvertseedwaxpadautoid1"
Both of these have the word "advert" in it. - Xopl, on 10/12/2007, -0/+7Unlike the digg post, yours works in Safari and Firefox, it scales with the text size, and your CSS is lighter and doesn't look like a monkey wrote it.
You: Digg!
pikerust: NO DIG - thinkdrastic, on 10/12/2007, -0/+6Open it in Firefox, scale the font size up and... ah, not so bulletproof is it?
- samster, on 10/12/2007, -0/+5Doesn't work in Safari, and it looks like Tag Soup. You can do this with a few CSS hacks, but using multiple divs is no different that just using tables to perform the task.
- Elranzer, on 10/12/2007, -0/+5Seems like a lot of work, and bloated filesizes. Why can't CSS just implement a text-valign element??
- conigs, on 10/12/2007, -0/+4Wasn't the point of CSS to separate the layout (design) from the content (markup)? If I have to change the markup to include 3-4 extra divs, just to get something to work the way I want it to, it seems counter-intuitive.
This is the problem with so much CSS as it stands today... people are trying to get CSS to work the way they want it to by changing the markup. That's useless to me, as well as a lot of other designers. - lifewithryan, on 10/12/2007, -1/+5The technique goes to hell if a user increases his font size. There's a great book out called Bulletproof Web Design by Dan Cederholm, (or something) that addresses issues like this. I just built my first website using his techniques and I must say its pretty cool...allows the user more control. If someone is visually impaired and needs to view the text a bit larger than what you've set, your design should allow for that and expand as needed. (Granted my personal website falls all to hell as well, but whose got time to fix their own site when they're always working for other folks.)
- miek, on 10/12/2007, -0/+4If you resize this you will loose the top of the content. This docks to the top of the browser and gives you scroll abilities.
For example; if you have a 400px high content div, and the browser height is only 200px; the page will scroll 100px down, but the 'top 100px' will be lost somewhere no-one can scroll to. - MattLat, on 10/12/2007, -5/+9Yeah, I was doing this two years ago. Only, I can do it in a lot less:
body
{
margin: 0px;
background: rgb(150,150,255);
}
#waxpadautoid1
{
position:absolute;
height:200px;
width:200px;
top:50%;
margin-top:-100px;
left:50%;
margin-left:-100px;
background: rgb(175,8,8);
font: bold 80% verdana;
color: white;
}
you've got a lot of unnecessary code in that version. - assimil8or, on 10/12/2007, -2/+6Uhm, how is this new? I think I've seen CSS centering tricks without tables long before this...
- norbiu, on 10/12/2007, -1/+5The author keeps burying the posts he doesn't like ... Get this ***** off the front page. This isn't something new. It's lame and doesn't work in all browsers.
- Dangerman, on 10/12/2007, -0/+4Old hack, and not even well implemented; doesn't scale with fonts and can't be viewed in a standards compliant browser.
The idea of web standards are to eliminate ALL unnecessary markup from the document, including the CSS part. Since this is technically a behavior (positioning of the content relative to the viewport size), why not implement it with UO Javascript? Doing so would allow it to degrade far better than the CSS version, and would make it work in all modern browsers.
XHTML will eventually (2.0ish) remove all behavior from the standard, as such we should begin evolving these techniques now.
To me having this much CSS for such a small trick is no different than using invisible 1px gifs to hold open a table. BAD MARKUP, BAD! No Digg! - pikerust, on 10/12/2007, -0/+3Thanks for the heads up. The Waxpad editor has been tested for FF1.5 and IE6, but the centering technique itself is pure valid html+css, so I'm not sure why Safari would balk.
- Zeerus, on 10/12/2007, -0/+3ummm, Dave Shea has the same thing over at Mezzoblue on his SXSW panel page, outlining the problem and a few solutions to it, much easier to implement than this, but it requires the use of a container DIV, I believe. unfortunately, I can't seem tof ind the link in my feed reader
- jkaiser, on 10/12/2007, -0/+3V. 1.5.0.1. I just tried again, and all I get is a blank blue screen.
- lifewithryan, on 10/12/2007, -0/+3Woohoo and it validates...
- mikae1, on 10/12/2007, -0/+3This is a pretty standard vertical centering hack forcing IE into quirks mode.
- jkaiser, on 10/12/2007, -1/+4doesnt work in firefox
- ignorantcow, on 10/12/2007, -0/+21. Unformatted source code.
2. Too much empty filler DIV tags.
3. Too much unnecessary CSS.
Below: A very much better example, with minimal code + neat source for those of us who can actually READ CODE.
http://www.phrogz.net/css/valign_in_body/content.html - cathode, on 10/12/2007, -0/+2I get absolutely nothing but an ugly purple page. FF 1.5
- mdmoya, on 10/12/2007, -0/+2Your code is much cleaner than pikerust's, but (at least in Firefox 1.5.0.1) if you resize the browser smaller than the centered DIV's size, it chops the top off, which is part of why pikerust is saying that his method is new as his doesn't do that.
- Bogtha, on 10/12/2007, -0/+2> Why can't CSS just implement a text-valign element??
CSS already includes that, the property is called vertical-align. But vertical alignment of *text* isn't what you want, you want vertical alignment of *blocks*. - paroxsitic, on 10/12/2007, -1/+3for those who are lazy: http://www.waxpad.com/articles/vcexample.css
- pikerust, on 10/12/2007, -1/+3The technique is valid html and css - Internet Explorer is handled by inducing quirks mode and taking advantage of the fact that IE does not understand the !important directive in CSS.
P.S. thanks for asking about W3C standards; their validator caught a stray div close in the example, which has now been fixed. - rephlektiv, on 10/12/2007, -0/+2doesn't work in konqueror either
- need3d, on 10/12/2007, -1/+3Does this conform to W3C standards? Or is it a CSS hack?
If it conforms then great work! I've been looking for something just like this. - Dangerman, on 10/12/2007, -0/+2@Quade
Hi Mr. Troll, you are wrong. And apparently just started web development. If you had any actual experience writing code before the advent of web standards and accessibility you would be aware of the fact that pretty well everything you said is woefully inaccurate.
Table based pages are smaller? Not by a long shot. Document only serves content? Try describes content in order for other systems to process it. Development time is less? Maybe in Front Page. More browsers? Ever actually used a text based browser? Ever used a command line at all?
To everyone else: I know, don't feed the trolls. Sorry, I haven't had enough coffee. - Zelpus, on 10/12/2007, -0/+2Unfortunately it doesn't work with IE Mac 5.2x but on the other hand not a hell of a lot does (especially now that its not supported anymore). Everything else on a mac it works fine though.
- Rickard, on 10/12/2007, -0/+2Why on earth put all the markup on one line? It's impossible to read.
- MattLat, on 10/12/2007, -0/+2Yep. That's exactly what I've got further up the page.
- Sonic_Molson, on 10/12/2007, -0/+2No digg, very compliacted for what it does, there are better ways that are more browser compatible.
- matriculated, on 10/12/2007, -0/+2Why not just tell the container (div, p , whatever) to behave as a table. Older browser be damned :P
- MattLat, on 10/12/2007, -1/+3If you know what you're doing, development time is much shorter, and your code is a lot less bloated. HTML as a design language is very out of date. The way that we're headed right now is ultimately using xml as a way to organize your data, and using css to display it. By using proper XHTML and adhering to the standards set up by w3c, we're taking one more step in that direction.
Tables definitely have their place - for tabular data. But don't take a step backwards and try to use tables to display your content inappropriately. - decades, on 10/12/2007, -0/+2Ryan, very nice. Much nicer and cleaner than the example posted for this Digg. I've come across your work and website before. Keep it up ^.^
- dep01, on 10/12/2007, -1/+3Ick. That's pretty messy.
- munkt0n, on 10/12/2007, -1/+3hmmm, div soup!
- Bogtha, on 10/12/2007, -0/+2> That's just wrong. You SHOULD use both px size and line-height on certain elements to prevent them from being enlarged by the browser (at least in IE), because of their potential to break layout,
What's more important to somebody attempting to resize the text on a page - being able to read the text, or having the layout get a bit messy? - jonathansull, on 10/12/2007, -0/+1Too bad no Safari support, I can't check it out... No Digg Yet.
- smellinator, on 10/12/2007, -0/+1ok, thanks. FYI, it wasn't intuitive to type in a name FIRST and press "create HTML page". You may want to put some default text in the text box that says "type file name here, and click create" (or something like that).
thanks for letting me play in waxpad - lumpy, on 10/12/2007, -0/+1Why do you need the four "waxpadstylehook" and "waxpadvertcasewaxpadautoid1" nested divs? You could achieve the same effect with the one center div and the body style treatment.
- phmfthacim, on 10/11/2007, -0/+1yea might as well just use tables
- pikerust, on 10/12/2007, -0/+1Waxpad is still in early beta. You should be able to create an account by putting a name and a password into www.waxpad.com (cookies must be enabled). If it works, you will be taken to your site manager screen (gray and silver colour scheme). All the buttons have informative tooltips, so you should be able to find your way around. Put a filename (lowercase letters, no extension) into the text box at the top left and click 'create html page' and it will appear in the file list on the left; clicking on 'edit' brings that file into the editor pane, where you can grab the 'resize' collar for the root div of the page and start building.
If none of this works, thanks for your interest; currently testing has covered Firefox 1.5 and IE6, but work is continuing. - Xoligy, on 10/12/2007, -0/+1It's not quite as simple as just adding it to the specification. It'll take years before it is used widespread enough to actually implement. Anyway, they'll probably address the issue in XHTML 2.
- dep01, on 10/12/2007, -1/+2You = Digg.
- azmoviez, on 10/12/2007, -0/+1Unlike anyone else's examples throuout this thread, the main example stops at the top and left; not hidden when doing an extreme resizing.
Not to say that it's more efficient but it's different than any example given as proof that this is an old CSS trick. - fahrvergnuugen, on 10/12/2007, -0/+1Yeah, it's hosed in Safari. I'm going to take a look and see if I can figure out why (I assume the developer doesn't have access to a Mac or this wouldn't have happened in the first place ;-) )
- yugiohdan6, on 10/12/2007, -0/+1<!-- -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link rel="stylesheet" href="vcexample.css" type="text/css">
</head>
<body>
<div id="waxpadhangerwaxpadautoid1" class="waxpadstylehook">
<div id="waxpadvertcasewaxpadautoid1" class=
"waxpadstylehook">
<div id="waxpadvertpropwaxpadautoid1" class=
"waxpadstylehook"></div>
<div id="waxpadvertseedwaxpadautoid1" class=
"waxpadstylehook">
<div id="waxpadautoid1">
This is div is centered both horizontally and
vertically, without the use of tables.<br>
<br>
Note that the top left corner of this div does not
disappear when the window is smaller than this div is.
<a style="color: rgb(150,150,255);" href=
"waverticalcentering">Back to article</a>.
</div>
</div>
</div>
</div>
</body>
</html> - jeedee, on 10/12/2007, -0/+1Holy crap just use line-height :o
-
Show 51 - 100 of 103 discussions
Browsing Digg on your phone just got easier with our enhancements to the 
© Digg Inc. 2009
— Content created and posted by Digg users is