I am basically trying to position an image, link and text description similar to happycog.com/about. I tried to follow there code as best I could below:
<div id="links">
<dl>
<dt id="category1">Category Title</dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a></dd>
<div class="sitedesc"><div class="site1"></div><dd>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"site1.com">site1.com</a>This site is one of the best sites available today. You have access to many things and hundreds of other things. They add new things every week.Etc...</dd></div>
#links dt {
font-family: Trebuchet MS, geneva, verdana, sans-serif;
font-size: 0.85em;
background-color:#333300;
width: 45em;
color:#ff0000;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
}
#links dd {
margin-top: 5em;
}
#links a:hover {
text-decoration: none;
color:#ff0000;
}
.sitedesc {
margin: 2px 0 13px 0;
padding: 0;
clear: left;
border: 0;
line-height: 15px;
width: 25em;
height: 5em;
text-align: justify;
}
.site1 {
display: block;
float: left;
margin: 5px 10px 5px 10px;
padding: 0;
width: 100px;
height: 75px;
background: transparent url(HPIM0668.JPG) 0 -75px no-repeat;
}
1. How do I control the font-size of the link and the text description seperately?
2. How come this does not work in IE? The image is positioned up the page too high, the link and text is below and partly under the image to the right side.
Any help would be great. Thanks.The dd needs to be moved into the required position still:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>HappyNow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#links dt {
font-family: Trebuchet MS, geneva, verdana, sans-serif;
font-size: 0.85em;
background-color:#333300;
width: 45em;
color:#ff0000;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
}
#links a:hover {
text-decoration: none;
color:#ff0000;
}
#links dd {
margin: 2px 0 13px 0;
padding: 0;
border: 0;
line-height: 15px;
height: 5em;
width: 25em;
text-align: justify;
}
#links img {
float:left;
margin:0 0.5em 0.5em 0;
}
-->
</style>
</head>
<body>
<dl id="links">
<dt id="category1">Category Title</dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a></dd>
<dd>
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"../Images/flagUS.gif" height="75" width="100">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"site1.com">site1.com</a>This site is one of the best sites available today. You have access to many things and hundreds of other things. They add new things every week.Etc...
</dd>
</dl>
</body>
</html>
<div id="links">
<dl>
<dt id="category1">Category Title</dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a></dd>
<div class="sitedesc"><div class="site1"></div><dd>
<a href=http://www.webdeveloper.com/forum/archive/index.php/"site1.com">site1.com</a>This site is one of the best sites available today. You have access to many things and hundreds of other things. They add new things every week.Etc...</dd></div>
#links dt {
font-family: Trebuchet MS, geneva, verdana, sans-serif;
font-size: 0.85em;
background-color:#333300;
width: 45em;
color:#ff0000;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
}
#links dd {
margin-top: 5em;
}
#links a:hover {
text-decoration: none;
color:#ff0000;
}
.sitedesc {
margin: 2px 0 13px 0;
padding: 0;
clear: left;
border: 0;
line-height: 15px;
width: 25em;
height: 5em;
text-align: justify;
}
.site1 {
display: block;
float: left;
margin: 5px 10px 5px 10px;
padding: 0;
width: 100px;
height: 75px;
background: transparent url(HPIM0668.JPG) 0 -75px no-repeat;
}
1. How do I control the font-size of the link and the text description seperately?
2. How come this does not work in IE? The image is positioned up the page too high, the link and text is below and partly under the image to the right side.
Any help would be great. Thanks.The dd needs to be moved into the required position still:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>HappyNow</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
#links dt {
font-family: Trebuchet MS, geneva, verdana, sans-serif;
font-size: 0.85em;
background-color:#333300;
width: 45em;
color:#ff0000;
padding: 0.10em;
margin-top: 5em;
margin-bottom: 3em;
}
#links a {
font-family: Trebuchet MS, verdana, geneva, sans-serif;
font-size: 0.70em;
}
#links a:hover {
text-decoration: none;
color:#ff0000;
}
#links dd {
margin: 2px 0 13px 0;
padding: 0;
border: 0;
line-height: 15px;
height: 5em;
width: 25em;
text-align: justify;
}
#links img {
float:left;
margin:0 0.5em 0.5em 0;
}
-->
</style>
</head>
<body>
<dl id="links">
<dt id="category1">Category Title</dt>
<dd><a href=http://www.webdeveloper.com/forum/archive/index.php/"#top">Back To Top</a></dd>
<dd>
<img alt="" src=http://www.webdeveloper.com/forum/archive/index.php/"../Images/flagUS.gif" height="75" width="100">
<a href=http://www.webdeveloper.com/forum/archive/index.php/"site1.com">site1.com</a>This site is one of the best sites available today. You have access to many things and hundreds of other things. They add new things every week.Etc...
</dd>
</dl>
</body>
</html>