Dominic1992
04 Aug 2009, 10:16 PM
Hi,
I am in the process of reading HTML, XHTML, and CSS All-IN-One Desk Reference For Dummies in hopes of one day building my very own professional-quality website!
This book teaches you how to build a website without having to buy any software, (which means I don't have the luxury of graphic website builders, lol).
Right now I am reading the "Styling with CSS" potion of the book and I have decided to tackle a very simple web page project to test myself on what I have learned so far.
While working on this basic web page(no user interaction), I have stumbled across a problem that I cannot seem to fix.
The problem is that I have a thumbnail (with a border around it) set as a hyperlink to view the full sized image of the thumbnail. I set all of the other hyperlinks to turn white when I scroll over it.
This is fine except I do not want the thumbnail's border to turn white when scrolled over, I want the borders color to remain the same.
I thought I had all of the code right but alas, the thumbnail's border turns white!
The only way I can think of to fix this is to change the color of the a:hover part of the css code to the same color as the thumbnail border.
This solution is bad however, because I want my other hyperlinks to turn white when scrolled over!
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title> CSS Webpage </title>
<style type = "text/css">
body {
background-color: #7777ff;
}
h1 {
font: bold "Times New Roman", Times, Sans;
text-align: center;
}
img {
border: #0000cc 0.5em double;
}
a {
color: #000000;
}
a:visited {
color: #0000cc;
}
a:hover {
color: #000000;
background-color: #ffffff;
}
.thumb {
a:hover: #0000cc
}
</style>
</head>
<body>
<h1> Dominic Sabitino Rinaldi </h1>
<p>
<img src = "Niagara97.jpg"
height = "480"
width = "270"
alt = "Me at the falls" />
</p>
<h2> A little bit about myself </h2>
<p> <strong> My Interests </strong> </p>
<ul>
<li> Websites </li>
<li> Music </li>
<li> Eating </li>
</ul>
<p> <strong> My Favorite Websites </strong> </p>
<ul>
<li> <a href = "http://www.facebook.com"> Facebook </a> </li>
<li> <a href = "http://www.stumbleupon.com"> Stumbleupon </a> </li>
<li> <a href = "http://www.wikipedia.com"> Wikipedia </a> </li>
</ul>
<p> <strong> My Favorite Music Artists </strong> </p>
<ul>
<li> <a href = "http://en.wikipedia.org/wiki/Coldplay"> Coldplay </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/Depeche_Mode"> Depeche Mode </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/INXS"> INXS </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/Genesis_band"> Genesis </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/Guns_N%27_Roses"> Guns N'Roses </a> </li>
</ul>
<p> <strong> My Favorite Foods </strong> </p>
<ul>
<li> Steak </li>
<li> Crockpot Lasagna </li>
<li> Ribs </li>
</ul>
<p> I recently took a trip to Niagara Falls, NY for my families summer vacation.
On the trip I took a couple hundred pictures! Here are some of them.</p>
<p> Note: To see the picture's full size, click on it's thumbnail. </p>
<p>
<a class = "thumb" href = "Niagara32.jpg">
<img src = "Niagara32_t.jpg"
height = "100"
width = "100"
alt = "Niagara at Night" />
</a>
</p>
</body>
</html>
This web page validates with the Firefox add-on HTML Validator (Tidy), so please try to make any solutions you offer validate also.
Thanks a million!
I am in the process of reading HTML, XHTML, and CSS All-IN-One Desk Reference For Dummies in hopes of one day building my very own professional-quality website!
This book teaches you how to build a website without having to buy any software, (which means I don't have the luxury of graphic website builders, lol).
Right now I am reading the "Styling with CSS" potion of the book and I have decided to tackle a very simple web page project to test myself on what I have learned so far.
While working on this basic web page(no user interaction), I have stumbled across a problem that I cannot seem to fix.
The problem is that I have a thumbnail (with a border around it) set as a hyperlink to view the full sized image of the thumbnail. I set all of the other hyperlinks to turn white when I scroll over it.
This is fine except I do not want the thumbnail's border to turn white when scrolled over, I want the borders color to remain the same.
I thought I had all of the code right but alas, the thumbnail's border turns white!
The only way I can think of to fix this is to change the color of the a:hover part of the css code to the same color as the thumbnail border.
This solution is bad however, because I want my other hyperlinks to turn white when scrolled over!
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="EN" dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/xml; charset=utf-8" />
<title> CSS Webpage </title>
<style type = "text/css">
body {
background-color: #7777ff;
}
h1 {
font: bold "Times New Roman", Times, Sans;
text-align: center;
}
img {
border: #0000cc 0.5em double;
}
a {
color: #000000;
}
a:visited {
color: #0000cc;
}
a:hover {
color: #000000;
background-color: #ffffff;
}
.thumb {
a:hover: #0000cc
}
</style>
</head>
<body>
<h1> Dominic Sabitino Rinaldi </h1>
<p>
<img src = "Niagara97.jpg"
height = "480"
width = "270"
alt = "Me at the falls" />
</p>
<h2> A little bit about myself </h2>
<p> <strong> My Interests </strong> </p>
<ul>
<li> Websites </li>
<li> Music </li>
<li> Eating </li>
</ul>
<p> <strong> My Favorite Websites </strong> </p>
<ul>
<li> <a href = "http://www.facebook.com"> Facebook </a> </li>
<li> <a href = "http://www.stumbleupon.com"> Stumbleupon </a> </li>
<li> <a href = "http://www.wikipedia.com"> Wikipedia </a> </li>
</ul>
<p> <strong> My Favorite Music Artists </strong> </p>
<ul>
<li> <a href = "http://en.wikipedia.org/wiki/Coldplay"> Coldplay </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/Depeche_Mode"> Depeche Mode </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/INXS"> INXS </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/Genesis_band"> Genesis </a> </li>
<li> <a href = "http://en.wikipedia.org/wiki/Guns_N%27_Roses"> Guns N'Roses </a> </li>
</ul>
<p> <strong> My Favorite Foods </strong> </p>
<ul>
<li> Steak </li>
<li> Crockpot Lasagna </li>
<li> Ribs </li>
</ul>
<p> I recently took a trip to Niagara Falls, NY for my families summer vacation.
On the trip I took a couple hundred pictures! Here are some of them.</p>
<p> Note: To see the picture's full size, click on it's thumbnail. </p>
<p>
<a class = "thumb" href = "Niagara32.jpg">
<img src = "Niagara32_t.jpg"
height = "100"
width = "100"
alt = "Niagara at Night" />
</a>
</p>
</body>
</html>
This web page validates with the Firefox add-on HTML Validator (Tidy), so please try to make any solutions you offer validate also.
Thanks a million!