Posts: 7
Joined: Mon Sep 06, 2010 9:17 pm
Thu Sep 16, 2010 8:28 pm
Help with code
Hello,
How can I make this layout work in blogger?
<!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="nl">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Harmony Dreams | home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container"><!-- container for the whole site-->
<div id="marquee"><!-- marquee box-->
<p>updates go here.</p>
</div>
<div id="wrapper"><!-- box for the other three box elements-->
<div id="img_scroll">
<p>I guess a load of images could go here, but it's also good for text (or maybe captions to the images if you like).</p>
</div>
<div id="navigation">
<p>Links and other navigational tools (like, err... more links?) can go here.</p>
</div>
<div id="content">
<p>Content of the blog. Anything you like (text, pictures, headers) can go here. It's the same width as the 'Marquee' box, but because that one has a scroll bar, it looks wider.</p>
</div>
</div>
</div>
body { background-color:blue } /* because it kind of fits the blog layout, but you can do whatever you like with this */
#container { width:843px; height:600px; background:url("images/hdheader.gif") no-repeat; background-color:white; margin:0px auto; } /* container for whole site, with night sky and Harmony Dreams logo as background image. The stars stopped being animated when I resized and saved it in Paint, I'm afraid. */
#marquee { width:50%; float:right; margin:160px 1% 1% 0; padding:5px; max-height:43px; overflow:auto; border:1px solid black; }
#wrapper { float:left; margin:1% 0 0 2%; }
#img_scroll, #navigation, #content { width:20%; float:left; margin:0 2% 0 0; padding:5px; overflow:auto; border:1px solid black; }
#img_scroll { height:200px; margin-top:40px; }
#navigation { height:220px; margin-top:20px; }
#content { width:50%; height:240px; float:right; margin-right:1%; }
/* note: you can add as much markup to this as you like; fancy borders, text, headers, the whole shebang. This is the skeleton, so to speak. */
</body>
</html>
How can I make this layout work in blogger?
<!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="nl">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1" />
<title>Harmony Dreams | home</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container"><!-- container for the whole site-->
<div id="marquee"><!-- marquee box-->
<p>updates go here.</p>
</div>
<div id="wrapper"><!-- box for the other three box elements-->
<div id="img_scroll">
<p>I guess a load of images could go here, but it's also good for text (or maybe captions to the images if you like).</p>
</div>
<div id="navigation">
<p>Links and other navigational tools (like, err... more links?) can go here.</p>
</div>
<div id="content">
<p>Content of the blog. Anything you like (text, pictures, headers) can go here. It's the same width as the 'Marquee' box, but because that one has a scroll bar, it looks wider.</p>
</div>
</div>
</div>
body { background-color:blue } /* because it kind of fits the blog layout, but you can do whatever you like with this */
#container { width:843px; height:600px; background:url("images/hdheader.gif") no-repeat; background-color:white; margin:0px auto; } /* container for whole site, with night sky and Harmony Dreams logo as background image. The stars stopped being animated when I resized and saved it in Paint, I'm afraid. */
#marquee { width:50%; float:right; margin:160px 1% 1% 0; padding:5px; max-height:43px; overflow:auto; border:1px solid black; }
#wrapper { float:left; margin:1% 0 0 2%; }
#img_scroll, #navigation, #content { width:20%; float:left; margin:0 2% 0 0; padding:5px; overflow:auto; border:1px solid black; }
#img_scroll { height:200px; margin-top:40px; }
#navigation { height:220px; margin-top:20px; }
#content { width:50%; height:240px; float:right; margin-right:1%; }
/* note: you can add as much markup to this as you like; fancy borders, text, headers, the whole shebang. This is the skeleton, so to speak. */
</body>
</html>
