PDA

View Full Version : blocks of html in document writeIn?

dauvm
09-27-2002, 12:33 AM
Ok, I think that I saw this somewhere a long time ago but I can't find an example anywhere... is there a way to get a block of HTML or CSS to be displayed without being in a linear style with no breaks? I wish I could do something like this:


document.write("
<style type="text/css">
<!--

body {
background-color: #fff;
margin: 0px;
padding: 0px;
}

#Content {
position: absolute;
left: 50%;
width: 500px;
margin-top: 50px;
margin-bottom: 50px;
margin-left: -266px;
padding: 15px;
border: 1px dashed #333;
background-color: #eee;
}

-->
</style>
")


Did I see that somewhere one time or am I stupid? Actually don't comment on that last part :)

-Doug
beetle
09-27-2002, 01:02 AM
I don't know if a way, coz ECMAscipt (read: javascript) uses the newline character for its eol (end of line), and only requires the use of semicolons to separate statments on 1 line, unlike PHP which only recognizes the semicolon for it's eol.
glenngv
09-27-2002, 02:39 AM
you have to make it like this:

document.write(
"<style type='text/css'>" +
"<!-- " +

"body {" +
" background-color: #fff;" +

//other codes here


"-->" +
"</style>"
);
dauvm
09-27-2002, 04:46 AM
hmm that's interesting... that's very helpful though, at least I can still read and make changes to the text easily... thanks!
beetle
09-27-2002, 01:33 PM
A curiosity question...

How come you need to write so much content to the page this way? And if you're doing styles, why not make CSS files and just document.write the <link> ??
dauvm
09-28-2002, 12:36 AM
A relevant question... :)

I know this is the JavaScript forum but if you look at this part of the code...

#Content {
position: absolute;
left: 50%;
width: 500px;
margin-left: -266px;
padding: 15px;

... you can see how you can position a <div> element horizontally by putting it's left border at the center of the screen, and then moving it half the width of the <div> to the left.
Right now there is a funny thing with CSS and HTML where they have phased out the necessary attributes to center a <div> vertically before the new method can replace this function. Basically there's no way to put a small paragraph in the very center of the screen (everyone's screen) with standard compliant code. Some people think that the onset of standards will dampen designer's artistic creativity. For the most part that has no grounds, on the contrary CSS allows more flexibility, but say if a standards-savvy designer wanted a small splash screen that was just a <div> in the center of the screen... too bad, no go... or not that I've seen anyways.
Sooo all I am doing is playing around with different languages in an attempt at a workaround to this problem.
My goal is to center a <div> in the middle of the screen in different browsers and screen resolutions, and have the code verify as XHTML 1.0 with no errors.
If anyone else wants to join in on the fun, be my guest!

-Doug
Graeme Hackston
09-28-2002, 05:04 AM
You can wrap the table in a div but it's valid without it.

<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>center</title>

<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
table {
height: 100%;
width: 100%;
text-align: center;
}
</style>

</head>
<body>
<table>
<tr>
<td>
content
</td>
</tr>
</table>
</body>
</html>
beetle
09-28-2002, 06:39 AM
I know that using

margin-left: auto;
margin-right: auto;

does it, but you need to be using an XHTML doctype
dauvm
09-28-2002, 08:05 PM
Graeme... that's it!
I figured that since the table height attribute wasn't valid in html that it wasn't in CSS either... but your code is valid CSS and XHTML... that's exactly what I was looking for... thanks!!
Graeme Hackston
09-29-2002, 05:02 PM
No problem dauvm.

You might find it informative to remove the html then body styles while checking in different browsers. As far as I can tell the major browsers all require different styles to make this work.
dauvm
09-30-2002, 04:50 AM
Graeme, as written it looks good in Opera 6.05, Mozilla 1.1, and IE 5.5... that's good enough for me :)

Only one thing I'm still working on is that you can't put a div inside the table (from your code above) and set it like

<tr>
<td>
<div style="border-style: dotted">
content
</div>
</td>
</tr>


because the div border spans 100% of the screen width, as opposed to around the text like I am trying to get it... same effect with the <p> tag...

This thread is definately in the wrong forum :) but I really appreciate everyone's thoughts on this.

-Doug
Graeme Hackston
09-30-2002, 11:01 PM
You can set the width of the div using % or px. Or you can use margin-right and margin-left (also % or px)
beetle
10-09-2002, 03:51 PM
What about this?<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Centering Test</title>
<style>
div#content {
width: 500px;
height: 400px;
border: 1px dashed #999;
background-color: #EEE;
color: #000;
padding: 10px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -211px;
margin-left: -261px;
}
html,body {
height: 100%;
margin:0px;
padding: 0px;
}
</style>

</head>

<body >
<div id="content">Yeeehaw! We've got a centered one!</div>
</body>
</html>