Forums > Help with DIV layers

Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics

wordstoasong

Jan 20 2008, 12:37 PM

http://www.freewebs.com/tammys-tackshop/

So I have my site. The picture/design. The words in the correct spot.
Now I'm having troubles with layers and making the side links clickable.

I'm on freewebs, so any help there would be great.
Would I make the pages, add the DIV code, or would I stay on the main page and repeat the codes many times for the links I need.

CODE

<html>
<head>

<title>TITLE OF WEBPAGE HERE</title>

</head>

<body>
<style type="text/css">

body {
/* edits the scrollbar and background */
scrollbar-arrow-color: #000000;
scrollbar-track-color:#ffffff;
scrollbar-shadow-color: #ffffff;
scrollbar-face-color: #ffffff;
scrollbar-highlight-color: #ffffff;
scrollbar-darkshadow-color: #ffffff;
scrollbar-3dlight-color: #ffffff;
background-color: #ffffff;
cursor: normal;
background-image:

url("");
background-repeat: repeat-y;
background-align: left;
overflow-x: hidden;  }
a:link{
/* edits all the links */
color: #6a6a6a;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

a:visited{
/* edits all the visited links */
color: #6a6a6a;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

a:hover{
/* edits all the hovered links */
color: #3380c2;
  font:14px century gothic;
text-decoration: none;
text-transform: Uppercase;
letter-spacing: 0px;
cursor:normal;
}

input, select, textarea, iframe.htmleditor,

.textfield, .button {
/* edits the buttons, dropdowns, etc. */
border: 1px solid #000000;
font: 12px century gothic;
background-color: transparent;
color: #000000;
letter-spacing:0px;
}
p {
/* edits all of the paragraphs */
align: justify;

}

b {
/* edits all the bolded words */
color: #3380c3;
font-weight: bold;
letter-spacing:0px;
font: 12px century gothic;
text-transform: none;
}

I, EM {
/* edits all the italic words */
color: #3380c3;
letter-spacing:0px;
font: 12px century gothic;
text-transform:none;
background-color:none;
}

u {
/* edits all the underlined words */
color: #3380c3;
letter-spacing:0px;
font-size: 12px;
text-transform:none;
font-style:none;
background-color:none;
}
body, div {
font: 12px century gothic;
line-height:normal;
color: #000000;
letter-spacing:0px;
text-align:justify;
text-transform:none;

}
</style>

<div style="position: absolute; width: ##px; height: ##px; margin-left: 0px; margin-top: 0px; overflow: auto;">
<img src="IMG URL OF BACKGROUND IMAGE HERE">

</div>
<div style="position: absolute; width: ##px; height: ##px; margin-left: ##px; margin-top: ##px; overflow: auto;">
TYPE YOUR TEXT CONTENT HERE

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

digitalfragrance

Jan 20 2008, 12:55 PM

Here's what you can do for your links - you should only need one DIV layer to control them, and each link should lead to a separate page.

CODE

<div style="position: absolute; width: ##px; height: ##px; margin-left: ##px; margin-top: ##px; overflow: auto;">
<a href="URL OF PAGE HERE">TITLE OF LINKED PAGE</a>
<br>
<a href="URL OF PAGE HERE">TITLE OF LINKED PAGE</a>
<br>
<a href="URL OF PAGE HERE">TITLE OF LINKED PAGE</a>
<br>
</div>

wordstoasong

Jan 20 2008, 01:15 PM

Thank you.
Instead of "LINK TITLE" would I be able to use images?
How would the code change?

digitalfragrance

Jan 20 2008, 04:22 PM

Sure, it would look like this:

CODE

This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.