Hi,
I need to recreate the image that I'm posting. I was trying to utilize <p class> within a <div> and <span class> within the <p> but couldn't do it. I also want the links to be rollover (change to different color on hover). Please post CSS and HTML, thanks. This is what I have so far:
This is for the text:
.test {
font-family: Arial, sans-serif;
color: #666666;
font-size: 14pt;
line-height: 18pt;
text-decoration: none;
text-indent: 0px;
margin-top: 8px;
margin-left: 8px;
}
and this is for the container:
position:absolute;
left:100px;
top:100px;
width:243px;
height:428px;
visibility: visible;
background-color: #FFEBFF;
border-style: solid;
border-width: 1px;
border-color: #FF9900;It's just a couple of headings and a couple of lists in a div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
<style type="text/css">
#container {
left:100px;
top:100px;
width:243px;
height:428px;
visibility: visible;
background-color: #FFEBFF;
border-style: solid;
border-width: 1px;
border-color: #FF9900;
padding: 1em;
}
#container h3 {
font-family: sans-serif;
font-weight: normal;
margin-bottom:0;
}
#container ul {
font-family: Arial, sans-serif;
color: #666666;
font-size: 14pt;
line-height: 18pt;
text-decoration: none;
text-indent: 2em;
list-style: none;
margin:0; padding:0;
}
#container a {
text-decoration: none;
color: #666;
}
</style>
</head>
<body>
<div id="container">
<h3>Links</h3>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
</ul>
<h3>Addresses</h3>
<ul>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
</ul>
</div>
</body>
</html>Thanks, it works fine by itself. Though, I have another problem; when I put the code in my page the Address text gets wrapped down like this:
1234 Test
Drive
1234 Test
Drive
..and so on.
I changed the point size to 10pt., tried fixing it with padding, margins and indentation, but couldn't fix it.
I also included in the container: "position: absolute;" so the container is placed where I want it. But, with Mozilla, the container appears about 50 pix. wider. How can I resolve these problems? Thanks.You must have something else in your page that's changing the dimensions of the UL or the LI if the DIV is staying the same size. I see absolutely no difference in size between IE and FF except the tiny change from the box model. BTW, it's best to size with something other than pt.s for the screen.
I need to recreate the image that I'm posting. I was trying to utilize <p class> within a <div> and <span class> within the <p> but couldn't do it. I also want the links to be rollover (change to different color on hover). Please post CSS and HTML, thanks. This is what I have so far:
This is for the text:
.test {
font-family: Arial, sans-serif;
color: #666666;
font-size: 14pt;
line-height: 18pt;
text-decoration: none;
text-indent: 0px;
margin-top: 8px;
margin-left: 8px;
}
and this is for the container:
position:absolute;
left:100px;
top:100px;
width:243px;
height:428px;
visibility: visible;
background-color: #FFEBFF;
border-style: solid;
border-width: 1px;
border-color: #FF9900;It's just a couple of headings and a couple of lists in a div.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Conforming HTML 4.01 Transitional Template</title>
<style type="text/css">
#container {
left:100px;
top:100px;
width:243px;
height:428px;
visibility: visible;
background-color: #FFEBFF;
border-style: solid;
border-width: 1px;
border-color: #FF9900;
padding: 1em;
}
#container h3 {
font-family: sans-serif;
font-weight: normal;
margin-bottom:0;
}
#container ul {
font-family: Arial, sans-serif;
color: #666666;
font-size: 14pt;
line-height: 18pt;
text-decoration: none;
text-indent: 2em;
list-style: none;
margin:0; padding:0;
}
#container a {
text-decoration: none;
color: #666;
}
</style>
</head>
<body>
<div id="container">
<h3>Links</h3>
<ul>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
<li><a href=http://www.webdeveloper.com/forum/archive/index.php/"#">www.link1.com</a></li>
</ul>
<h3>Addresses</h3>
<ul>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
<li>1234 Test Drive</li>
</ul>
</div>
</body>
</html>Thanks, it works fine by itself. Though, I have another problem; when I put the code in my page the Address text gets wrapped down like this:
1234 Test
Drive
1234 Test
Drive
..and so on.
I changed the point size to 10pt., tried fixing it with padding, margins and indentation, but couldn't fix it.
I also included in the container: "position: absolute;" so the container is placed where I want it. But, with Mozilla, the container appears about 50 pix. wider. How can I resolve these problems? Thanks.You must have something else in your page that's changing the dimensions of the UL or the LI if the DIV is staying the same size. I see absolutely no difference in size between IE and FF except the tiny change from the box model. BTW, it's best to size with something other than pt.s for the screen.