SitePoint Sponsor

User Tag List

Results 1 to 8 of 8

Hybrid View

  1. #1
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question how to make -big blocks containing lots of block elements- look like 1 anchor

    Hi Sitepoint community.

    I've stumbled over this problem a lot since I first started doing CSS + XHTML & tried to do everything as semantic as possible.

    I'll illustrate the problem with a prototype I'm working on at the moment (hence the lack of design)



    I'd like to have the user experiece as the following.
    when a visitor goes over one of these device blocks, his cursor should become a hand (like on all links), & the border of the list element should become darker.
    I don't want any flickering of the cursor when he moves his mouse over the block element. The visitor should have the feeling as if he's going over one big button.

    before doing any CSS, I always start semantically coding the XHTML.

    i'd be something like this :

    Code:
    <li>
    	<h3>C520 Series</h3>
    	<img src="" alt="" />
    
    	<h4>C520 Series features</h4>
    	<ul>
    		<li>bluetooth</li>
    		<li>mp3 player</li>
    		<li>Western Europe</li>
    	</ul>
    	
    	<h4>C520</h4>
    	<del>&euro; 9999,99</del>
    	<strong>&euro; 9999,99</strong>
    
    	<h4>C520t</h4>
    	<ul>
    		<li>+ integrated TMC antenna</li>
    	</ul>
    	<del>&euro; 9999,99</del>
    	<strong>&euro; 9999,99</strong>
    </li>
    Aas you can see, no links in it yet because that's where my main problem exists.
    where or how should I include the link, so that it is semantically correct & the user experiences the block as one big link. ?
    keep in mind that you may not place block elements inside an anchor tag (XHTML specifications)

    following code could work but is kinda messy :
    Code:
    <li>
    	<h3><a href="" title="">C520 Series</a></h3>
    	<a href="" title=""><img src="" alt="" /></a>
    
    	<h4><a href="" title="">C520 Series features</a></h4>
    	<ul>
    		<li><a href="" title="">bluetooth</a></li>
    		<li><a href="" title="">mp3 player</a></li>
    		<li><a href="" title="">Western Europe</a></li>
    	</ul>
    	
    	<h4><a href="" title="">C520</a></h4>
    	<del><a href="" title="">&euro; 9999,99</a></del>
    	<strong><a href="" title="">&euro; 9999,99</a></strong>
    
    	<h4><a href="" title="">C520t</a></h4>
    	<ul>
    		<li><a href="" title="">+ integrated TMC antenna</a></li>
    	</ul>
    	<del><a href="" title="">&euro; 9999,99</a></del>
    	<strong><a href="" title="">&euro; 9999,99</a></strong>
    </li>
    & this is the not so semantic way I solved the problem before

    Code:
    <li>
    	<a href="" title="">
    		<strong class="title">C520 Series</strong><span class="remove"> </span>
    		<img src="" alt="" /><span class="remove"> </span>
    
    		<strong class="subtitle">C520 Series features</strong><span class="remove"> : </span>
    		
    		<span class="general_features">
    			<span>bluetooth</span><span class="remove">, </span>
    			<span>mp3 player</span><span class="remove">, </span>
    			<span>Western Europe</span>
    		</span>
    
                    <span class="remove"> | </span>
    		
    		<strong class="subtitle">C520</strong><span class="remove"> : </span>
    		<del>&euro; 9999,99</del><span class="remove"> - </span>
    		<span class="price">&euro; 9999,99</span>
    
                   <span class="remove"> | </span>
    
    		<strong class="subtitle">C520t</strong><span class="remove"> : </span>
    		<span class="device_features">
    			<span>+ integrated TMC antenna</span>
    		</span><span class="remove">, </span>
    		<del>&euro; 9999,99</del><span class="remove"> - </span>
    		<span class="price">&euro; 9999,99</span>
    	</a>
    </li>
    The goal is to have perfect code & visualisation with css & javascript enabled, css without javascript, no css & javascript for the following browsers :
    IE 6+, FF 1+, Safari, Konqueror, Camino, ...

    so a quick overview of my question :
    Whats the best way to handle this block with the following :
    - it has to be clickable everywhere
    - no cursor flickering (in IE)
    - semantically correct code
    - has to look visually right with CSS disabled
    - hover state of the link should highlight the whole border of the block. (will be replaced by a background later)
    - has to work perfect in IE 6+, FF 1+, Safari, Konqueror, Camino.

    Hope to see some creative answers on this question.

    PS : i was not sure where to post this question, in the XHTML or CSS
    if it's posted wrong, please move it to the correct forum.

    cheerz, Fr&#233;

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Assuming that the boxes are all the same size and width I would do something like this:

    http://www.pmob.co.uk/temp/block-highlight.htm

    To enable the background color change a little bit of javascript is added for ie6 and under. The border will change color without the javascript but to enable a background-color change then IE needs a helping hand.

    This allows the box to be semantically structured and still to work with javascript or css disabled.

  3. #3
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B

    genious solution.
    never thought that the :hover would work with a anchor that overlays it completely.

    btw, background color change works here in IE 6.0.2900 SP2

    why would the border change work, but not the background of the list ?
    any more info on that ? link ?

    thnx for the splendid solution so far !

    PS : i'd integrate a donate button on your site if you keep on giving me great answers in such a short time.
    very much appreciated.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    why would the border change work, but not the background of the list ?
    any more info on that ? link ?
    If I put the background color change on the anchor then it would obscure the content underneath because the anchor is overlaid .

    You can change the border on the anchor because that doesn't affect the content within. IE won't action hover on anything except anchors whereas for other browsers I changed the background when the list was hovered instead so as not to obscure the content.

    The Js adds a class on hover (for ie6 and under only) for the list (li) just to change the background color.

    I made the link a real link with text and then just hid the text. If css is turned off then the real link comes into view and can still be navigated. Also the real link helps screenreaders because it looks like a real link with content etc.

    never thought that the :hover would work with a anchor that overlays it completely.
    Yes it works but you just have to make sure the z-indexes are correct so that the anchor is on top. IE has to have a known width and height but other browsers would have worked with percentage widths and heights, which would have allowed elements of various sizes.

  5. #5
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey Paul O' B.

    still got a small issue in IE 6 I can't directly figure out.
    when I go over the link in IE 6, it's doesn't always act like a big button, it seems that some elements under the link seem to act on the mouse instead of the link. this happens however If I place an empty image in the link.

    example :
    http://entity-webdesign.be/mio/finis...n-devices.html

    the last one C220 has an extra empty image in the link (sized to the size of the link) & this works like it should, the others don't.
    you know a solution to do this without that image in it.
    I copied all your techniques, can't see what I'm doing wrong ?


    html code :
    Code:
    <li>
      <div class="device_content">
        <h3>C220 Series</h3>
        <img src="img/devices/mio-C220-thumb-big.gif" alt="Mio C220 Series - GPS Car Navigation device" />
    	
        <h4 class="not_in_design">C220 Series features</h4>
        <ul class="device_features">
          <li>Benelux + MRE</li>
        </ul>
    	
        <ul class="device_details">
          <li>
            <h4>C220</h4>
            <del>&euro; 9999,99</del>
            <strong>&euro; 9999,99</strong>
          </li>
          <li class="extra_device">
            <h4>C220 Europe</h4>
            <ul>
              <li>+ Western Europe</li>
            </ul>
            <del>&euro; 9999,99</del>
            <strong>&euro; 9999,99</strong>
          </li>
        </ul>
      </div>
    
      <p class="device_link">
        <a href="" title="Click here to see the Mio C220 series">click here to see the C220 series</a>
      </p>
    </li>
    css code :
    Code:
    @charset "utf-8";
    /* CSS Document */
    
    /* Resetting default CSS values */
    html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td { margin: 0; padding: 0; border: 0; outline: 0; font-weight: inherit; font-style: inherit; font-size: 100&#37;; font-family: inherit; vertical-align: baseline; }
    /* remember to define focus styles! */
    :focus { outline: 0; }
    body { line-height: 1; color: black; background: white; }
    ol, ul { list-style: none; }
    
    
    .device_listing_big { width:720px; }
    
    /* list item */
    .device_listing_big li { width:230px; height:170px; margin:5px; float:left; display:inline; position:relative; cursor:pointer; }
    
    /* z-index of the content in it */
    .device_listing_big .device_content { width:230px; height:170px; position:absolute; z-index:1; }
    
    /* styling of the paragraph with the link in it */
    .device_link { width:230px; height:170px; margin:0; padding:0; position:absolute; top:0; left:0; text-indent:-3800px; z-index:999;}
    .device_link a { width:228px; height:168px; margin:0; padding:0; display:block; z-index:999; position:relative; }
    .device_link a:link, .device_link a:visited { border:1px solid #ccc; }
    .device_link a:hover, .device_link a:active { border:1px solid #555; }
    .device_listing_big .device_link a img { border:none; width:228px; height:168px; top:0; left:0; }
    
    /* styling of the elements in the content part */
    .device_listing_big li h3 { margin:0; padding:0; position:absolute; top:5px; left:5px; color:#555; }
    .device_listing_big li img { position:absolute; top:21px; left:5px; z-index:888;}
    .device_listing_big li .new_product { width:40px; height:16px; position:absolute; top:5px; right:5px; text-align:right; font:bold 11px/16px Arial, Helvetica, sans-serif; color:#f60; }
    .device_listing_big li .not_in_design { display:none; }
    .device_listing_big li .device_features { width:120px; height:82px;	 position:absolute; top:21px; right:5px; text-align:right; }
    .device_listing_big li .device_features li { width:120px; height:16px; margin:0; font: normal 11px/16px Arial, Helvetica, sans-serif; }
    
    .device_details { width:220px; position:absolute; top:108px; left:5px; }
    .device_details li { height:16px; width:220px; margin:2px 0; float:left; display:inline; position:relative; }
    .device_details li.extra_device { height:32px; width:220px; margin:0; float:left; display:inline; position:relative; }
    
    .device_details li h4 { margin:0; padding:0; position:absolute; top:0; left:0; font:bold 12px/16px Arial, Helvetica, sans-serif; }
    .device_details del { width:50px; height:16px; position:absolute; top:0; right:70px; text-align:right; font:normal 11px/16px Arial, Helvetica, sans-serif; color:#f60; }
    .device_details strong { width:70px; height:16px; position:absolute; top:0; right:0; text-align:right; font:bold 12px/16px Arial, Helvetica, sans-serif; color:#f60;  }
    
    .extra_device ul { position:absolute; top:16px; left:0; }
    .extra_device ul li { width:210px; padding-left:10px;}

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    HI,

    If you look at my original demo you will see this in the mark up.

    Code:
    .test li p.link a{
    	display:block;
    	width:100&#37;;
    	height:100%;
    	text-decoration:none;
    	border:1px solid #ccc;
    	z-index:999;
    	background:url(fake.gif) no-repeat;/* use a transparent 1px x 1px real image if you are worried about missing images in your server log */
    /*
    You need to give IE that image otherwise it loses focus. It doesn't have to be a real image but if you are worried about missing images errors in your server logs then just make a 1px x 1px transparent image. It doesn't get repeated and won't affect anything except to keep the focus from dropping through the anchor.

    You also have "haslayout" issue in that page.

    Code:
    .device_link{ background:url(fake.gif) no-repeat;}
    * html .device_listing_small{height:1%}
    There is also a problem with the flash you are inserting so remove the flash and debug the other errors first to make sure they are working. I don't know what the problem is with the flash but it causes other elements to behave weirdly.

    Make sure the page is all working properly and then re-introduce the javascsript. You may need to refer to the documentation for that flash as I never get involved with it at all.

  7. #7
    SitePoint Addict Fre420's Avatar
    Join Date
    Nov 2005
    Location
    Leuven, Belgium
    Posts
    211
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    HI,

    If you look at my original demo you will see this in the mark up.

    Code:
    background:url(fake.gif) no-repeat;/* use a transparent 1px x 1px real image if you are worried about missing images in your server log */
    /*
    You need to give IE that image otherwise it loses focus. It doesn't have to be a real image but if you are worried about missing images errors in your server logs then just make a 1px x 1px transparent image. It doesn't get repeated and won't affect anything except to keep the focus from dropping through the anchor.
    thnx, works like a sharm now, overlooked that one
    Quote Originally Posted by Paul O'B View Post
    You also have "haslayout" issue in that page.

    Code:
    .device_link{ background:url(fake.gif) no-repeat;}
    * html .device_listing_small{height:1%}
    was still working on that page (the list below), fixed now.

    Quote Originally Posted by Paul O'B View Post
    There is also a problem with the flash you are inserting so remove the flash and debug the other errors first to make sure they are working. I don't know what the problem is with the flash but it causes other elements to behave weirdly.

    Make sure the page is all working properly and then re-introduce the javascsript. You may need to refer to the documentation for that flash as I never get involved with it at all.
    I didn't need your javascript yet, as the background isn't changing now yet, We only know that when we receive the designs for the page.

    what problems do you have with the flash ? I haven't witnessed any, standard SWFobject embedding.

    I do have 2 javascript errors on the page, but those are related to something else, will receive adjusted javascript code one of the following days.


    thnx for the feedback & solution.

    Fré

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,556
    Mentioned
    183 Post(s)
    Tagged
    6 Thread(s)
    what problems do you have with the flash ?
    It must have been a local problem as the live site is working fine now


Bookmarks

Posting Permissions

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