Help Putting Border Around Info Already on Page

H

hollsmeags

New Member
This is my code..
I want to add a border around all the links. A nice little box to contain my links,
possible two to seperate logos and design...

I can't figure this out, Im using dreamweaver
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Flash Work</title>
<style type="text/css">
<!--
body, td, th {
font-family: "Trajan Pro";
font-size: 18px;
background-color: #FF0000;
border-top-width: thick;
border-top-style: outset;
border-top-color: #000000;
color: #808080;
}
#apDiv1 {
position:absolute;
width:427px;
height:115px;
z-index:1;
left: 174px;
top: 110px;
background-color: #000000;
}
#apDiv2 {
position:absolute;
width:605px;
height:487px;
z-index:1;
left: 381px;
top: 158px;
border-bottom-color: #FFFFFF;
}
#apDiv3 {
position:absolute;
width:200px;
height:115px;
z-index:2;
}
a:link {
color: #666666;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #00CC33;
}
a:hover {
text-decoration: none;
color: #00CC33;
}
a:active {
text-decoration: none;
color: #FFFF00;
}
#apDiv4 {
position:absolute;
width:795px;
height:425px;
z-index:0;
left: 168px;
top: -234px;
}
.body {
font-style: normal;
line-height: normal;
font-weight: normal;
letter-spacing: normal;
word-spacing: normal;
}
#apDiv5 {
position:absolute;
width:599px;
height:793px;
z-index:2;
left: 263px;
top: 67px;
}
#apDiv6 {
position:absolute;
width:200px;
height:115px;
z-index:3;
}
body {
background-color: #000000;
}
.style14 {
color: #FF0000;
font-family: "Trajan Pro";
font-size: 16px;
}
.style16 {
color: #FFFFFF;
font-weight: bold;
font-family: "Trajan Pro";
}
a {
font-family: Trajan Pro;
color: #FFFFFF;
}
#apDiv7 {
position:absolute;
width:272px;
height:309px;
z-index:3;
left: 206px;
top: 829px;
background-color: #000000;
visibility: inherit;
}
#apDiv {
position:absolute;
width:272px;
height:309px;
z-index:3;
left: 864px;
top: 503px;
background-color: #000000;
visibility: inherit;
}
.style31 {
color: #666666;
font-weight: bold;
font-size: 18px;
}
object {
background-color: #000000;
}
.style32 {
color: #FF0000
}
.style33 {
color: #FFFFFF
}
.style34 {
font-size: 16px
}
.style36 {
font-size: 18px
}
.style39 {
color: #FFFFFF;
font-weight: bold;
font-size: 18px;
}
#apDiv8 {
position:absolute;
width:300px;
height:212px;
z-index:1;
left: 165px;
top: 300px;
}
.style42 {
font-size: 14px;
}
.style46 {
font-size: 24px
}
.style47 {
color: #FFCC00;
font-weight: bold;
font-size: 18px;
}
.style48 {
color: #FFFFFF;
font-weight: bold;
font-size: 24px;
}
.style52 {
color: #00CC33
}
-->
</style>
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body bgcolor="#FFFFFF">
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="517" height="144">
<param name="movie" value="ball.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="ball.swf"
quality="high"
type="application/x-shockwave-flash"
wmode="transparent"
width="517"
height="144"
pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>
</div>
<p align="center" class="style39 style46 style32">Flash Designs</p>
<p align="center" class="style39 style46 style52"><span class="style36"><a href="hertel.html">Hertel Hardware and Plumbing Co Inc</a></span></p>
<p align="center" class="style31"><a href="livewire.html"> The Livewire Band</a></p>
<p align="center" class="style31"><a href="gayfriendly.html"> GayFriendlyBuffalo.com</a></p>
<p align="center" class="style31"><a href="alison.html"> The Alison Pipitone Band</a></p>
<p align="center" class="style31"><a href="index2.html">Splash Intro (hollychristiano.com)</a></p>
<p align="center" class="style48">Logos</p>
<p align="center" class="style39"> <a href="anmLogo.html" class="style33">The ANM Group </a></p>
<p align="center" class="style31">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="865" height="79">
<param name="movie" value="ball.swf" />
<param name="quality" value="high" />
<param name="wmode" value="transparent" />
<embed src="ball.swf"
quality="high"
type="application/x-shockwave-flash"
wmode="transparent"
width="865"
height="79"
pluginspage="http://www.macromedia.com/go/getflashplayer" />

</object>
</p>
<p align="center" class="style31"><a href="welcome.html" class="style14">BACK</a></p>
<div align="center">
<blockquote>
<blockquote>
<blockquote>
<blockquote>
<p class="style42"><span class="style33">&copy;2009 hollychristiano</span>.<span class="style32">com</span></p>
</blockquote>
</blockquote>
</blockquote>
</blockquote>
</div>
<blockquote>&nbsp;</blockquote>
</body>
</html>
you can view here.... Thanks!
http://www.hollychristiano.com/work.html
 
PixelPusher

PixelPusher

Super Moderator
Staff member
My suggestion would be to add an id name to the DIV that holds all the links (that are inside of the P tags) and then style the links from that DIV id name. Like this:

Your Current Code
HTML: 
<body bgcolor="#ffffff">
   <div align="center">
   </div>
   <p class="style39 style46 style32" align="center">Flash Designs</p>
   <p class="style39 style46 style52" align="center">
      <span class="style36">
        <a href="hertel.html">Hertel Hardware and Plumbing Co Inc</a>
        </span>
   </p>....

Try Changing to This
HTML: 
<body bgcolor="#ffffff">
   <div id="content">
      <h3>Flash Designs</h3> <!-- Your Titles -->
      <div class="link">
          <a href="hertel.html">Hertel Hardware and Plumbing Co Inc</a> <!-- Your Links-->
      </div>
      <div class="link">
          <a href="livewire.html">The Livewire Band</a></div>
</div>

The above is an example for one title and one link but you get the idea. No need for all that clutter of SPAN tags and P tags. Just use a DIV for each item, whether it is a title or a link.

The CSS would look like this:

HTML: 
div#content {
/* this centers all the titles and links */
margin-top:5px;
margin-bottom:5px;
margin-left:auto;
margin-right:auto;
}

div#content  h3 {
/* style for the titles */
font:bold 10pt "Trajan Pro", Times, sans-serif;
color:#fff;
}
div.link {
/*  border styles */
border:solid 1px green; 
background-color:#ddd;
padding:5px;
}

div.link a {
/* style for the links (static) */
font: normal 9pt "Trajan Pro", Times, sans-serif;
color:#555;
text-decoration:none;
}

div.link a:hover {
/* style for the links (hover) */
font: normal 9pt "Trajan Pro", Times, sans-serif;
color:green;
text-decoration:underline;
}


I added notes to each style so you what they do. Change the "color" to what you this is aesthetically right for the title text and link text.

Adjust the "border" to change style, thickness, and color.

Adjust the "padding" to what size you want the boxes around the links to be.
 
You must log in or register to reply here.
Top