Help - Search - Members - Calendar
Full Version: Argh!
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
GunsNRachel
Nov 6 2007, 01:51 PM
wesbite
Why in the heck is the text area on the right down so far?

heres my code:
CODE
<html>
<style type="text/css">
body {
background-image:url(http://i23.tinypic.com/5dur2p.png);
background-color:#;
background-position:top left;
background-attachment: fixed;
background-repeat:repeat;}


</body>
</html>



<html><head><title>loneliness</title></head>
<style>
body
{
font-family: tahoma;
font-size: 11px;
color: white;
text-align: justify;
line-height: 10px;
background-repeat: repeat-y;
background-color: ;
cursor: crosshair;}

a:link, a:visited, a:active
{font: 14px times new roman;
color: #white;
font-weight:normal;
text-decoration: none;
border-bottom: 0px dashed #000;
line-height: 10px;}

a:hover
{font: 14px times new roman;
color: #white;
font-weight:normal;
text-decoration: none;
border-bottom: 0px dashed #D5D4C3;
line-height: 10px;}

.head {
font: 18px tahoma;
color: #fff;
font-weight: normal;
text-transform: normal;
text-align: right;
line-height: 14px;
letter-spacing: 0px;
background-color: #yellow;
border-bottom: 0px dashed #000;
cursor: crosshair;}

.head2 {
font: 18px tahoma;
color: #000;
font-weight: none;
text-transform: lowercase;
text-align: right;
line-height: 10px;
letter-spacing: 0px;
background-color: transparent;
border-bottom: 3px dashed #3E2F4E;
cursor: crosshair;}

.nav:link, .nav:active, .nav:visited
{color: #000;
font: 14pt times new roman;
font-weight: none;
text-decoration: none;
background-color: #white;
border-bottom: 0px dashed #fff;
text-indent: 4px;
letter-spacing: -1px;
display:block;
line-height: 12px;
cursor: crosshair;
}

.nav:hover
{color: #000;
font: 14pt times new roman;
font-weight: none;
background-color: #white;
letter-spacing: -1px;
text-indent: 4px;
text-align: left;
border-bottom: 0px dashed #fff;
text-decoration: none;
text-transform: lowercase;
font-weight: none;
display:block;
line-height: 12px;
cursor: crosshair;
}

i,em,u {color: #000; font-family: georgia; font-size: 9px; line-height: 8px;}
b,strong {color: #000; font-family: georgia; font-size: 12px; line-height: 8px;}
</style>


<body LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 background="">
<img src="LOGOTHINGWILLGORIGHTHERE!!!!!!!!" style="position: absolute; left: 0px; top: 20px">

<!-- about -->
<div style="position: absolute; left: 150; top: 425; width: 170; background-color: C3EAF4; opacity: 50%;">
<div class="head">Navigation</div>
<div class="head2"></div>
<a href="http://takemeawaylayouts.com/newhome.html">Home</a><br>
<a href="http://takemeawaylayouts.com/layouts.html">Layouts</a><br>
<a href="http://takemeawaylayouts.com/aboutme.html">About Me</a><br>
<a href="http://takemeawaylayouts.com/aboutthesite.html">About the Site</a><br>

<div style="background-color: C3EAF4;">
<div class="head">Contact Me</div>
<br>
<a class="nav" href="www.URLHERE.com">Link</a>
<a class="nav" href="www.URLHERE.com">Link</a>
<a class="nav" href="www.URLHERE.com">Link</a>
<a class="nav" href="www.URLHERE.com">Link</a>
<br>

<div style="background-color: C3EAF4;">
<div class="head">Credits</div>
Layout by: Rachel, Take Me Away Layouts
</div>

<!-- post -->
<div style="position: absolute; left: 330; top: 425; width: 440;">



<div style="background-color: C3EAF4;">
<div class="head">Whatever</div>
<div class="head2">Yup</div>

Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here



help me?!
tokyo-rose
Nov 6 2007, 01:58 PM
It could be that you're missing a final closing DIV tag for the positioning. Put one after the "content and junk" part and see what happens.
GunsNRachel
Nov 6 2007, 02:15 PM
That didn't work =(
digitalfragrance
Nov 6 2007, 02:34 PM
Hvae you tried using "margin-left" and "margin-top" instead of left and top?
GunsNRachel
Nov 6 2007, 08:23 PM
that didn't work either =\
Blaqheartedstar
Nov 8 2007, 03:19 AM
you have far too many style codes and your <html> <body> and <head> tags are miss used and for some you have too many.

Here your layout fixed using some of my codes to match yours please take into account how the codes look and how different they are from yours you have too many divs in one thus adding a ton of confusion
CODE
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>loneliness</title>
<script>window.status="anything can go here";</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="en-us">
<meta name="description" content="site description here">
<meta name="keywords" content="keywords here">
<meta name="author" content="your name@urlhere.com">
<meta name="copyright" content="your name@urlhere.com">
<meta name="rating" content="general">
</head>



<body>
<style type="text/css">
body {background-color:ffffff; background-image:url('http://i23.tinypic.com/5dur2p.png'); background-repeat: repeat; margin:0px; font-family: tahoma; font-size: 11px; color: #ffffff; text-align: justify; line-height: 10px; background-color:; cursor: crosshair;}

a, a:link, a:active, a:visited {font-family: times new roman; font-size: 14px; color:#ffffff; text-decoration: none; line-height: 10px;}
a:hover {font-family: times new roman; font-size: 14px; color:#ffffff; text-decoration: none; line-height: 10px;}
a:link img, a:visited img {filter: none;border:0px}


.head {display:block; font: 18px tahoma; color: #ffffff; font-weight: normal; text-transform: normal; text-align: right; line-height: 14px; letter-spacing: 0px; background-color: #46B9EA; border-bottom: 0px dashed #000; cursor: crosshair;}

.head2 {display:block; font: 18px tahoma; color: #000; font-weight: none; text-transform: lowercase; text-align: right; line-height: 10px; letter-spacing: 0px; background-color: transparent; border-bottom: 3px dashed #3E2F4E; cursor: crosshair;}

.post{position: absolute; left: 330; top: 425; width: 440; background-color: C3EAF4;}
.navigation {position: absolute; left: 150; top: 425; width: 170; background-color: C3EAF4; opacity: 50%;}

.link{ display: block; height:14px;z-index:1;font-family: Times New Roman, sans-serif;!important; font-size:14pt!important; color:3BA2B5!important; text-transform: none; text-align:left!important; padding-left: 6px!important; letter-spacing: -1px; text-indent: 4px; cursor: crosshair;}
.link:hover{ display: block; height:14px;text-align:left!important;  z-index:1; font-family: Times New Roman, sans-serif;!important; font-size:14pt!important; color:000000!important; text-transform: none; padding-left: 6px!important; letter-spacing: -1px; text-indent: 4px; cursor: crosshair; text-transform: lowercase;}


i,em,u {color: #000; font-family: georgia; font-size: 9px; line-height: 8px;}
b,strong {color: #000; font-family: georgia; font-size: 12px; line-height: 8px;}
</style>


<img src="http://i22.tinypic.com/209ivjt.png" style="position: absolute; left: 5px; top: 190px">

<!-- about -->
<div class="navigation">
<span class="head">Navigation</span>
<a href="http://takemeawaylayouts.com/newhome.html">Home</a><br>
<a href="http://takemeawaylayouts.com/layouts.html">Layouts</a><br>
<a href="http://takemeawaylayouts.com/aboutme.html">About Me</a><br>
<a href="http://takemeawaylayouts.com/aboutthesite.html">About the Site</a><br>

<span class="head">Contact Me</span>

<a href="http://www.URLHERE.com" class="link" >Link</a>
<a href="http://www.URLHERE.com" class="link">Link</a>
<a href="http://www.URLHERE.com" class="link">Link</a>
<a href="http://www.URLHERE.com" class="link">Link</a>

<span class="head">Credits</span>
Layout by: Rachel, Take Me Away Layouts
</div>

<!-- post -->
<div class="post">
<span class="head">Whatever</span>
<span class="head2">Yup</span>

Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here Put content and junk here


</div>
GunsNRachel
Nov 8 2007, 02:50 PM
That doesn't look right... was i supposed to change something on that code?
Blaqheartedstar
Nov 8 2007, 07:59 PM
what? *confused*
GunsNRachel
Nov 8 2007, 08:33 PM
I'm not sure, heh. I'm scraping this idea though and starting over. When I'm making the text areas what should I use? Tables, frames, divs, etc. =( I'm so confused. There's so many options
Blaqheartedstar
Nov 8 2007, 10:28 PM
textareas are the boxes that carrry codes to copy
if you mean areas in which content goes on

i would say use tables if you want to center and use more than one div example
http://www.silentatmosphere.com/

or you can just just divs
http://www.silentatmosphere.com/anotherworld/
but when it comes to headers use the code i did not the div class=header1 thing you had going on you can always use h1, h2, h3 etc.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.