Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts

    How can I accomplish this properly?

    How can I accomplish the stylings and all the hover states of the article button/links shown here: cineweekly.com/test.php

    I have done it two ways now but neither were valid.
    Last edited by cineweekly.com; 12-16-2010 at 05:58 AM.

  • #2
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,338
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Can you elaborate? What are you styling, what did you try and what didnt work?

  • #3
    New Coder
    Join Date
    Dec 2010
    Location
    Orlando, FL
    Posts
    11
    Thanks
    1
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    Quote Originally Posted by tripflex View Post
    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>
    </div></a>


    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.

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,956
    Thanks
    9
    Thanked 727 Times in 721 Posts
    How about:

    Code:
    <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></li>
    plus:

    Code:
    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;
    overflow:auto;
    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.

  • Users who have thanked SB65 for this post:

    cineweekly.com (12-17-2010)

  • #6
    Regular Coder cineweekly.com's Avatar
    Join Date
    Aug 2010
    Posts
    485
    Thanks
    14
    Thanked 3 Times in 3 Posts
    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.
    Last edited by cineweekly.com; 12-18-2010 at 01:34 AM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •