SitePoint Sponsor

User Tag List

Page 2 of 3 FirstFirst 123 LastLast
Results 26 to 50 of 52
  1. #26
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi all,

    I passed the code onto my friend, and hopefully he'll be putting the code up this weekend.

    I can't believe I didn't identify the problem of resizing the browser, leaving the absolute layer in the same place whilst the main table shifts to adjust to the browsers size :-s

    So is it best to size the absolute layer to be related to the top-left corner of the main table?

    Cheers

    Tryst

  2. #27
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    So is it best to size the absolute layer to be related to the top-left corner of the main table
    It needs to be in relation to something other than the body. The top left of the table will do as long as the whole table itself isn't fluid.

    e.g. If the bottom of the table rises towards the top edge but the top edge doesn't move then the layer will not move up. If thats the case you may need to place it in relation to the bottom of the table.

    Its probably not going to be that easy unless you can fix the size of the table.

    It would be much easier if you dropeed the tables and use css for layout but you'd probably have to forego the vertical centering (or have a fixed height for the layout).

    Anyway, if you get it online I'll try and have a look and see what you can do.

    Paul

  3. #28
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, my friends modem is screwed and so is unable to upload anything in the next few days.

    If you want me to email you the files, email me at trystano@aol.com.

    Cheers for this.

    Tryst

  4. #29
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    The Webpage and CSS file

    Hi,

    ok, I have included the webpage and associated CSS file for all to see. I have only included the one webpage in which the probelm lies.

    Just some notes:

    When I included a Doctype to the page, the centred table loses its vertical centring.

    Also, the centered table is not fluid, so I may position the absolute layer relative the top-left of the table.

    Cheers

    Tryst
    Attached Files Attached Files

  5. #30
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Uhm, anyone come up with any solution after :-s

    Tryst

  6. #31
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Uhm, anyone come up with any solution after :-s
    I hate working with tables so here's a css versionall validated)

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>services</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!--<link rel="stylesheet" type="text/css" href="style.css" />-->
    <script type="text/JavaScript">
    <!--
    function MM_reloadPage(init) {  //reloads the window if Nav4 resized
      if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    	document.MM_pgW=innerwidth; document.MM_pgH=innerheight; onresize=MM_reloadPage; }}
      else if (innerwidth!=document.MM_pgW || innerheight!=document.MM_pgH) location.reload();
    }
    MM_reloadPage(true);
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_showHideLayers() { //v6.0
      var i,p,v,obj,args=MM_showHideLayers.arguments;
      for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    	if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
    	obj.visibility=v; }
    }
    //-->
    </script>
    <style type="text/css">
    html,body {height:100%}
    body {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
     background-image: url("images/black_grey_tv2.gif");
     text-align:center;
    }
    #container  {
     width:750px;
     margin:auto;
     height:100%;
     text-align:left;
    }
    body>#container {border:1px solid transparent;}
    #inner {
     position:absolute;
     width:750px;
     height:400px;
     top:50%;
     margin-top:-200px;
     border-top-width: 4px;
     border-top-style: solid;
     border-top-color: #000000;
     border-bottom-width: 4px;
     border-bottom-style: solid;
     border-bottom-color: #000000;
     border-right-width: 4px;
     border-right-style: solid;
     border-right-color: #000000;
     border-left-width: 4px;
     border-left-style: solid;
     border-left-color: #000000;
    }
    img {display:block}
    .fll {float:left}
    #services{
     width:242px;
     color:#fff;
     font-size: 10px;
     height:73px;
     float:left;
     background:transparent url(images/services_14.jpg);
    }
    #services p {padding:0 0 0 2px;margin:0;}
    .servicesLayerGlobal {
     position: absolute;
     overflow: auto;
     left: 298px;
     top: 108px;
     width: 280px;
     height: 150px;
     background: transparent url("images/layer_service.gif");
     border: 1px solid #99AAFF;
     font-size: 10px;
     color: #FFFFFF;
     padding: 5px;
    }
    #servicesNormal {
     visibility: visible;
     border: 1px solid #FFFFFF;
     z-index: 4;
    }
    #webDesignLayer {
     visibility: hidden;
     border: 1px solid #99AAFF;
     z-index: 3;
    }
    #multimediaLayer {
     visibility: hidden;
     border: 1px solid #9977FF;
     z-index: 2;
    }
    #consultancyLayer {
     visibility: hidden;
     border: 1px solid #99AA33;
     z-index: 1;
    }
    .servicesLayerStyle {
     font: bold 10px verdana, arial, sans-serif;
     color: #FFFFFF;
     background:transparent;
     text-align: left;
     text-decoration: underline;
    }
    /* Services Layers */
    .fl1,.fl2,.fl3,.fl4 {
     width:91px;
     height:73px;
     float:left;
    }
    .fl1 { background-image: url(images/services_05.jpg);}
    .fl2 { background-image: url(images/services_07.jpg);}
    .fl3 { background-image: url(images/services_11.jpg);}
    .fl4 { background-image: url(images/services_13.jpg);}
    .fl1 a, .fl2 a, .fl3 a, .fl4 a {
     display:block;
     text-decoration:none;
     width:100%;
     height:100%;
     background:transparent;
     color:#000;
    }
    .fl1 a:hover { background-image: url(images/services_05-over.jpg);}
    .fl2 a:hover { background-image: url(images/services_07-over.jpg);}
    .fl3 a:hover { background-image: url(images/services_11-over.jpg);}
    .fl4 a:hover { background-image: url(images/services_13-over.jpg);}
    </style>
    </head>
    <body>
    <div id="container">
     <div id="inner">
      <img src="images/home_01.jpg" width="750" height="80" alt="" />
      <img src="images/home_02.jpg" width="750" height="8" alt="" />
      <img src="images/services_03.jpg" alt="" width="750" height="192" style="border:none" usemap="#Map" />
      <map name="Map" id="Map">
    			  <area shape="rect" coords="102,81,216,111" href="#" alt="" onclick="MM_showHideLayers('servicesNormal','','hide','webDesignLayer','','hide','multimediaLayer','','show','consultancyLayer','','hide')" />
    			  <area shape="rect" coords="127,122,224,155" href="#" alt="" onclick="MM_showHideLayers('servicesNormal','','hide','webDesignLayer','','hide','multimediaLayer','','hide','consultancyLayer','','show')" />
    			  <area shape="rect" coords="126,33,218,65" href="#" alt="" onclick="MM_showHideLayers('servicesNormal','','hide','webDesignLayer','','show','multimediaLayer','','hide','consultancyLayer','','hide')" />
    		</map>
      <img class="fll" src="images/services_04.jpg" width="8" height="73" alt="" />
      <div class="fl1"><a href="home.html"></a></div>
      <img class="fll" src="images/services_06.jpg" width="12" height="73" alt="" />
      <div class="fl2"><a href="portfolio.html"></a></div>
      <img class="fll" src="images/services_08.jpg" width="12" height="73" alt="" />
      <img class="fll" src="images/services_09.jpg" width="91" height="73" style="border:none" alt="" />
      <img class="fll" src="images/services_10.jpg" width="11" height="73" alt="" />
      <div class="fl3"><a href="about_us.html"></a></div>
      <img class="fll" src="images/services_12.jpg" width="10" height="73" alt="" />
      <div class="fl4"><a href="contact.html"></a></div>
     
      <div>
       <div id="services">
    	<p>Our skills span across a wide range of computing boundaries, including 
    		  multimedia, e-commerce, and graphic design. For an in-depth 
    		  overview, please click the relevant link.</p>
       </div>
      </div>
      <div style="clear:both"></div>
      <img src="images/services_15.jpg" width="750" height="12" alt="" />
      <img src="images/home_16.jpg" width="750" height="9" alt="" />
      <img src="images/home_17.jpg" width="750" height="26" alt="" />
      
      <div id="servicesNormal" class="servicesLayerGlobal">
       <span class="servicesLayerStyle">Services</span>
       <p>Please view the selection of our skill base by clicking on the
       links situated on the left.</p>
      </div>
      <div id="webDesignLayer" class="servicesLayerGlobal">
       <span class="servicesLayerStyle">Web Design/E-Business</span>
       <p>Whether you intend to create a website/e-business presence from start-up, 
    	  or wish to simply upgrade and remodel your existing website/e-business to 
    	  adapt to today's high standard of website layout and usability, we provide 
    	  a comprehensive range of web development skills and tools to help aide your 
    	  solution. Our team of designers specialise in a host of skills that allow 
    	  us to implement simple and effective informational websites, e-business (e-commerce) 
    	  frameworks, and website redesign and/or restructuring.</p>
    	 <p>Our goal, as innovative designers, is to visualise and implement websites/e-business' 
    	  that are both unique, and imaginative, as well as adhering to web design principles, 
    	  i.e. usability, functionality, interface design, and IA (Information Architecture).</p>
    	 <p>As well as the 'basics' we also strive to ensure that security and manageability are 
    	 of the primary importance to e-business solutions, as well ensuring that database driven
    	  websites are fully functional and integrated within a companies business infrastructure.</p>
    	 <p>At the end of the day, we aim to provide our customers with a return on their 
    	  investment, and by combining our development strategy with the latest use 
    	  of web development technology we ensure such aims are satisfied.</p>
    	 <p>If you require any particular element of a website or e-business please contact 
    	  us.</p>
      </div>
      <div id="multimediaLayer" class="servicesLayerGlobal">
       <span class="servicesLayerStyle">Multimedia/Graphic Design</span>
       <p>Imagination, innovation and originality are key components of a diverse skill set that are required when delivering multimedia 
       and graphic design projects. Our team aims to create work that will make an impact and influence our 
       customers, as well as on our customers very own customers/clients.</p>
       <p>We apply our knowledge to a wide range of specialist high-end technologies to produce such 
       multimedia assets so that our customers benefit from such investments in our work. As well as 
       graphic design, and multimedia presentations, our team are also specialised in creating online 
       animations (Flash). There are many avenues that can be taken with Flash animation ranging from 
       simple modules of flash animation on a webpage, to fully integrated Flash driven websites.</p>
       <p>Our team posses extensive experience in graphic and multimedia creation, which can be geared 
       towards:</p>
       <ul>
    	<li>Logo design</li>
    	<li>Image creation, and manipulation</li>
    	<li>Multimedia Presentation CDs (Director)</li>
    	<li>Graphic animations, and micro websites</li>
    	<li>E-cards</li>
       </ul>
       <p>However you wish apply these various forms of multimedia to your website or e-business, our 
       team are capable of merging such multimedia assets in with current websites, and/or creating 
       standalone applications comprising of a variety of multimedia objects.</p>
       <p>Please contact us for issues or queries concerning multimedia development.</p>
      </div>
      <div id="consultancyLayer" class="servicesLayerGlobal">
       <span class="servicesLayerStyle">Consultancy/Reselling</span>
       <p>The internet is a big and overwhelming environment with 
       many different features and possibilities, possibilities that can leverage your current business to a 
       worldwide customer base. Gaining a firm and sound understanding of these potentially rewarding possibilities 
       can sometimes be overwhelming and confusing. Our advice can help overcome such issues and misconceptions, 
       as well bringing to you some our ideas regarding the core recommendations when creating new business 
       channels and processes to accommodate the Internet enviroment.</p> 
       <p>You may already have a website and simply need some partial advice on how to further improve your current 
       online business strategy, or even need advice concerning usability and functionality. Whatever you questions, 
       whether they are technical or not, we can provide the answers.</p>
      </div>
      
     </div>
    </div>
    </body>
    </html>
    Sorry about all the code everyone

    Paul

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

    Heres the updated css to make it work with ie5 and ie5.5:
    Code:
    html,body {height:100%}
    body {
     font-family: Verdana, Arial, Helvetica, sans-serif;
     margin: 0;
     padding: 0;
     background-image: url("images/black_grey_tv2.gif");
     text-align:center;
    }
    #container  {
     width:750px;
     margin:auto;
     height:100%;
     text-align:left;
    }
    body>#container {border:1px solid transparent;}
    #inner {
     position:absolute;
     width:750px;
     height:400px;
     top:50%;
     margin-top:-204px;
     border:4px solid #000;
    }
    *html #inner{
     width:758px;
     w\idth:750px;
     height:408px;
     he\ight:400px;
    }
    img {display:block}
    .fll {float:left}
    #services{
     width:242px;
     color:#fff;
     font-size: 10px;
     height:73px;
     float:left;
     background:#000 url(images/services_14.jpg);
    }
    *html #services {width:254px;w\idth:242px}
    #services p {padding:0 0 0 2px;margin:0;}
    .servicesLayerGlobal {
     position: absolute;
     overflow: auto;
     left: 298px;
     top: 108px;
     width: 280px;
     height: 150px;
     background: transparent url("images/layer_service.gif");
     border: 1px solid #99AAFF;
     font-size: 10px;
     color: #FFFFFF;
     padding: 5px;
    }
    #servicesNormal {
     visibility: visible;
     border: 1px solid #FFFFFF;
     z-index: 4;
    }
    #webDesignLayer {
     visibility: hidden;
     border: 1px solid #99AAFF;
     z-index: 3;
    }
    #multimediaLayer {
     visibility: hidden;
     border: 1px solid #9977FF;
     z-index: 2;
    }
    #consultancyLayer {
     visibility: hidden;
     border: 1px solid #99AA33;
     z-index: 1;
    }
    .servicesLayerStyle {
     font: bold 10px verdana, arial, sans-serif;
     color: #FFFFFF;
     background:transparent;
     text-align: left;
     text-decoration: underline;
    }
    /* Services Layers */
    .fl1,.fl2,.fl3,.fl4 {
     width:91px;
     height:73px;
     float:left;
    }
    .fl1 { background-image: url(images/services_05.jpg);}
    .fl2 { background-image: url(images/services_07.jpg);}
    .fl3 { background-image: url(images/services_11.jpg);}
    .fl4 { background-image: url(images/services_13.jpg);}
    .fl1 a, .fl2 a, .fl3 a, .fl4 a {
     display:block;
     text-decoration:none;
     width:100%;
     height:100%;
     background:transparent;
     color:#000;
    }
    .fl1 a:hover { background-image: url(images/services_05-over.jpg);}
    .fl2 a:hover { background-image: url(images/services_07-over.jpg);}
    .fl3 a:hover { background-image: url(images/services_11-over.jpg);}
    .fl4 a:hover { background-image: url(images/services_13-over.jpg);}
    *html .fl1, *html .fl2,*html .fl3,*html .fl4 {margin-left:-3px;marg\in-left:0}
    *html .fll {margin-left:-6px;marg\in-left:0}
    Should look ok in Mozilla 1.2,1.4, IE5 5.5 & 6, NN6.2, Firebird 0.61 & Opera7.

    Paul

  8. #33
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Are you using layers for dynamic reasons?

    If so they're no good. Some people view with javascript off. What happens then?

    That's why I'm trying to use a scrolling method, even with js off people can still see what they've searched for in Search Engines.

    Unfortunatly, only IE allows this method without the ugly scrollbars, so my solution was to have a large layer (contained) inside a scrolling layer (container) with overflow:auto, allowing it to scroll with js off. With js on you can set the overflow to hidden, then instead of using the scrollTo method use positioning method to the contained div. If you position the top of the contained div it will move up inside the container div. If all of your divs inside the contained div are the same size as the container, only one is visible at any time. And everthing can be seen with js on or off.

    Still working on it, but it's a good alternative.
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  9. #34
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Here's a small example. Works with JS on or off; its accessable with tab button; and viewable at all font sizes in every browser......
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <style type="text/css">
    #menu { position:absolute;top:0em;left:0em;width:5em; height: 10em }
    #container { position:absolute;top:6em;left:6em;width:20em;height:10em;overflow:auto;border:2px solid black }
    #container div { position:absolute;top:0em;left:0em;width:20em;height:auto }
    #container div div { position:relative;width:20em;height:10em;overflow:auto }
    </style>
    <script type="text/javascript">
    function showDiv(n) {
    document.getElementById("container").getElementsByTagName('div')[0].style.top=(-10*n)+"em";
    }
    </script>
    </head>
    <body>
    <div id="container">
    <div>
    <div style="background:yellow"><a name="layer0">This is division 0</a></div>
    <div style="background:red"><a name="layer1">This is division 1</a></div>
    <div style="background:green"><a name="layer2">This is division 2</a></div>
    <div style="background:blue"><a name="layer3">This is division 3</a></div>
    </div>
    </div>
    <div id="menu">
    <a href="#layer0" onmouseover="showDiv(0)" onfocus="showDiv(0)">Show 0 </a>
    <a href="#layer1" onmouseover="showDiv(1)" onfocus="showDiv(1)">Show 1 </a>
    <a href="#layer2" onmouseover="showDiv(2)" onfocus="showDiv(2)">Show 2 </a>
    <a href="#layer3" onmouseover="showDiv(3)" onfocus="showDiv(3)">Show 3 </a>
    </div>
    <script type="text/javascript">
    document.getElementById("container").style.overflow="hidden"
    </script>
    </body>
    Let me know what you all think....... please.....
    1 problem, mozilla users will see it............
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  10. #35
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    Are you using layers for dynamic reasons?
    Nothing to do with me I just converted Tryst's tables to css. (I left the js where it was (except I took out the js for the rollovers)).

    Your example didn't seem to work in Firebird.

    Why use javascript at all? If you're happy with info being displayed on rollover only that is
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>Test</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css">
     div.test{ position:absolute;top:6em;left:10em;width:20em;height:10em;overflow:auto;border :2px solid black }
    .layer0 {background:yellow;color:black}
    .layer1 {background:green;color:black}
    .layer2 {background:red;color:black}
    .layer3 {background:blue;color:black}
    span {display:none}
    a {color:black;backround:#fff}
    a:hover {background:#fffffc;color:red;text-decoration:none;}
    a:hover span {
     display:block;
     position:absolute;
     top:6em;
     left:10em;
     width:20em;
     height:10em;
     overflow:auto;
     border:2px solid black;
    }
    </style>
    </head>
    <body>
    <ul>
    <li><a href="#">Show 0<span class="layer0">This is division 0</span></a></li>
    <li><a href="#">Show 1<span class="layer1">This is division 1</span></a></li>
    <li><a href="#">Show 2<span class="layer2">This is division 2</span></a></li>
    <li><a href="#">Show 3<span class="layer3">This is division 3</span></a></li>
    </ul>
    <div class="test"></div>
    </body>
    </html>
    Paul

  11. #36
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    WoW, I like that Paul
    I didn't realise you could put an object style after a:hover, cool.

    Is there one for focus? Can't find it in my dhtml book, events points to js but I know it has a section on link styles.

    But display:none can't be used, the method is used by SEO cheats. I don't think SE's like it.
    My site went up as soon as I took it out of my css. ( I was using js method )

    Could I make it a scrolling one to start, then change it with css?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  12. #37
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, you deserve the 'Member of the month' award 2 months running!

    Thanks for that. I'll try it out tomorrow when I get a spare hour or 2. Just been spending the last 8 hours filling out graduate application forms

    Cheers

    Tryst

  13. #38
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I didn't realise you could put an object style after a:hover, cool.
    The css specs allow hover on most elements however IE only recognises it on the <a> element which is a shame as its really quite useful. (Mozilla/firebird will let you use it on other elements though.)

    In IE this means that you are limited to placing span between the <a> tags as obviously you can't nest a block level element iside an <a> tag. However you can turn the span into display block and place it anywhere you like so its quite useful.

    I mainly use it for swapping images etc as in these examples:

    http://www.pmob.co.uk/temp/disjointedcssrollover.htm
    http://www.pmob.co.uk/temp/disjointedrollover2.htm

    But display:none can't be used, the method is used by SEO cheats. I don't think SE's like it.
    My site went up as soon as I took it out of my css. ( I was using js method )
    I don't know if search engines penalise you for using display:none. I would assume that they would check for spamming keywords etc and the display:none would make no difference (but I may be wrong).

    You can use visibility:hidden and visibility:visible instead. Display:none makes the element take up no space but visibilty:hidden just hides it but leaves the space still allocated.

    There is a focus selector and is used to to apply styles to any element which currently has focus. According to eric meyers book ":focus can be combined with other pseudo classes to produce state-specific hover effects" but I don't think its well supported so its not much use.
    Code:
    a:focus:hover {background:yellow;}
    input:focus {background:yellow}
    Paul

  14. #39
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    focus would be a good one for css accessability.

    but what a brilliant accessability css script....a kind of zoom in itself..... I think I'll add it to my script just for that..... shouldn't be hard. Then visiblity or display will be visible onload, which is what SE's like.

    On my script, could you try lowering the widths of each contained div? by 0.3125em (0.5 will do it, about 5px standard font on my comp ) and see if it works? I'd like to use it.....

    It's a shame some SE's are so strict, but WW now check my posts because I argue my point!!! lol... ( never too aggressive though )

    They don't like visibility:hidden or display:none when checking css or style. I wanted dynamic text from day 1, and was arguing my point. I was greyed out and had to find out why now at 3 (4 occasionally)

    That's why I have scrollbars all over my site in anything but IE.

    Added: Maybe that was what went wrong with Florida? Too many people using dynamic text.....

    Added2: It's a shame webdesigners cant program for what they think would be best for end users...... ( then offer alternatives, same as js menus, you offer an alternative, being the sitemap or noscript short menu )

    Added3: How would I go about allowing the css function to be turned on/off?

    Thanks Paul...
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  15. #40
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    On my script, could you try lowering the widths of each contained div? by 0.3125em (0.5 will do it, about 5px standard font on my comp ) and see if it works? I'd like to use it
    It works ok in Firebird until Javascript is turned off then it does nothing i'm afraid.

    They don't like visibility:hidden or display:none when checking css or style.
    Does google parse CSS external files? I was under the impression that they didn't. I have just finished a site that uses display:none to hide elements including the javascript stylechanger and the site is still ranked no.1 with google for the selected search terms.

    It's a shame webdesigners cant program for what they think would be best for end users
    I agree, I prefer to code for the end user and not the search engine. So I will continue to use valid css and html in valid ways. After all using media=print pretty much relies on hiding content/images for printing purposes.

    How would I go about allowing the css function to be turned on/off?
    A php styleswitcher to select a different stylesheet perhaps.

    Paul

  16. #41
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.

    When you turned js off, were the scrollbars visible?

    I have just finished a site that uses display:none
    I'll be interested to see how it does in the next major update. Most of my new pages go close to the top, then move down abit when spidered more. I hope you have no problems, thats a really nice css script......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  17. #42
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    When you turned js off, were the scrollbars visible?
    I tried it in Firebird 0.6.1 and Mozilla 1.4 and they were both the same with javascript turned off. There were no scrollbars visible and when you clicked the link the page jumped up a bit but the content remained hidden. They were ok with javscript turned on unlike Opera7 which didn't like it all I'm afraid.

    Sorry I can't suggest anything as javascript is my weak point (amongst others).

    Paul

  18. #43
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Cheers Paul. I think I'm going back to pixels and scrollbars, and changing it scrollTop or scrollTo.

    Regarding Accessibility, I think I'll add a link to Opera, they give it away for free for certain groups....
    Opera Software today unveiled its new Global Donations Program, giving registered versions of Opera away for free to organizations for the physically challenged, elementary schools, as well as Web designer schools and programs. Organizations can apply for free registered versions of Opera through the Global Donations page.
    source:
    http://www.opera.com/pressreleases/e...5/20020528.dml

    I will also add a tab-focusable gif, which when clicked sends innerHTML to a new window.

    Thanks......
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  19. #44
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul, so with the updated CSS code you have also posted (to work with IE 5, 5.5). Is this CSS Code the same as the code that is contained within the HTML file/code U posted, aside from it having some work arounds to compensate for IE's bugs?

    Why have you commented out the link to the CSS file in the HTML code? Am I supposed to get the browser to read both, the internal CSS code, and the external file containing the CSS code? I'm a bit confused as to where the browser will pick up the relevant CSS code.

    Cheers

    Tryst

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

    The updated css code I supplied should replace all the previous css code. (This is just to to fix it for ie5 and 5.5).

    I left the code in the head so you could see it but you should take all the css code out and put it in an external file.

    The link to the external file was commented out because I wan't using it. (You can delete it if you want or replace it with the code from the head as mentioned below.)

    All the ccs code you need is in the head just copy it to an external file and set up a new link to it.

    I usually design with the code in the head as its easier and quicker to change and then once its all working I take it out and put it in an external file.

    Obviuosly all links need to be relative to the css file so if you have background images make sure the paths are correct. If you store it in the same directory as the file itself then theres no problem , but if you store the css in another directory then make sure the image paths are correct.

    Paul

  21. #46
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul, I have just uploaded the webpage with the related CSS on it and the pages seems to go tits-up when viewed in IE on a Mac (version 5.2). What could the reason be for this?

    Cheers

    Tryst

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

    Well the main reason is that Ie5.2 on the mac is a buggy browser and has a lot of problems.

    I don't have a mac to test on but if you have one to test then it's a matter of trial and error and finding which styles it doesn't like.

    I know it may sound harsh but if the codes valid and it works on 95% of the browsers then I'm not to keen to alter it.

    If you have a mac to test then you can tell me what's not working and I could try and offer alternatives but it might be a little difficult to and fro-ing.

    Have you got a link to the online version anyway as I have deleted any code I had from before.

    Paul

  23. #48
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    the website is... http://www.reflectivestudios.co.uk

    It works perfect across all other browsers, apart from the MAC 5.2 IE (suprisingly )version.

    Cheers

    Tryst

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

    I see you went back to tables Actuallt that might be your problem as the mac has some problems with tables and positioning.

    Have a look here:
    http://developer.apple.com/internet/css/ie5cssbugs.html

    You may be able to see if any of these bugs apply to your layout and then you can try for a solution.

    Paul

  25. #50
    Knowledge is key 2 progression Tryst's Avatar
    Join Date
    Sep 2003
    Location
    Wales
    Posts
    1,181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    The webpage you sorted out through CSS is the same (the services page ). The remainder of the site is, and also was, in tables. The problem is that the services page, the one purely CSS based, is the one that is erroneous.

    I will check that link, but am sure the problems isn't to do with tables as the other pages (that are based on tables) are displaying fine :s

    Cheers

    Tryst


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
  •