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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS Layout & change image on mouse over

    Hi,

    I'm having trouble getting this CSS layout to work:

    here's the HTML:

    Code:
    <div id=preF_computername>
      <fieldset>
        <legend>Please enter a valid computer name:</legend>
        <div id=preF_computername_embed_1>
            <input name="preF_PCName"></input>
        </div>
        <div id=preF_computername_embed_2>
        <span id=preF_PCNameBtn class=btn></span>
        </div>
      </fieldset>
    </div>
    Here's the CSS layout:

    Code:
    #preF_computername {
      width: 100%;
      height: 100px;
      padding: 4px 10px 4px 10px; 
    }
    #preF_computername_embed_1 {
      width: 500px;
      height: 100px;
      float:left;
    }
    #preF_computername_embed_2 {
      width: 250px;
      height: 100px;
      float:right;
    }
    preF_PCNameBtn.btn {
      position:relative;
      top:15px;
      left:15px;
      background-image:url('img/arrow.jpg');
    }
    preF_PCNameBtn.btn:hover {
      position:relative;
      top:15px;
      left:15px;  
      background-image:url('img/arrow_onhover.jpg');
      background-repeat:no-repeat;  
    }
    legend {
    	border: 1px solid rgb(55, 116, 171);
    	padding: 2px 6px;
    }
    fieldset {
    	border: 1px solid rgb(55, 116, 171);
    	width: 20em;
    	height:80px;
    	width:780px;
    	padding: 2px 20px 4px 20px;
    }
    The Problem I'm having is the CSS layout is not applying for the span 'preF_PCNameBtn.btn' or 'preF_PCNameBtn.btn:hover', I'm pretty sure there's some basics that I've missed here..?

    also I would like the arrow.jpg to change on mouse over, I want to make sure the code is correct for this also.?

    Thanks!
    Last edited by kiwidj; 05-11-2010 at 12:14 AM.

  • #2
    New Coder
    Join Date
    May 2009
    Posts
    74
    Thanks
    0
    Thanked 7 Times in 7 Posts
    Any link please.

    Regards.

  • #3
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this is for an HTML application - so I can't provide a link sorry

  • #4
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    okay I've got the CSS styles working now but I've got a different issue now:

    I'm now using the following:

    Code:
    <div id=preF_computername>
      <fieldset>
         <legend>Please enter a valid computer name:</legend>
           <div id=preF_cname_1><input name="preF_PCName"></input></div>
           <div id=preF_cname_2><a href="default.asp"></a></div>
      </fieldset>
    </div>

    Code:
    #preF_computername {
      width: 100%;
      height: 100px;
      padding: 4px 10px 4px 10px; 
    }
    #preF_cname_1 {
      width: 500px;
      height: 70px;
      float:left;
    }
    #preF_cname_2 {
      width: 250px;
      height: 70px;
      float:right;
    }
    a {
      position:relative;
      top:15px;
      left:15px;
      background-image:url('img/arrow.jpg');  	
    }
    a:hover {
      position:relative;
      top:15px;
      left:15px;  
      background-image:url('img/arrow_onhover.jpg');
    }
    The problem I have now is that the background image is not displayed at all unless there is text in the <a> tag

    e.g. if I use:

    Code:
    <div id=preF_computername>
      <fieldset>
         <legend>Please enter a valid computer name:</legend>
           <div id=preF_cname_1><input name="preF_PCName"></input></div>
           <div id=preF_cname_2><a href="default.asp"></a></div>
      </fieldset>
    </div>
    ..then NO image (arrow.jpg) is displayed??

    whereas if I use:

    Code:
    <div id=preF_computername>
      <fieldset>
         <legend>Please enter a valid computer name:</legend>
           <div id=preF_cname_1><input name="preF_PCName"></input></div>
           <div id=preF_cname_2><a href="default.asp">SOMETEXT</a></div>
      </fieldset>
    </div>
    ..then part of the image is displayed but only behind the text and not in the rest of the div..?

    the main trouble with that is I dont' want any text as the image is going to be a link to a vbscript subroutine...

  • #5
    New to the CF scene
    Join Date
    May 2010
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Solved!

    I managed to solve the problem, for some reason the CSS wasn't inheriting the size of the background image..

    once I specifically declared a height and a width all started working I am not 100% sure as to why I needed to do that but it solved my problem..


  •  

    Tags for this Thread

    Posting Permissions

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