Something's wrong with my code, of course., The divs do not follow through! D: Options

[novemberwind]

It's been quite a while since I've been here, but then again, I haven't bothered coding a layout until now. The thing is, I've always used tables, but I wanted to avoid that by having everything in divs. The problem is, I don't quite understand how divs work yet, and I'm not the patient type. I swear I'm doing everything right, but for some reason, even the images won't show.

Perhaps it's because I shoved everything in a div code? I don't know.

Here's my code, if you feel like staring at the insanity.

CODE

<script type="text/javascript">document.title = "REMINISCENCE//because we can only hope for the best//"</script>

<style type="text/css">
table.navigation, table.footer { display:none; }

.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone,
/* width of the comment page */
{width:500px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer, .search, .searchbarborder
{display: none;}
</style>


<style type="text/css">
/* in my heart, spring has arrived */
/* Lyrics from HANA WA SAKURA KIMI WA UTSUKUSHII */
/* Song by IKIMONOGAKARI */
/* put up on 2.18.08 */
/* previous on 4.12.07 */
/* novemberwind aka Alexandra */

div#everything {
    background-color: transparent;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    margin-top: -200px;
    text-align: center;
    min-width: 550px;
}
div#imagehead {
    position: absolute;
    text-align: left;
top: 0px;
    left: 0px;
    width: 700;
    height: 600;
    }



body
{cursor: default;
background-color: #FFFFB3;

div#blogbody {
    position: absolute;
    text-align: left;
top: 580px;
    left: 55px;
    width: 450;
    height: 100%;
background-image: url(http://img170.imageshack.us/img170/9104/xspring08bgkt9.jpg);
background-repeat: repeat-x;
background-position: top left;
    }

body
{cursor: default;
background-color: #FFFFB3;


div.blogheader, .caption
{background-color: #FFFF99;
background-repeat: no-repeat;
background-position: bottom center;
font: normal 19pt times;
text-transform: lowercase;
line-height: 4px;
color: #FFFFFF;
letter-spacing: 2px;
background-color: none;
text-align: left;}

h4
{ background-color: #FFFF99;
font: italic 14pt times;
text-transform: lowercase;
line-height: 5px;
color: #B9CA8A;
letter-spacing: 2px;
background-color: none;
text-align: left;
padding-left: 7px;
padding-bottom: 9px;
border: none;}

b, strong
{font-weight: bold;
color: #000000;}

i, em
{font-weight: italic;
color: #00000;}

u
{text-decoration: none;
color: #8A1000;
border-bottom: 1px solid #000000;}

hr
{color: #B9CA8A;}

select, iframe.htmleditor, .button
{border: 1px solid #8A1000;
font: normal 8pt verdana;
background-color: #FFFFB3;
font-color: #8A1000;}

textarea, .textfiled, input
{background-color: #FFFFB3;
font: normal 7pt Tahoma #8A1000;
line-height: 9pt;
border: 1px solid #8A1000;}

div.navheader
{background-color;
font: bold 14pt tahoma;
text-transform: uppercase;
line-height: 14px;
color: #FFFFFF;
letter-spacing: 2px;
background-color: none;
text-align: left;
padding-left: 6px;
padding-bottom: 10px;
border: none;}

.section
{font: normal 8pt verdana;
color: #FFFFFF;
line-height: 12pt;
text-align: right;
background-color: none;
border: none;}

font,td,p,xmp
{color: #648888;
font-family: verdana;
font-weight: normal;
font-size: 8pt;
text-align: justify;
line-height: 12pt;}

table.blogbody tr td
{width: 0px;
padding-left: 0px;}

table.blogbody
{font: normal 8pt verdana;
color: #8A1000;
line-height: 12pt;
text-align: justify;
background-color: none;
border: none;
width: 450px;}

a:link
{font: normal 8pt verdana;
color: #000000;
line-height: 12pt;
text-transform: none;
text-decoration: none;
cursor: default;}

a:active
{font: normal 8pt verdana;
color: #000000;
line-height: 12pt;
text-transform: none;
text-decoration: none;
cursor: default;}

a:visited
{font: normal 8pt verdana;
color: #8A1000;
line-height: 12pt;
text-transform: none;
text-decoration: italic;
cursor: default;}

a:hover
{font: normal 8pt verdana;
color: #000000;
line-height: 12pt;
text-transform: none;
text-decoration: none;
cursor: default;}

div.sidebar
{background-color: transparent;
font: normal 8pt verdana;
color: #8A1000;
line-height: 12pt;
text-align: justify;
background-color: none;
border: none;
width: 100px;
top: 600px;
left: 530px;}


div.navheader2, .caption
{background-color: #FFFF99;
background-repeat: no-repeat;
background-position: bottom center;
font: normal 19pt times;
text-transform: lowercase;
line-height: 10px;
color: #FFFFFF;
letter-spacing: 2px;
background-color: none;
text-align: center;}



</style>


<img src=”http://img441.imageshack.us/img441/3735/xspring08gz1.jpg”></div>
    
<div id=”sidebar”>
<div id=”navheader2”>Myself</div>
<img src=“http://img239.imageshack.us/img239/5500/fujiwarasan18hf3.png”><br>College bound female, <b>novemberwind</b>. Given the name <i>Alexandra</i>, born the <b>13th day of the 11th month</b>. Wishes she could be more than just semifluent in <i>Japanese</i>, because 4 years of studying it isn’t enough. Listens to <b>Ellegarden</b>, <i>Base Ball Bear</i>, AKFG, and other Japanese bands, with the occasional Josh Groban and Regina Spektor.<br>

<div id=”navheader2”>Navigate</div>
<a href=”http://www.xanga.com”>Home</a><br>
<a href=”http://www.xanga.com/signin.asp”>Enter</a><br>
<a href=”http://www.xanga.com/private/home.aspx”>Private</a><br>
<a href=”http://www.xanga.com/private/SubscribeTo.aspx?user=novemberwind”>Watch</a><br>

<div id=”navheader2”>Layout</div>
The image is from the booklet of the single <b>Hana Wa Sakura Kimi Wa Utsukushii</b> (Flowers are Cherry Blossoms, You are Beautiful), and likewise, the lyrics are to the title song of the release. Edited with Fireworks MX because Photoshop hates me. Listen to the song <a href=” http://www.divshare.com/download/3814196-5c1”>here</a>. The fonts used are High Tower Text and Sana Font.

</div>
<div id=”blogbody”>

Thanks in advance, I was hoping to put up this layout today but it seems like I can't.

[MissHygienic]

Your problem lies within not setting positions within your CSS. You're doing things right, it's just that you've not positioned them, and when you have, you're not using them. So you want to position a navigation and the content, for example. You can't just put "div#everything" and set every single thing in there.

You'd do:

CODE

<style>
div.navigation {
background-color: XXX;
font-family: XXX;
margin-left:10px;
margin-top:50px; }</style>

And then for the content, you also have to set specific positions.

[novemberwind]

I assumed that by setting "top" and "left", I'd be positioning the divs relative to the top and left side of the page.

e.g.,

CODE

div.sidebar
{background-color: transparent;
font: normal 8pt verdana;
color: #8A1000;
line-height: 12pt;
text-align: justify;
background-color: none;
border: none;
width: 100px;
top: 600px;
left: 530px;}

Some of the divs lack positioning because they are within positioned divs, and they exist solely for bg color of the text, etc.

Is using the "top" and "left" part wrong? I haven't grasped the idea of margins.

[venti-anemoi]

Have you tried changing it to "margin-top" and "margin-left"? It could be as simple as that. Or not. I've found that divs are temperamental in xanga, and even if you get them aligned in one browser they may not be in another. >_<

For your image code, there's no beginning div tag. It gives the image code and then </div>, but there's no <div> to begin with.