DIV Help!

Question

Tranceramic 0 Newbie Poster

18 Years Ago

Hi! I am having problems with my DIV code that I am trying to use for Myspace. It's fun to work with, but frustrating because I'm not working it properly. I have looked through an HTML book for instructions but still can't fix my problem, but I don't want to give up! So if someone could please look through this code and tell me what I'm doing wrong, I WOULD LOVE YOU! Please and thank you very much!

(The background shows up but the DIV layout doesn't cover all of my original Myspace page.)

Ignore the text, I got this code from a website and I'm trying to customize it. Maybe that's my problem? But it shouldn't be.

<html><head>
<title>Your Site title Here</title>

Category

<a href="">link here</a> 
<a href="">link here</a> 
<a href="">link here</a> 
<a href="">link here</a> 
<a href="">link here</a>

Misc.

Joined/listed: 
Wishlist: 
Adopted: 
Plugs: xxx 
Tag-board:

Credits

Site &copy your name here

Image &copy <a href="http://www.kiseki.net" target="new">Kiseki.net</A> 
Layout &copy <a href="http://www.digik.net" target="new">Digik Designs</A>

</div>
<div style="position: absolute; left:5px; top: 456px; width: 371px;">

About This Layout</head>

This layout is the second I made today. It features a series called Loveless which I have never heard of. I retyped the text it had on some images so I know what it's about now. The character featured is Soubi, a war machine that's designed to protect Ritsuka, who's the main character and they are caught in a war because Ritsuka wants to avenge his dead brother. It sounds quite interesting, although I have never heard or read about it before. 
I found the series' pictures again at Kiseki, but like I said before I think the site went down and was bought by another owner. The images are quite modernized and I thought it'd make a good blog layout by making it div again. I conbined two images together this time (I know I can't stop myself!) and it looks great (or so I think). ^^; 
If you decide to use this layout, write your contents, or in a blog site's case, your entries, write them in between where I said: 
start content 
end content 

Navigation</head>

The navigation is on the right, its in the a div layer, you can change in the index.html. I already indicated where they are. You can change the links to your own of course.

Credits</head>

You MUST NOT EVER remove the link on this layout, I made it, it belongs to <a href="http://www.digik.net" target="new">digik.net</a>. You know I'm only giving it to you for free because it's linkware, I have to have credit, you can't say this is your layout, you didn't make it! So to keep everyone happy, leave the watermark! And if this layout inspires you to make another one, please credit me on your credit page or something.
 
The content of this site is copyrighted to you so you can put your own name on the bottom right-hand side, where it says the site is copyright to you. Just wanna point that out because you might miss it.
 

Extras</head>

I made some avatars and buttons to go with this layout! Add your own site's name onto the blank buttons with your favorite image editing tool, and voila you'll have a custom linking button or signiture!
 
<img src=http://myspace-881.vo.llnwd.net/00326/18/86/326816881_m.jpg>

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

web-design

2 Contributors
1 Reply
136 Views
1 Day Discussion Span
Latest Post 18 Years Ago Latest Post by DianeD

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

DianeD 0 Newbie Poster · Answer 1 · 2006-03-20T22:52:34+00:00

I think this may help you:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Your Site title Here</title>
<!-- <LINK rel="stylesheet" href="testing.css" type="text/css"> -->
<!-- Here's where you would attach the external style sheet like the line above, but I've put the styles already
imbedded into the html page so you could see it.-->
<STYLE type="text/css">
a:visited,a:link {
color: #D96886;;
font-weight: bold;
text-decoration: underline;
}
a:active, a:hover {
color: #8FB681;
font-weight: bold;
text-decoration: underline;
}
h1 {
color: #FFFFFF;
letter-spacing: 1px;
line-height: 150%;
font: bold 22px 150% Tahoma, Arial, sans-serif;
}
h2 {
color: #FFFF00;
letter-spacing: 1px;
line-height: 150%;
font: bold 18px 150% Tahoma, Arial, sans-serif;
}
body {
margin: 0px;
padding:0;
background: #000000;
color: #333333;
}
p.content {
font: 12px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height: 125%;
}
p.ch {
font: small-caps bold 14px Arial, Helvetica, sans-serif;
line-height: 115%;
color: #FFFFCC;
}
p.content2 {
font: 14px Verdana, Arial, Helvetica, sans-serif;
color: #FFFFFF;
line-height: 125%;
}
#hdr{
width: 100%;
height: 75px;
margin: 0;
border: solid #CC9933;
border-width: 0 0 2px 0;
color: #FFFF00;
font-weight: bold;
background-color: #009999;
font: Tahoma, Arial, sans-serif 125%;
}
#container {
width: 98%;
height: 90%;
color:#000000;
border: dashed dashed dashed dashed;
}
#leftcol{
position: absolute;
top: 20%;
left: 20px;
width: 180px;
border: 2px solid #000000;
background: #000000;
color: #333333;
margin: 0px;
padding: 0px;
height: 400px;
}
#rightcol {
margin: 20px 20px 20px 220px;
width: 45em;
border: 2px solid #ffffff;
background: #000000;
color: #ffffff;
padding: 1em;
visibility: show;
position: absolute;
}
#footer {
clear: both; /* no floating objects on either side allowed */
margin: 0;
padding: .5em;
border-top: 1px solid #999999;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
background-color: transparent;
color: #999999;
text-align: center;
width: 100%;
height: 35px;
}
</style>
</head>
<body>
<div id="container">
<div id="hdr">This is the header. You could put an image here also.</div>
<div id="rightcol">
<table>
<tr>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
</tr>
<tr>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
</tr>
<tr>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td>
<td><img src='' width=170 height=132></td></tr>
</table>
<h1>About This Layout</h1>
<p class="content">This layout is the second I made today. It features a series called Loveless which
I have never heard of. I retyped the text it had on some images so I know what it's about now.
The character featured is Soubi, a war machine that's designed to protect Ritsuka, who's the main
character and they are caught in a war because Ritsuka wants to avenge his dead brother. It sounds
quite interesting, although I have never heard or read about it before.<br><br>
I found the series' pictures again at Kiseki, but like I said before I think the site went
down and was bought by another owner. The images are quite modernized and I thought it'd make
a good blog layout by making it div again. I conbined two images together this time (I know I
can't stop myself!) and it looks great (or so I think). ^^;<br><br>
If you decide to use this layout, write your contents, or in a blog site's case, your
entries, write them in between where I said:<br>start content<br>end content<br><br>
</p>
<h2>Navigation</h2>
<p class="content">The navigation is on the right, its in the a div layer, you can
change in the index.html. I already indicated where they are. You can change the
links to your own of course.</p>
<h2>Credits</h2>
<p class="content">You MUST NOT EVER remove the link on this layout, I made it, it belongs
to <a href="http://www.digik.net" target="new">digik.net</a>. You know I'm only giving it
to you for free because it's linkware, I have to have credit, you can't say this is your
layout, you didn't make it! So to keep everyone happy, leave the watermark! And if this
layout inspires you to make another one, please credit me on your credit page or something.<br><br>
The content of this site is copyrighted to you so you can put your own name on the bottom
right-hand side, where it says the site is copyright to you. Just wanna point that out
because you might miss it.</p>
<h2>Extras</h2>
<p class="content">I made some avatars and buttons to go with this layout! Add your
own site's name onto the blank buttons with your favorite image editing tool,
and voila you'll have a custom linking button or signiture!
<img src=http://myspace-881.vo.llnwd.net/00326/18/86/326816881_m.jpg>&nbsp;&nbsp;
<div id="footer"> This is the footer information</div>
</div><!-- END RIGHT COLUMN  -->


<div id="leftcol">
<!-- Start navigation -->
<p class="ch">Category
<p class="content2">
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>


<p class="ch">Category
<p class="content2">
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>


<p class="ch">Category
<p class="content2">
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>
<a href="">link here</a><br>


<p class="ch">Misc.</p>
<p class="content2">
Joined/listed:<BR>
Wishlist:<BR>
Adopted:<BR>
Plugs: xxx<BR>
Tag-board:<BR>


<p class="ch">Credits
<p class="content2">
Site &copy your name here<BR>


<!-- Credits : Don't edit below! -->
Image &copy <a href="http://www.kiseki.net" target="new">Kiseki.net</A><br>
Layout &copy <a href="http://www.digik.net" target="new">Digik Designs</A>
<!-- End of navigation -->
</div><!--  END LEFT COLUMN  -->


</div><!--  END CONTAINER  -->
</body>
</html>

Hope this helps! :eek:
DianeD