View Full Version : How can I accomplish this properly?

12-16-2010, 06:14 AM
How can I accomplish the stylings and all the hover states of the article button/links shown here: cineweekly.com/test.php (http://www.cineweekly.com/test.php)

I have done it two ways now but neither were valid.

12-16-2010, 05:41 PM
Can you elaborate? What are you styling, what did you try and what didnt work?

12-16-2010, 07:25 PM
Yeah you provided us with like...no information. If you want help you need to elaborate and explain, we can't read your mind.

If you want to change the style on hover, change this setting in your core-style.css:

a:hover {
input anything you want here

There is already a color setting so find it in your css file and change it to what you want.

12-16-2010, 09:43 PM
Yeah you provided us with like...no information.Don't be smart.

First of all the link is to my site and I set up everything from scratch. I'm looking for an alternative (possibly more semantic) way of doing it. I'm talking about the links to the news articles in the middle section that change to an orange bg on hover. This is more of an HTML question since I have all the CSS figured. Here is the barebones of the current setup:

<a href="preview07.php"><div class="newsA">
<div class="dateB">Preview<br />Week<br /><div class="signature">- Tomahawk</div></div>
<img class="thumb" src="images.png" />
<span class="newsTitle">BEHIND-THE-SCENES</span><em>:</em>
<p class="tagline">These rare color photos come from 1967 and they're <strong>COMING TO GET YOU BARBARA!</strong></p>

But it's not proper to have <div>s and <p>s within an anchor tag even though it works. I set it up as a list and the bg color would only cover the text line by line. Putting the anchor tag within the <div> does about the same thing.

12-17-2010, 10:39 AM
How about:

<li class="newsA"><a href="preview07.php">
<span class="dateB">Preview<br />Week<br /><span class="signature">- Tomahawk</span></span>
<img class="thumb" src="images.png" alt=""/>
<span class="newsTitle">BEHIND-THE-SCENES</span><em>:</em>
<span class="tagline">These rare color photos come from 1967 and they're <strong>COMING TO GET YOU BARBARA!</strong></span>


a .newsA, li.newsA {
background-color: #E0E0E0;
clear: none;
color: #000000;
display: block;
font: 1em/1.7em Arial,Helvetica,sans-serif;
margin: 0 0 7px;
overflow: auto;
/*padding: 0 8px;*/
text-indent: 0;

li.newsA a {
color: black;
display: block;
padding: 0 8px;

.tagline {
clear: none;
font-weight: normal;
margin: 0;

a:hover .newsA,li.newsA a:hover {
background-color: #FF6600;
color: #FFF;

.thumb {
border: none;
float: left;
padding: 7px 10px 7px 0;

.signature {
display: block;
font: italic 0.8em Tahoma,Geneva,sans-serif;
margin: 0;
padding-top: 2em;

css looks a bit messy since I haven't changed any of your existing css, just added to it - so you could probably tidy it up a bit. That html validates, and having the film within a li tag, per your other thread, is probably more semantic, since it's really a list of films.

Most of the difficulty here comes from wanting to make the whole box a link, requiring an anchor around all the content. An alternate approach would be to remove the anchor tag and maybe just have it on the 'title', and use javascript plus a click event on the box (div/li or whatever it is) to make the whole div clickable. This would free you from the constraints of the anchor tag, but obviously relies on the user having javascript enabled.

12-17-2010, 08:58 PM
I hate to have to borrow from a young Indiana Jones but "Holy smokes!", I think you just gave me the most useful response I've ever had on here. Thank you so much, it even works properly in Lynx which was a big concern because my links didn't show and probably wouldn't be crawled by Google. I had to add a 1x1 invisible pixel with an anchor tag under each link so Lynx could see it. I'm cleaning up the code now, 1,000 times thanks.