View Full Version : Stupid HTML Question
Like, I mean, really stupid.
I haven't HTML'ed in a long time, so I, um, forgot some stuff. Lots of stuff.
I'm starting a new blog, and for the "Under Contruction" page I'm trying to just display some text in the middle of the window.
How do I do that? I know about the VALIGN and HALIGN attributes, but I forgot, um, where they go. Of course, they've probably been deprecated since the last time I HTML'ed. :D
Thanks.
Well, there are a couple of ways to do it. If you're just displaying that text and that text only, the easiest way is with a table.
<table height="100%" width="100%">
<tr>
<td align="middle" valign="middle">
YOUR TEXT HERE
</td>
</tr>
</table>
That's the basic quick and dirty way to do it. If you want to see something a little more advanced, let me know. Also, if this doesn't work, try substituting "center" for "middle" in the alignment attributes. I avoid using tables myself (I prefer to do all my designs entirely in CSS), so I tend to forget if it's "middle" or "center" in those attributes.
Well, there are a couple of ways to do it. If you're just displaying that text and that text only, the easiest way is with a table.
<table height="100%" width="100%">
<tr>
<td align="middle" valign="middle">
YOUR TEXT HERE
</td>
</tr>
</table>
That's the basic quick and dirty way to do it. If you want to see something a little more advanced, let me know. Also, if this doesn't work, try substituting "center" for "middle" in the alignment attributes. I avoid using tables myself (I prefer to do all my designs entirely in CSS), so I tend to forget if it's "middle" or "center" in those attributes.
It's "center." I remember that much. :D
I tried putting the align attributes in a table, but I didn't know how to make the table fill the window.
Quick and dirty works here. It's a "Coming Soon" type of page, so I'm not worrying about CSS. :)
Thanks a bunch!
It'd be quicker to do it with CSS.
It'd be quicker to do it with CSS.
Not necessarily. CSS is great and all, but it's not always the quickest or most efficient. fcgriz's example with a "plain" HTML table works just fine. Getting this to work in CSS, though, is a bit convoluted. People have struggled with this particular CSS problem for a while and this (http://www.jakpsatweb.cz/css/css-vertical-center-solution.html) is a pretty decent solution.
<style type="text/css">
body, html {height: 100%;}
#outer {height: 100%; overflow: visible;} /* or without overflow */
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%} /* for explorer only */
/* optional: #inner[id] {position: static;} */
</style>
<body>
<div id="outer">
<div id="middle">
<div id="inner">
any text
any height
any content, for example generated from DB
everything is vertically centered
</div>
</div>
</div>
</body>
There is also this (http://www.quirksmode.org/css/centering.html) solution that, OMG, uses a table!
Or do you have a magic CSS pill to shorten this?
Yeah, CSS is overkill in this situation. As much as I like CSS, for something like this, it's just way more than you need to mess with.
Ignore me... i mis-read....
Or do you have a magic CSS pill to shorten this?
<html>
<head>
<style type="text/css">
#content {text-align: center}
#buffer {height: 48%}
</style>
</head>
<body>
<div id="buffer"></div>
<div id="content">Under Construction</div>
</body>
</html>
Works on IE, Gecko, and Webkit (webcore).
Wouldn't using an inline style tag be the easiest way to do this?
<table height="100%" width="100%">
<tr>
<td style="text-align:center; vertical-align:middle;">
YOUR TEXT HERE
</td>
</tr>
</table>
I find HTML tags clumsy compared to just using style tags everywhere...
Wouldn't using an inline style tag be the easiest way to do this?
Using the inline style kills one of the biggest benefits of using CSS because the presentation is no longer separated from the content.
And fcgriz already posted an even shorter table example.
Works on IE, Gecko, and Webkit (webcore).
That's good, but it's not truly centered. If you use a large font or want to center a moderately tall image, it doesn't work.
Using the inline style kills one of the biggest benefits of using CSS because the presentation is no longer separated from the content.
What he said. CSS is wonderful, but it has its limitations. In most cases, it is the most efficient way to do your work. However, in some cases, it's the least efficient way. In this case, tables are best, inline styles are okay, and CSS is flat-out inefficient.
Yeah, CSS is overkill. I just honestly forgot that you could define HTML tables by percent, not just by pixels.
I can't wait for CSS3, though. Rounded tables, quick and easy! Except that they'll be way overused, like that godawful <BLINK> tag was, back in its heyday. :D
That's good, but it's not truly centered. If you use a large font or want to center a moderately tall image, it doesn't work.
Perhaps... but he was looking for an under construction page... aka a static page. Adjust the height percentage to match the content and you're set.
In this case, it's a way that CSS does the job, for what he needs.
Besides, you just wanted something shorter then what you wrote. ;)
Check it:
mog.me.uk
:D
I figured out how to FTP, change DNS settings and all of that stuff. I know that's probably not impressive to any of you, but I'm new to all of this. Be gentle.
I like the clean minimalism. :)
For the record, though, there is a body tag that was closed in your source but was never opened. (NB - I have not produced any HTML myself.)
Hahaha, that'd be the second mistake on that coming soon page. For the first, I forgot to add the ; to the end of &hearts for the ♥ symbol. (Safari still displayed it correctly, but not IE.)
My HTML skills are...rusty, to say the least. :lol:
vBulletin® v3.6.4, Copyright ©2000-2013, Jelsoft Enterprises Ltd.