• Welcome to The Cave of Dragonflies forums, where the smallest bugs live alongside the strongest dragons.

    Guests are not able to post messages or even read certain areas of the forums. Now, that's boring, don't you think? Registration, on the other hand, is simple, completely free of charge, and does not require you to give out any personal information at all. As soon as you register, you can take part in some of the happy fun things at the forums such as posting messages, voting in polls, sending private messages to people and being told that this is where we drink tea and eat cod.

    Of course I'm not forcing you to do anything if you don't want to, but seriously, what have you got to lose? Five seconds of your life?

... Um help?

Shadowstar

Shadowstar

I SWEAR I WILL GET ACTIVE AGAIN
Yeeeeeah coding hates me also I haven't posted in a while and this place seems like it would give me the most help with this stuff so yep.

Anyway

I'm trying the whole website thing again but I need a little help figuring out what went wrong with the coding. Because.....

Well, see, the content is above the navigation instead of beside it. The footer image won't show up even though I specified a height of 200 pixels and a width of 100%, either. The header shows up, but i want the navigation to run beside it and the header to be on top of the content (which I half-succeeded at doing, the navigation won't do what I want to, but TECHNICALLY, the header IS above the content... Not in the way I want, though), but... Again, the stupid layout won't do what i want it to. Just like every other layout i try to code except for my last one which I didn't like so i deleted.

So I was kinda wondering if anyone could help me because validators don't do anything helpful, the one I put it through told me perfectly fine code was invalid. Just like all the other layouts I make. Sigh.

Oh and I'm using Webs as a webhost. It's the only decent one I could find, I don't have money for a paid host, and I'm not going to give any info to any of the others (cough freehostia which i got ready to try for the free plan but i don't want to put my info in cough) and one of the ones I tried (cough ifastnet sets off my antivirus shizzle and the control panel is hell to use cough) was just... bad. So I don't have too many options here so I'm not going to switch hosts unless there's undeniable proof that Webs is what's screwing it so yeah.

Layout code:
Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>R A P T U R E D </title>
<style>
body {
background-color: #000000;
color: #BFDBF2;
font-size: 11px;
font-family: verdana, arial; 
}

a:link, a:visited, a:active {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: #C9FFED;
text-decoration: none;
}

#conta {
background-color: #121212;  
border-left: #63A4FF 2px dashed;
width: 900px;
}

#content {
background-color: #424242;
border-right: #63A4FF 1px dashed;
padding: 5px;
width: 750px;
margin: 20px;
}

#nav {
background-color: #424242;
border-right: #63A4FF 1px dashed;
width: 150px;
}

#foot {
width: 100%;
height: 200px;
background-image: url ('http://i47.tinypic.com/2hg4o45.jpg');
}

#headr {
width: 750px;
height: 200px;
background-image: url('http://i49.tinypic.com/2s1m7x4.jpg')
}

.forminput, .textinput, .textarea { 
font-size: 9px; 
font-family: georgia; 
vertical-align: middle; 
background-color: #222222; 
color: #929191; 
border-right: #63A4FF 2px dashed;
}

.radiobutton, .checkbox  { 
font-size: 9px; 
font-family: georgia; 
vertical-align: middle; 
background-color: #232323; 
color: #929191; 
border: #000000 0px solid;
}

h1 {
border-bottom: #ABACE0 5px dashed;
}

h2 {
border-bottom: #7679D6 3px dashed;
}

h3 {
border: #6466A1 1px dotted;
}

b {
font-weight: bold;
color: #99F3FF;
}

i {
font-style: italic;
color: #9B6BC2;
}
</style>
</head>
<body>
<div id="conta">
<div id="headr"></div>
<div id="content">
test content text
</div>
<div id="nav"><a href="#">Test Link</a></div>
<div id="foot"></div>
</div>
</body>
</html>

I hope someone can help me I really want to be able to actually finish my webbie this time but somehow I don't see that happening.
 
Ok, from what I can tell of your description of your problem, all of your elements are stacked on top of each other. Your actual HTML code is ok, but the CSS is shaky.

You haven't provided any positioning information for you page's elements. You should tell the elements, with CSS, to float to different parts of the page, so that they don't stack.

Also, there shouldn't be a space between url and the parentheses in CSS. Thats why the image wont show up.
 
Last edited:
okay, the DIV thing is fixed, but the navigation still won't run beside the header like I want it to... And the footer is behind the content and navigation instead of under them.

New code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>R A P T U R E D -- Credits </title>
<style>

body {
background-color: #000000;
color: #BFDBF2;
font-size: 11px;
font-family: verdana, arial; 
}

a:link, a:visited, a:active {
color: #FFFFFF;
text-decoration: none;
}

a:hover {
color: C9FFED;
text-decoration: none;
}

#conta {
background-color: #121212;  
border-left: #63A4FF 2px dashed;
width: 900px;
}

#content {
background-color: #424242;
border-right: #63A4FF 1px dashed;
padding: 5px;
width: 730px;
float:left;
}

#nav {
background-color: #424242;
border-right: #63A4FF 1px dashed;
width: 150px;
float:left;
}

#foot {
width: 100%;
height:150px;
background-image: url('http://i47.tinypic.com/2hg4o45.jpg');
}

#headr {
width: 740px;
height:150px;
background-image: url('http://i49.tinypic.com/2s1m7x4.jpg');
}

.forminput, .textinput, .textarea { 
font-size: 9px; 
font-family: georgia; 
vertical-align: middle; 
background-color: #222222; 
color: #929191; 
border-right: #63A4FF 2px dashed;
}

.radiobutton, .checkbox  { 
font-size: 9px; 
font-family: georgia; 
vertical-align: middle; 
background-color: #232323; 
color: #929191; 
border: #000000 0px solid;
}

h1 {
border-bottom: #ABACE0 3px dashed;
}

h2 {
border-bottom: #7679D6 3px dashed;
}

h3 {
border: #6466A1 1px dotted;
}

b {
font-weight: bold;
color: #99F3FF;
}

i {
font-style: italic;
color: #9B6BC2;
}
</style>
</head>
<body>
<div id="conta">
<div id="headr"></div>
<div id="content">
<h1>Credits</h1>
<ul>
  <li>Brushes</li>
<ul><li><a href=http://www.obsidiandawn.com/>Shattered Glass</a></li>
<li><a href=http://browse.deviantart.com/?qh=&section=&q=flame+brushes+GIMP#/dmtzm0>Flames</a></li></ul>
</ul> 
</div>
<div id="nav"><a href="#">Test Link</a></div>
<div id="foot"></div>
</div>
</body>
</html>

Maybe i should scrap the entire thing and just recode the layout that i had previously that was really simple and actually worked or just give up on this website entirely.
 
No, don't do that. You are so close to getting this.

You should float the nav bar and the content to opposite sides of your container (left and right) instead of both to the same side.

Also, just because you set the width to a certain ammount (150/730), that is the width of the content not the DIV box. The actual width of the DIV is the total amount of margin, padding, and border applied to your DIV. So your content is actually 741px, instead of 730. This might make it too wide, and so the element lower in the page, the nav, get pushed lower. (http://w3schools.com/css/css_boxmodel.asp)

Also, you need to clear the footer.
 
... I got the nav to run beside the header... So that's fixed.

Clearing the footer fixed it's behind-the-content-and-nav-ness~

Thanks for helping, Diz. <3
 
You're welcome! Tell me if the footer doesn't get fixed, cause I might have missed something
 
You must log in or register to reply here.
Back
Top Bottom