SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Hills of Ice
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Post need some help with divs and rollover effects

    Hello ,
    I have some problem with making some effect on my site...


    thing is ...

    Code:
    <div id="subbox">
    
    <div id="leftsubbox">
    
    
    
    
    <h1> Title </h1>
    
    <div class="textle">
    text text text text text text text text text text text text text text text text
    
    </div>
    
    </div>
    
    <div id="rightsubbox">
    <div class="subpic"><a href="" target="_blank" title="Lens Wallpaper"><img src="are-u-dumb.jpg" alt="Lens Wallpaper" width="150" height="113"></a></div>
    </div>
    
    
    </div>
    Code:
    }
    #subbox {
    	width: 625px;
    	height: 190px;
    	float: none;
    }
    #leftsubbox a {
    	float: left;
    	width: 410px;
    	height: 170px;
    }
    #rightsubbox {
        float: left;
        width: 200px;
    	height: 170px;
    	background: url(bg-subpic.gif) repeat;
    }

    I want somehow to put rollover effect in leftsubbox

    like this one :

    http://www.smileycat.com/miaow/archives/000230.php

    any good solution for this ????

    thanks !
    Last edited by mOFme; Nov 17, 2007 at 12:09.
    ... still know to chase my visions ...

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Hi, see my examples in this thread because i think that's what you are after.

    If that doesn't answer your question then post back

  3. #3
    Object Not Found junjun's Avatar
    Join Date
    Mar 2002
    Location
    northern MI
    Posts
    1,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    2 choices:
    1. If your stuck on having a mouse over effect on #leftsubbox, use javascript.
    2. If you can live with this mouse over effect being on '#leftsubbox a ' instead, use Paul's example above.

    I'll gladly provide a javascript example if you for some reason can't style the anchor elements hover pseudo state.

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Hills of Ice
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks on tips

    but before I try to put and make someting similar >>

    Code:
    <!--[if lt IE 7]>
    <script type="text/javascript">
    ieHover = function() {
    	var sfEls = document.getElementById("boxes").getElementsByTagName("LI");
    	for (var i=0; i<sfEls.length; i++) {
    		sfEls[i].onmouseover=function() {
    			this.className+=" over";
    		}
    		sfEls[i].onmouseout=function() {
    			this.className=this.className.replace(new RegExp(" over\\b"), "");
    		}
    	}
    }
    if (window.attachEvent) window.attachEvent("onload", ieHover);
    
    </script>
    <![endif]-->
    is this necessary ?? It's looks like some javascript

    I need pure css solution for this , if I can get that

    thanks again for helping


    EDIT:

    Ok, I tried this one but don't fits in my css code
    ... still know to chase my visions ...

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    s this necessary ?? It's looks like some javascript
    That is for ie6 only because ie6 doesn't understand hover on anything except anchors. You can't do it any other way for Ie6 unless you stack everything inside an anchor and use spans for all the heading and text.

    The solution I offered is more semantic and even if JS is not working IE6 will still work.

    Ok, I tried this one but don't fits in my css code
    Makes no difference what code you are using except that IE will want a known height to work with (see my example). Otherwise you will probably have to resort to JS for IE6 anyway.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Hills of Ice
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hmmm thanks I think I find some new solution , look this :

    Code:
    }
    #subbox {
    	width: 625px;
    	height: 190px;
    	float: none;
    }
    #leftsubbox {
    	float: left;
    	width: 410px;
    	height: 170px;
    	list-style-type: none;
    }
    #leftsubbox a {
    	background-image:url(bg-sub-text1.gif);
    	width: 410px;
    	height: 170px;
    	display: block;
    }
    #leftsubbox  a:hover {
    	background-image:url(bg-sub-text2.gif);
    	width: 410px;
    	height: 170px;
    
    }
    #rightsubbox {
        float: left;
        width: 200px;
    	height: 170px;
    	background: url(bg-subpic.gif) repeat;
    }

    Code:
    <div id="subbox">
    
    <div id="leftsubbox">
      <a href=""><h1>CSS Rounded Corners 'Roundup'</h1>
           Quite a large collection of techniques for creating boxes and layouts with rounded corners using CSS.
    <BR>
    November 25, 2005</a>  
      </div>
    
    <div id="rightsubbox">
    <div class="subpic"><a href="" target="_blank" title="Lens Wallpaper"><img src="are-u-dumb.jpg" alt="Lens Wallpaper" width="150" height="113"></a></div>
    </div>
    
    
    </div>
    I have now effect which I wanted and works ok in IE and FF but in FF I have problem with position

    that part leftsubbox is a little bit down how could I fix this ??? What to do now ???


    thanks , Paul O'B
    ... still know to chase my visions ...

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

    You can't do this:
    Code:
    <a href="">
            <h1>CSS Rounded Corners 'Roundup'</h1>
            Quite a large collection of techniques for creating boxes and layouts with rounded corners using CSS. <BR>
            November 25, 2005</a> </div>
    You can't put an h1 inside a an anchor because an anchor is an inline element and you can't break the rules of html.

    You would need to change the h1 to a span or other inline element or use the other methods as already mentioned in the links I have already given you.

    Here's the valid way of doing this.

    Code:
    #leftsubbox {
        float: left;
        width: 410px;
        height: 170px;
        background: url(bg-sub-text2.gif);
    }
    #leftsubbox a {
        background: url(bg-sub-text1.gif);
        width: 410px;
        height: 170px;
        display: block;
        text-decoration:none;
        color:#000;
    }
    #leftsubbox a:hover {background:transparent;}
    #leftsubbox strong{
        display:block;
        font-size:140&#37;;
        padding:10px;
    }
    #leftsubbox span{display:block;padding:10px}
    Code:
        <div id="leftsubbox"><a href="#"> <strong>CSS Rounded Corners 'Roundup'</strong><span>Quite a large collection of techniques for creating boxes and layouts with rounded corners using CSS.<br>
            November 25, 2005</span></a></div>

  8. #8
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Hills of Ice
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I accept your advice and it works now

    BTW I have now other problem : in IE I have a little problem with #listing-block . In FF I see everything ok (like I want to have on template ) but IE making some other position . why ?

    Code:
    <div id="listing-block">
    <li>
    <div id="linkbox">
    <div id="leftlinkbox">
      <div class="listpic"><a href=""><img src="are-u-dumb.jpg" alt="Annoying neighbors" width="70" height="59" border="1"></a></div>
    </div>
    <div id="rightlinkbox">
      <a href=""><strong>jhhhhhhhhhhhhhhhhhhhhh </strong></a>
      </div>
    
    </div>
    </li>
    <li>
    <div id="linkbox">
    <div id="leftlinkbox">
      <div class="listpic"><a href=""><img src="are-u-dumb.jpg" alt="Annoying neighbors" width="70" height="59" border="1"></a></div>
    </div>
    <div id="rightlinkbox">
       <a href=""><strong>jhhhhhhhhhhhhhhhhhhhhh </strong></a>
      </div>
    
    </div>
    </li>
    
    </div>
    
    
    
     </div>
    Code:
    }
    #linkbox {
    	width: 610px;
    	height: 65px;
    	float: none;
    	margin: 25px 0;
    
    }
    #rightlinkbox {
    	float: left;
    	width: 215px;
    	height: 57px;
    }
    #rightlinkbox a {
    	background-image:url(bg-sub-text1.gif);
    	width: 215px;
    	height: 57px;
    	display: block;
    	padding: 10px 0 0 0;
    }
    #rightlinkbox  a:hover {
    	background-image:url(bg-sub-text2.gif);
    	width: 215px;
    	height: 57px;
    }
    #rightlinkbox  strong{
        display:block;
    	font-size: 12px;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
        padding: 10px;
    }
    #leftlinkbox {
    	float: left;
    	width: 88px;
    	height: 65px;
        border: 1px solid #888888;
    }
    #listing-block {
    	width: 610px;
        margin: 8px 0 8px 0;
        padding: 0;
        list-style: none;
        overflow: hidden;
    }
    
    #listing-block li {
           width: 50%;
           float: left;
    }

    thanks !
    ... still know to chase my visions ...

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    The problem isn't IE its you

    How can you have 2 linkbox's fitting into 610px width when you've sized then both at 610px each. They would need to be 305px each to fit.

    Code:
    #linkbox {
        width: 305px;
        height: 65px;
        float: none;
        margin: 25px 0;
    }
    Also you can't have a div surrounding the lists it would need to be a ul.

    Code:
    <ul id="listing-block">
        <li>
    Also ID's are unique an you can only use them once per page so change them to classes if you are using them more than once.

  10. #10
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Hills of Ice
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks , man ! Now all thing work perfectly

    but I still have some questions ...

    Validation of this code :

    Code:
    <div class="footer">
    <div id="footerlist">
    <li>
    <!-- Search Google -->
    <form method="get" action="http://www.google.com/custom" target="google_window">
    <table align="right">
    <tr><td nowrap="nowrap" valign="top" align="left" height="32">
    
    <label for="sbi" style="display: none">Enter your search terms</label>
    <input type="text" name="q" size="31" maxlength="255" value="" id="sbi"></input>
    <label for="sbb" style="display: none">Submit search form</label>
    <input type="submit" name="sa" value="Google Search" id="sbb"></input>
    <input type="hidden" name="client" value="pub-1344812231755813"></input>
    <input type="hidden" name="forid" value="1"></input>
    <input type="hidden" name="ie" value="ISO-8859-1"></input>
    <input type="hidden" name="oe" value="ISO-8859-1"></input>
    <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1"></input>
    <input type="hidden" name="hl" value="en"></input>
    </td></tr></table>
    </form>
    <!-- Search Google -->
    </li>
    
    <li>
    <h1>
    	<a href="index.html"> Home</a> | <a href="disclaimer.html">Disclaimer</a> | <a href="link-exchange.html">Link exchange</a> | <a href="contact-us.html">Contact</a> |   <img src="button1-bm.gif" alt="button" border="0" height="16" width="152">
    	</h1>
    </li>
    </div>
    
    <center>
    <h4>
      Copyright  2006-2007 <a href="/"><b>title of site </b></a> All rights reserved . Design by MWW .
    </h4>
    </center>
    </div>
    	<div class="refllect2-01">
    	
    	</div>
    	<div class="refllect2-02">
    		
    	</div>
    Code:
    }
    .footer {
    	padding: 2px 0 0 0;
    	width: 930px;
    	height: 60px;
    	background: url(bg-footer.gif) repeat center;
    	border-top: 1px solid #696969;
    }
    .footerends{
    	background: url(refllect.gif) no-repeat center;
            width: 930px;
            height: 50px;
    }
    
    div.refllect2-01 {
    	width:930px;
    	height:25px;
    	background: url(refllect1.gif) no-repeat center;
    }
    
    div.refllect2-02 {
    	width:930px;
    	height:25px;
    	background: url(refllect2.gif) no-repeat center;
    }
    #footerlist {
            width: 930px;
            margin: 3px 0 2px 0;
            padding: 0;
            list-style: none;
            overflow: hidden;
    }
    
    #footerlist li {
        width: 49%;
        margin: 0;
        padding: 4px;
        float: right;
    }
    #footerlist h1{
    	font-size: 12px;
    	color: #FFFFFF;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	text-decoration: none;
    }
    what u think , it's ok or not ?


    AND , I have a little problem here with text .

    Code:
    <div id="topmenu-viewed">
    <div class="topmenu-vicorner"></div>
    <div class="topmenu-pic"><a href="" target="_blank" title="Lens Wallpaper"><img src="are-u-dumb.jpg" alt="Lens Wallpaper" width="150" height="113"></a></div>
    <div class="topmenu-text">Post your submit link title here<br>Post your submit link title here</div>
    </div>
    </div>
    Code:
    /* topmenu extra tables*
    ------------------------------------------------------------------*/
    #topmenu-list {
    	width: 215px;
    	height: 350px;
    	float: none;
    	background: url(top-extra.gif) repeat top;
    }
    #topmenu-list  strong {
    	display:block;
    	font-size: 14px;
    	color: #D8D8D8;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	text-align: center;
    	text-decoration: underline;
    }
    #topmenu-list  span {
    	display:block;
    	font-size: 12px;
    	color: #D8D8D8;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	text-decoration: none;
    	text-align: center;
    	padding: 10px 0 0 0;
    }
    #topmenu-list  span a:hover {
    	display:block;
    	font-size: 12px;
    	color: #D8D8D8;
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	text-decoration: underline;
    	font-weight: bold;
    }
    .topmenu-licorners {
    	width: 215px;
    	height: 20px;
    	float: none;
    	background: url(sub-corner-extra.gif) no-repeat top;
    }
    #topmenu-viewed {
    	width: 215px;
    	height: 230px;
    	float: none;
    	background: url(top-viewed2.gif) repeat top;
    }
    .topmenu-text{
    	font-family: Geneva, Arial, Helvetica, sans-serif;
    	font-size: 12px;
    	color: #D8D8D8;
    	text-decoration: none;
    	padding: 10px 0 0 0;
    	font-weight: bold;
    	text-align: center;
    }
    .topmenu-vicorner {
    	width: 215px;
    	height: 20px;
    	float: none;
    	background: url(sub-corner-extra.gif) no-repeat top;
    }
    .topmenu-pic {
    padding: 1px 0 0 28px;
    }
    .topmenu-pic img {
    border: 2px solid #D8D8D8;
    }
    .topmenu-pic img:hover {
    border: 2px solid #A8EEAD;
    }
    /* submit comment style*
    ------------------------------------------------------------------*/
    width for this menu is width: 215px; and I don't konw how to make a width rule for text too , width: 215px; too .

    thanks !
    ... still know to chase my visions ...

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,516
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    Validation of this code :
    If you are talking about the w3c validator errors then I would first need to know what doctype you are using. The errors will be different depending on whether you are using html or xhtml and whether you are using strict or transitional etc.

    As I mentioned before the list needs to be inside a ul and not a div. To get anywhere near validation it looks as though you should be using htm4.01 transitional to support all your deprecated mark up and the code would look like this:

    Code:
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Untitled Document</title>
    </head>
    <body>
    <div class="footer">
        <ul id="footerlist">
            <li>
                <!-- Search Google -->
                <form method="get" action="http://www.google.com/custom" target="google_window">
                    <table align="right">
                        <tr>
                            <td nowrap="nowrap" valign="top" align="left" height="32"><label for="sbi" style="display: none">Enter your search terms</label>
                                <input type="text" name="q" size="31" maxlength="255" value="" id="sbi">
                                <label for="sbb" style="display: none">Submit search form</label>
                                <input type="submit" name="sa" value="Google Search" id="sbb">
                                <input type="hidden" name="client" value="pub-1344812231755813">
                                <input type="hidden" name="forid" value="1">
                                <input type="hidden" name="ie" value="ISO-8859-1">
                                <input type="hidden" name="oe" value="ISO-8859-1">
                                <input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000000;GFNT:0000FF;GIMP:0000FF;FORID:1">
                                <input type="hidden" name="hl" value="en">
                            </td>
                        </tr>
                    </table>
                </form>
                <!-- Search Google -->
            </li>
            <li>
                <h1> <a href="index.html"> Home</a> | <a href="disclaimer.html">Disclaimer</a> | <a href="link-exchange.html">Link exchange</a> | <a href="contact-us.html">Contact</a> | <img src="button1-bm.gif" alt="button" border="0" height="16" width="152"> </h1>
            </li>
        </ul>
        <center>
            <h4> Copyright &#169; 2006-2007 <a href="/"><b>title of site </b></a> All rights reserved . Design by MWW . </h4>
        </center>
    </div>
    <div class="refllect2-01"> </div>
    <div class="refllect2-02"> </div>
    </body>
    </html>
    Using the h1 element in your footer isn't semantically correct and another list would have been the right choice. You can only have one H1 per page (in most cases) and it should be the main page title or heading.

    I would suggest that you try and move up to html 4.01 strict and remove the deprecated presentational elements like align="" and use css insterad.

    width for this menu is width: 215px; and I don't konw how to make a width rule for text too
    I'm not quite sure what you mean and why you can't apply a width to the section as required?
    [code]
    .topmenu-text {width:215px}
    [code]

    I guess you mean something else.

  12. #12
    SitePoint Enthusiast
    Join Date
    Jul 2007
    Location
    Hills of Ice
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks mate on advices ! Helped a lot !
    ... still know to chase my visions ...


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
  •