PDA

Click to See Complete Forum and Search --> : whats the best way for this

jisecup
06-29-2007, 12:49 PM
i want to set up my webpage to what i have created below. I want the whitet space to be the pages that load and the text links on the left to stay stationary with hover over. Im new to this and not sure the best route to start with. any input would be appreciated.

http://i33.photobucket.com/albums/d76/jisecup/Untitled-1.jpg
Tweak4
06-29-2007, 03:11 PM
Offhand, I would say divs and CSS should do the trick. I would put the whole page in a container of some sort, and set the overflow to hidden (to eliminate any scrollbars). Then build the "black" parts of your layout. Once you get to the "white" part, position a div with it's overflow set to auto. That way, the page as a whole will not have scrollbars, and will remain stationary, but if your content extends beyond the boundaries of the white area, it will have it's own scroll bar...
Of course, that's just off the top of my head...
jisecup
06-29-2007, 03:13 PM
would puttin it in frames be a bad thin? (sorry my g key doesnt work)
WebJoel
06-29-2007, 04:14 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title></title>
<style type="text/css">
* {border:0; padding:0; margin:0;}/* Set everything to "zero" */

body {min-height:100%; height:101%;
font:x-small Arial, Verdana, sans-serif;
voice-family: "\"}\"";voice-family:inherit;
font-size:small;/*for IE 5.5 */
} html>body {font-size:small; height:auto;}/* Assist IE6 & <, 100% height */
font-size: small; voice-family: "\"}\"";
voice-family: inherit; font-size: medium;} /* Assist IE rendering height, keyword-font sizes, etc. */

p {font-size: 90%; line-height:1.3em; margin:12px 0 2px 0;}
h1, h2, h3, h4, h5, h6 {font-family: 'times new roman', arial, verdana, serif; background-color:none;
font-style:normal; font-variant:normal; font-weight:normal; margin:14px 0 4px 10px;}
h1{font-size: 1.93em;}
h2{font-size: 1.72em;}
h3{font-size: 1.52em;}
h4{font-size: 1.42em;}
h5{font-size: 1.32em;}
h6{font-size: 1.21em;}
</style>
<style>
body {background-color:black;}
.navs {position:absolute; left:25px; top:150px;}
.navs li {display:inline; margin:0 3px;}
.navs li a {color:white}
.navs li a:hover {}
</style>

<script type="text/javascript"><!--
// -->
</script>
<link rel="shortcut icon" href="favicon.ico"><!-- path to your favicon -->
</head>
<body>

<div style="width:auto; border-top:black solid 75px; border-left:200px solid black; border-bottom:75px solid black; padding:25px; background-color:white;">

<h1>First Level Header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus.
Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et,
volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac
dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus.
Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla
mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum
metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor
lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan
turpis at erat.</p>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Morbi lacus felis, euismod at, pulvinar sit amet, dapibus eu, eros.
Etiam tellus. Nam vestibulum porttitor urna. Phasellus aliquet pretium
quam. Proin pharetra, wisi nec tristique accumsan, magna sapien pulvinar
purus, vel hendrerit ipsum tellus at ante.</p>

<p>The WHITE part here will EXPAND vertically to accomodate more text</p>
</div>

<ul class="navs">
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>

</body>
</html> That top, left and bottom "black" sections look like BORDERS to me... so, make a DIV with a border-top, border-left and border-bottom, thick as you want & black, pad the DIV for the content, backgrond-black for the BODY (in STYLE), and absolute-position the UL 'navs'.

About a 3-minute write-up here. :)
Horton
06-29-2007, 05:50 PM
hey i'am a new guy and i would like to have some ones input. I lave a code that i'am having trouble understanding how to finish it. OK the code looks like this (http://supportcodes.com/top6.html)

and here is the code
_______________________________________________
<table border="3" width="340" cellpading="3" cellspacing="3">
<tr>
<td width="200" id="preview" align="center" rowspan="6">html/text content </td>

<tr>
<td><form>
<input type="button" value="cell-1" name="button1" onClick="preview.bgColor='00FFFF'">
</form></td>
<td><form>
<input type="button" value="cell-2" name="button2" onClick="preview.bgColor='00ff00'">
</form></td>
</tr>

<tr>
<td><form>
<input type="button" value="cell-3" name="button3" onClick="preview.bgColor='00CCFF'">
</form></td>
<td><form>
<input type="button" value="cell-4" name="button4" onClick="preview.bgColor='00CC00'">
</form></td>
</tr>

<tr>
<td><form>
<input type="button" value="cell-5" name="button5" onClick="preview.bgColor='0099FF'">
</form></td>
<td><form>
<input type="button" value="cell-6" name="button6" onClick="preview.bgColor='009900'">
</form></td>
</tr>
</table>
_______________________________________________

OK i think once you see it you well know what i need, but just for clarification ween the background "preview" changes color i would like it to change to a box with a html/text capabilities in a scroll box.:confused:
WebJoel
06-29-2007, 06:44 PM
Okay 'new guy', -this is called "hijacking a thread" to present your problem in the 'thread' of someone else's.
Please start a "new thread" of your own. :)

hint: a few errors could be cleaned up. See screenshot. :) Missing !doctype probably being the one that makes a difference.