Website Panel - HTML Forums

kyonn · 10-31-2009, 03:44 PM

Hi I'm brand new here.

Trying to figure out how exactly to make a panel like the one shown on the right in my site layout.

Any advice would be helpful.

http://kyonn.freehostia.com/SitePlan/Layout.jpg

Pegasus · 10-31-2009, 05:08 PM

I'm not seeing the image. Can you put it as an attachment to a post instead of linking to it?

kyonn · 10-31-2009, 09:11 PM

Here it is as an attachment

Pegasus · 10-31-2009, 09:54 PM

HTML Code:

<div id="innerwrap">
<h1>Title Goes Here</h1>
<p>Paragraph content goes here.</p>
<div id="content" style="overflow: scroll; height: 400px;">
Pictures and text go here.
</div><!--closes content -->
</div><!--closes innerwrap -->

Try something like that.

kyonn · 10-31-2009, 10:38 PM

Hmm...doesn't seem to be working. Here's what I have so far.

HTML:

<div class="title">Title</div>

<p>Text blah blah blah</p>
<div class="nav"><ul><li>games</li><li>movies</li></ul>

<div class="main">

<h1><div style="text-align: center">Kyonn's Website</div></h1>

</div>
</body>
</html>

CSS:
body { background: #666666; color: brown } /* "black" here controls the color of the text on the page */
h1 { font-size: 18pt; font-family: Arial, Helvetica, sans-serif; font-weight: bold }
p { font: 12pt Arial; text-indent: 0.5in }
p.initial:first-letter { font-size: 200%; } /* Use <p class="initial">...</p> to get this to work */
a:link { color: red } /* unvisited links */
a:visited { color: blue } /* visited links */
a:active { color: yellow } /* active links */
.title { width: 100%, height: 200px; background-color:#666666; position:absolute}
.nav {position: absolute;margin-top:200px; width:200px; float:left;}

Pegasus · 11-01-2009, 12:55 AM

HTML Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Page Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
body {background-color: #666; color: brown; margin: 0px; padding: 0px;}
h1 {font-size: 18pt; font-family: Arial Helvetica sans-serif; font-weight: bold; text-align: center;}
p {font: 12pt Arial; text-indent: .5in;}
p.initial:first-letter {font-size: 200%;}
a:link {color: #F00;}
a:visited {color: #00F;}
a:active {color: #FF0;}
#header {width: 100%; height: 200px; background-color: #666;}
#nav {width: 200px; float: left;}
#main {float: left; display: inline;}
#pix {padding: 20px;}
</style>
</head>
<body>
<div id="header">Title</div>
<p> Text</p>
<div id="nav"><ul><li>games</li><li>movies</li></ul></div>
<div id="main">
<h1>Kyonn's Website</h1>
<p class="initial">More text</p>
<div id="pix">
<img src="image.jpg" alt="Image Description"><br>
<p>Text</p>
</div>
</div>
</body>
</html>

Try something like that.