SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Rollover affecting another DIV

    Hi All,

    I am starting to create a new site that will use a lot of CSS. I have a design created for me that I need to follow. One specification is the 4 links on the home page. I have positioned the links using CSS. I have also positioned the underline image where they need to be and set the visibility to hidden.

    Now when the user mouses over the link I would like the underline image to appear.

    Here is the code for my Page:

    Code:
    <body>
    
    <a href="AboutFACE.html"><div id="LinkOne">About FACE<font size="-1">&reg;</font></div></a>
    <div id="LinkOneLine"><img src="images/LinkOneUnderline.png"></div>
    
    <div id="DividerBarOne"><img src="images/HomeDivideBar.png"></div>
    
    <a href="Resources.html"><div id="LinkTwo">Resources</div></a>
    <div id="LinkTwoLine"><img src="images/LinkTwoUnderline.png"></div>
    
    <div id="DividerBarTwo"><img src="images/HomeDivideBar.png"></div>
    
    <a href="Training.html"><div id="LinkThree">Training</div></a>
    <div id="LinkThreeLine"><img src="images/LinkThreeUnderline.png"></div>
    
    <div id="DividerBarThree"><img src="images/HomeDivideBar.png"></div>
    
    <a href="Actions.htlm"><div id="LinkFour">Action</div></a>
    <div id="LinkFourLine"><img src="images/LinkFourUnderline.png"></div>
    
    </body>
    How do I use CSS to make LinkOneLine appear when the mouse rolls over LinkOne?

    Thanks,

    Matt

  2. #2
    SitePoint Addict Caterwomtious's Avatar
    Join Date
    Dec 2001
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <a href="AboutFACE.html" id="LinkOne">About FACE<span class="registered">&reg;</span></a>
    and
    Code:
    #LinkOne:link, #LinkOne:visited { background: none; }
     #LinkOne:hover, #LinkOne:active { background: url('images/LinkOneUnderline.png'); }
     .registered { font-size: .8em; }

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

    You will need to recode the above into valid code as you have nested block level elements inside inline elements which is not allowed.

    Heres a simple example that you can copy to get the effect that you want. The rollover image is in the anchor itself (no need for another div). Just give the image an id and put it where you want by absolutely placing it.

    If you want it relative to the parent then give the parent a position:relative to gain a local stacking context then the image will be placed in relation to its parent and not the viewport.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    img#test {
     position:absolute;
     left:100px;
     top:100px;
     visibility: hidden;
    }
    a {
     color:red;
     background:#fff;
    }
    a:hover {background:#fffffc}/* background or some other property must change for ie*/
    a:hover img#test {visibility:visible}
    </style>
    </head>
    <body>
    <a href="#">This is some text <img id="test" src="img.gif" width="23" height="26" alt="" /> 
    </a> 
    </body>
    </html>
    Hope thats what you wanted

    Paul

  4. #4
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Holy cow!! Translation please

    You will need to recode the above into valid code as you have nested block level elements inside inline elements which is not allowed.
    What does that mean? I am using Dreamweaver to test the pages as I make them and they seem to be working fine with these nested statements. I believe you when you say they are wrong but I don't see a DIV within a DIV if thats what you mean by "nested elements". Will it fail in other browsers?

    If you want it relative to the parent then give the parent a position:relative to gain a local stacking context then the image will be placed in relation to its parent and not the viewport.
    My brain gave me the "blue screen of death" and then crashed after I read this. After the shock (and fear that i'm in way over my head) cleared I looked at the code and think I have pieced something together.

    I think I can now get the code to make the underline appear. Now about the box of text that should appear with text specific to the link... How can I manipulate that box with a:hover? When hovering over each link the box will show different text and when its not over any link the box is not visible.

    I have attached an image to give an idea.

    Thanks,

    Matt
    Attached Images Attached Images

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

    Heres a rather garish example of what you are asking for. It involves all the techniques you need to do your layout.

    http://www.pmob.co.uk/temp/disjointedcssrollover5.htm

    If the underline is just a solid colour then you can just use the border property, which I have also included in the demo above. Manipulating 2 images makes it a bit harder to code but can be done although positioning both becomes a little complicated.

    Holy cow!! Translation please
    Sorry! As you were requesting what is usually deemed as an advanced technique I assumed you were familiar with the terminology etc

    What does that mean? I am using Dreamweaver to test the pages as I make them and they seem to be working fine with these nested statements
    The fact that it works in ie does not mean that the code is valid or indeeed stable. Although DW produces pretty good code its where you put it that it can't control.

    Although some browsers will allow invalid code to work theres no gurantee that it will work in more compliant browsers like mozilla/firefox which are gaining in popularity at the moment (still a long way to go yet though).

    This code is invalid :

    Code:
    <a href="AboutFACE.html"><div id="LinkOne">About FACE<font size="-1">&reg;</font></div></a>
    Your anchor which is an inline element is surrounding a div which is a block element and is invalid structure. Html has rules and this is one of them

    You can nest inline elements inside a blobk level element but not vice versa. You can nest divs inside divs with no problems either, but you cant nest block level elements inside inline elements such as anchors.

    The reasoning behind it is that block level elements generate a line-feed whereas inline elements don't therefore you shouldn't need to do it that way around.

    Hope that helps

    Paul

  6. #6
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Oops sorry,
    I've been working on this code since you posted it but I forgot to post a message saying thanks!! I am still working on it but I think I'll get it eventually.

    Thanks!!
    Matt

  7. #7
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok now this is getting good

    I changed my mind (this morning) and decided to throw out the idea of using frames and stick to what the pro's say... CSS. So I went to your (Paul) sticky post and grabbed one of your Header/Footer 2 column layouts and removed the left column. I then stuck the CSS you created for me into it and have been playing around with it to get it to look right.

    Heres where I am, at the moment.

    www.faceproject.org/new

    Problem #1: Why does the first text/span always start about 100px to the right of the others? Hover over each item and you'll see what I'm talking about.

    Problem #2: How can I insert images between the <li>'s? I need to insert the vertical yellow bars that will seperate my links.

    Problem #3: What is the "message" div for? Its empty...

    Thanks for any assistance

    Matt

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,288
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    1) You missed the id out of the list so the left psoition isn't reset correctly.

    2)You can place the images after the anchor and then place them absolutely where you want.

    3) the message div was just for the outline to show a where the mesdsage would appear and is not needed.

    Heres the code updated.
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>FACE</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
    /* commented backslash mac hiding hack  \*/ 
    html, body{height:100%;} 
    /* end hack */ 
    body {
     padding:0;
     margin:0;
     background:#000000;
     color: #000000;
     text-align:center;
    }
    #wrapper{
     height:100%;
     min-height:100%;
     margin-left:auto;
     margin-right:auto;
     width:800px;
     text-align:left;
     background:#000000 url(background-swoosh.png) no-repeat;
     border-left:1px solid #000;
     border-right:1px solid #000;
     margin-bottom:-52px;
     color: #000000;
     position:relative;/*stacking context*/
    }
     
    html>body #outer{height:auto;} /*for mozilla as IE treats height as min-height anyway*/
    #footer {
     width:100%;
     clear:both;
     height:50px;
     border-top:1px solid #000;
     border-bottom:1px solid #000;
     background-color: #af1e2d;
     text-align:left;
     position:relative;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 10pt;
     font-weight: bold;
     text-decoration: none;
     text-indent: 15pt;
     vertical-align: middle;
    }
    * html #footer {/*only ie gets this style*/
     \height:52px;/* for ie5 */
     he\ight:50px;/* for ie6 */
    }
    #clearfooter{clear:both;height:50px;}/*needed to make room for footer*/
    div,p  {margin-top:0}/*clear top margin for mozilla*/
    ul#links img {
     position:absolute;
     margin:0;
     padding:0;
     left:0px;
     top:35px;
     visibility: hidden;
     text-decoration: none;
    }
     li a span {
     position:absolute;
     top:-50px;
     left:75px;
     width:500px;
     height:125px;
     visibility:hidden;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 13pt;
     font-weight: normal;
     color: #f2bf49;
     text-decoration: none;}/*hide text initially*/
     
    ul#links li#face a span {left:0px}
    ul#links li#resource a span {left:-200px}
    ul#links li#training a span {left:-400px}
    ul#links li#action a span {left:-600px}
    ul#links {
     margin:0;
     padding:0;
     list-style:none;
     width:800px;
     position:relative;
    }
    ul#links li{
     margin:0;
     padding:0;
     float:left;
     width:200px;
     text-align:left;
     left: 0px;
     top: 300px;
     color:yellow;
    }
    li#face,li#resource,li#training, li#action, {position:relative;/*stacking context*/}
    li {position:relative}
    ul#links a {
     color:#af1e2d;
     background:#000;
     display:block;
     padding-bottom:10px;
     text-decoration:none;
     font-family: Arial, Helvetica, sans-serif;
     font-size: 23pt;
     font-weight: bolder;
    }
    ul#links a:hover {
     background:#000;/* background or some other property must change for ie*/
     border-bottom:10px solid black;
     padding-bottom:0;
    }
    ul#links a:hover img {visibility:visible}
    ul#links a:hover span {visibility:visible}
    ul#links li span.bar{position:absolute;right:15px;top:5px}
    </style>
    </head>
    <body>
    <div id="wrapper"> 
      <ul id="links">
    	<li id="face"><a href="#">About Face<img src="images/LinkOneUnderline.png" border="0" /><span>this 
    	  is the text that is associated with the about face link</span> </a><span class="bar"> | </span></li>
    	<li id="resource"><a href="#">Resources<img src="images/LinkTwoUnderline.png" border="0" /><span>this 
    	  is the text that is associated with the resource link</span> </a><span class="bar">  | </span></li>
    	<li id="training"><a href="#">Training<img src="images/LinkThreeUnderline.png" border="0" /><span>this 
    	  is the text that is associated with the training link</span> </a><span class="bar">  | </span></li>
    	<li id="sep3"><img src="images/Seperator3.png"></li>
    	<li id="action"><a href="#">Action<img src="images/LinkFourUnderline.png" border="0" /><span>this 
    	  is the text that is associated with the action link</span> </a> </li>
      </ul>
      <div id="clearfooter"></div>
      <!-- to clear footer -->
    </div>
    <!-- end outer div -->
    <div id="footer"><font color="#FFFFFF">FACE<font size="1">&reg; <font size="2">Resources. 
      Training. Action. </font></font></font></div>
    <div id="header"> </div>
    </body>
    </html>
    The footer is now working proplerly and the text appears in the right place. The only thing you will need to do is replace the "|" with whatever image you require. As the text is different sizes you may want to set up an id for each span and place each image slightly differently in order to center it.

    The techiques are in place so just copy the format of the existing one

    Paul

  9. #9
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    I've copied and pasted your code. When I try to use an image in place of the seperator, nothing shows up. Is there some reason text will work but not an image?

    www.faceproject.org/new

    Thanks,

    Matt

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

    Well if you look at the top of the css you will see that images were switced off in the links so that they could be revealed.

    Therefore you will to turn back on the specific images that you ant to show all the time.

    e.g.
    Code:
    ul#links li span.bar img {visibility:visible;}
    Now the image will show

    Paul

  11. #11
    SitePoint Addict matt_12511's Avatar
    Join Date
    Feb 2004
    Location
    Michigan
    Posts
    256
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect!! Thanks paul!!

    I have some new/different questions I will start a new post for them. I hope to have your help there as well.

    Matt

    ps. here is the home page so far: www.faceproject.org/new


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
  •