SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 38
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question The issue is now a lot more complicated.

    I am currently designing a site larger then any I have done before and so am entering the realm of CSS and javascript menu. This is making me very stressed. I have worked out the top navigation bar with drop-down links and after only a minor amount of pain got it looking how I wanted.

    The Side Navigation is a problem. I want to create a menu like this (at this point I'm fine and my stress levels are low), then I try and make it look like the side navigation on this site (my stress levels skyrocket)
    Everything I try seems to not work, or only make around the text highlight, or it moves the list into the wrong place, yet still not displaying properly.
    Any ideas, pointer, pointing out the obvious I have missed would be most appreciated!!

    loveLee
    Last edited by loveLee; Oct 29, 2006 at 15:10.

  2. #2
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello loveLee, and welcome to Sitepoint. Is there a chance I can see your code, rather than the examples you have so kindly provided?

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    my code is so bad
    this is my latest attempt at rejigging of someone eles code.
    my style script as it currently is

    Code:
    td:hover{
    background-color:#00FF66;
    }
    ul#menu {
    	width: 170px;
    	list-style-type: none;
    	font:Verdana;
    	color:#FFFFFF;
    	border-top: 1px solid #FFFFFF;
    	margin: 0;
    	padding: 0;
    	background-color: #f39f2b;
    	text-indent: 20px;
    }
    
    ul#menu ol {
    	color:#FFFFFF;
      	display: none;
    	text-align: left;
    	list-style-type: none;
      	margin: 0;
      	padding: 5px;
    }
    
    ul#menu li, 
      ul#menu a {
    	font-family: verdana, sans-serif;
    	font-size: 12px;
    }
    
    ul#menu li {
      border-bottom: solid 1px #FFFFFF;
      line-height: 18px;
    }
    
    ul#menu ol li {
      border-bottom: none;
    }
    
    
    ul#menu a {
    	color:#333333;
      	text-decoration: none;
    	outline: none;
    }
    
    ul#menu a:hover {
    	color: #FFFFFF;
    	background-color: #F7BC6B;
    	width: 170px;
    	padding: 2px 30px;
    	position: static;
    	left: -30px;
    }
    
    ul#menu a.active {
    	color: #666666;
    }

  4. #4
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance you can provide a link to the page that you're working on so I can see it all in action?

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Any chance you can provide a link to the page that you're working on so I can see it all in action?
    I would love to, but due to a slow tech I don't have access to a testing site as yet.

  6. #6
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah, how about posting all the code here then (all the HTML, CSS and JavaScript code anyway)?

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    ah, how about posting all the code here then (all the HTML, CSS and JavaScript code anyway)?
    here ya go---with more (this is the test document before I put it into the larger page)
    Thanks for your patience , I feel like a total newb


    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>
    <style type="text/css">
    td:hover{
    background-color:#00FF66;
    }
    ul#menu {
    	width: 170px;
    	list-style-type: none;
    	font:Verdana;
    	color:#FFFFFF;
    	border-top: 1px solid #FFFFFF;
    	margin: 0;
    	padding: 0;
    	background-color: #f39f2b;
    	text-indent: 20px;
    }
    
    ul#menu ol {
    	color:#FFFFFF;
      	display: none;
    	text-align: left;
    	list-style-type: none;
      	margin: 0;
      	padding: 5px;
    }
    
    ul#menu li, 
      ul#menu a {
    	font-family: verdana, sans-serif;
    	font-size: 12px;
    }
    
    ul#menu li {
      border-bottom: solid 1px #FFFFFF;
      line-height: 18px;
    }
    
    ul#menu ol li {
      border-bottom: none;
    }
    
    
    ul#menu a {
    	color:#333333;
      	text-decoration: none;
    	outline: none;
    }
    
    ul#menu a:hover {
    	color: #FFFFFF;
    	background-color: #F7BC6B;
    	width: 170px;
    	padding: 2px 30px;
    	position: static;
    	left: -30px;
    }
    
    ul#menu a.active {
    	color: #666666;
    }
    
    </style>
    </style><script type="text/javascript">
    <!--
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */
    
    /* Coded by Travis Beckham
       http://www.squidfingers.com | http://www.podlob.com
       version date: 06/02/03
       If want to use this code, feel free to do so, but please leave this message intact. */
    
    // Node Functions
    
    if(!window.Node){
      var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
    }
    
    function checkNode(node, filter){
      return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
    }
    
    function getChildren(node, filter){
      var result = new Array();
      var children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        if(checkNode(children[i], filter)) result[result.length] = children[i];
      }
      return result;
    }
    
    function getChildrenByElement(node){
      return getChildren(node, "ELEMENT_NODE");
    }
    
    function getFirstChild(node, filter){
      var child;
      var children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        child = children[i];
        if(checkNode(child, filter)) return child;
      }
      return null;
    }
    
    function getFirstChildByText(node){
      return getFirstChild(node, "TEXT_NODE");
    }
    
    function getNextSibling(node, filter){
      for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
        if(checkNode(sibling, filter)) return sibling;
      }
      return null;
    }
    function getNextSiblingByElement(node){
            return getNextSibling(node, "ELEMENT_NODE");
    }
    
    // Menu Functions & Properties
    
    var activeMenu = null;
    
    function showMenu() {
      if(activeMenu){
        activeMenu.className = "";
        getNextSiblingByElement(activeMenu).style.display = "none";
      }
      if(this == activeMenu){
        activeMenu = null;
      } else {
        this.className = "active";
        getNextSiblingByElement(this).style.display = "block";
        activeMenu = this;
      }
      return false;
    }
    
    function initMenu(){
      var menus, menu, text, a, i;
      menus = getChildrenByElement(document.getElementById("menu"));
      for(i = 0; i < menus.length; i++){
        menu = menus[i];
        text = getFirstChildByText(menu);
        a = document.createElement("a");
        menu.replaceChild(a, text);
        a.appendChild(text);
        a.href = "#";
        a.onclick = showMenu;
        a.onfocus = function(){this.blur()};
      }
    }
    
    if(document.createElement) window.onload = initMenu;
    //-->
    </script>
    
    </head>
    
    <body>
    
    <ul id="menu">
      <li>Training
        <ol>
          <li><a href="#">Sub Item 1.1</a></li>
          <li><a href="#">Sub Item 1.2</a></li>
          <li><a href="#">Sub Item 1.3</a></li>
        </ol>
      </li>
      <li>Menu Item 2
        <ol>
          <li><a href="#">Sub Item 2.1</a></li>
          <li><a href="#">Sub Item 2.2</a></li>
          <li><a href="#">Sub Item 2.3</a></li>
        </ol>
      </li>
      <li>Menu Item 3
        <ol>
          <li><a href="#">Sub Item 3.1</a></li>
          <li><a href="#">Sub Item 3.2</a></li>
          <li><a href="#">Sub Item 3.3</a></li>
        </ol>
      </li>
      <li>Menu Item 4
        <ol>
          <li><a href="#">Sub Item 4.1</a></li>
          <li><a href="#">Sub Item 4.2</a></li>
          <li><a href="#">Sub Item 4.3</a>
            
          </li>
    	  
        </ol>
      </li>
    </body>
    </html>

  8. #8
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Any chance I can see the top of that code snippet (the DOCTYPE declaration and the HTML element, for instance - or better yet, the entire page)?

    Also, it looks like you forgot to close the parent unordered list tag </ul>.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Woot problem number 1 fixed. I had forgotten to close the tag.

    I have edited my above post to include the whole script

  10. #10
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still forgot to close the UL tag in the above code, and you also have a second closing </style> tag as well.

    I'm going to check out how it looks in my browsers now, before I head to bed (I have to be up in six hours).

    By the way, if you don't mind me asking, why are you using ordered lists for your submenus when regular unordered lists will work just fine?

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dan Schulz
    Still forgot to close the UL tag in the above code, and you also have a second closing </style> tag as well.

    I'm going to check out how it looks in my browsers now, before I head to bed (I have to be up in six hours).

    By the way, if you don't mind me asking, why are you using ordered lists for your submenus when regular unordered lists will work just fine?
    1st, i posted it before i finish fully reading your post
    2nd I have made the changes, and found the 2nd </style> tag but it didn't change any thing.

    3rd, I have no idea....I am using code I found (bad me) and am trying to make it work before I try to put it into my site. Is it normal for code to be huge?

    and as a mother, I'll add...... Go to BED and get some Sleep!!!

    XD night

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I got the code to work. Aside from the minor changes I suggested above (removing the extra closing style tag, and closing the unordered list), the only thing that really got the axe was your original stylesheet. And no, it's not normal for code to be so huge, but it is normal for designers to code that way. Fortunately I am not most designers. Let's take a look at what I did, shall we?
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #CCCCCC; /* for illustrative purposes only */
    	color: #000000;
    	font: normal 100%/1.2 Tahoma, "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
    	padding: 1em; /* for illustrative purposes only */
    }
    
    #menu {
    	background-color: #F39F2B;
    	border-top: 0;
    	border-right: 1px solid #FFFFFF;
    	border-bottom: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	color: #FFFFFF;
    	list-style: none;
    	width: 170px;
    }
    	#menu li {
    		border-top: 1px solid #FFFFFF;
    	}
    	
    	#menu li, #menu a {
    		font-size: 12px;
    		line-height: 18px;
    	}
    	
    	#menu a {
    		background-color: #F39F2B;
    		color: #333333;
    		display: block;
    		padding: 2px 30px;
    		text-decoration: none;
    	}
    	
    	/* this is a hack for IE 5.5 and 6 only \*/
    		* html #menu a {
    			width: 110px;
    		}
    	/* IE 5 and 6 are now fixed */
    	
    	#menu a:hover {
    		background-color: #F7BC6B;
    		color: #FFFFFF;
    	}
    		
    	
    	#menu ol {
    		background-color: #F39F2B;
    		color: #FFFFFF;
    		display: none;
    		list-style: none;
    		text-indent: 20px;
    	}
    		#menu ol a {
    			background-color: #D17D09;
    			color: #FFFFFF;
    		}
    		
    		#menu ol a:hover {
    			background-color: F7BC6B;
    			color: #333333;
    		}
    		
    		
    
    /*
    
    This is your original stylesheet code; I left it here for posterity sake.  Since it is wrapped in CSS comments, it will have no effect on the rest of the code.
    
    td:hover{
    background-color:#00FF66;
    }
    ul#menu {
    	width: 170px;
    	list-style-type: none;
    	font:Verdana;
    	color:#FFFFFF;
    	border-top: 1px solid #FFFFFF;
    	margin: 0;
    	padding: 0;
    	background-color: #f39f2b;
    	text-indent: 20px;
    }
    
    ul#menu ol {
    	color:#FFFFFF;
      	display: none;
    	text-align: left;
    	list-style-type: none;
      	margin: 0;
      	padding: 5px;
    }
    
    ul#menu li, 
      ul#menu a {
    	font-family: verdana, sans-serif;
    	font-size: 12px;
    }
    
    ul#menu li {
      border-bottom: solid 1px #FFFFFF;
      line-height: 18px;
    }
    
    ul#menu ol li {
      border-bottom: none;
    }
    
    
    ul#menu a {
    	color:#333333;
      	text-decoration: none;
    	outline: none;
    }
    
    ul#menu a:hover {
    	color: #FFFFFF;
    	background-color: #F7BC6B;
    	width: 170px;
    	padding: 2px 30px;
    	position: static;
    	left: -30px;
    }
    
    ul#menu a.active {
    	color: #666666;
    }
    
    */
    </style>
    <script type="text/javascript">
    <!--
    /* This script and many more are available free online at
    The JavaScript Source :: http://javascript.internet.com
    Created by: Travis Beckham :: http://www.squidfingers.com | http://www.podlob.com */
    
    /* Coded by Travis Beckham
       http://www.squidfingers.com | http://www.podlob.com
       version date: 06/02/03
       If want to use this code, feel free to do so, but please leave this message intact. */
    
    // Node Functions
    
    if(!window.Node){
      var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
    }
    
    function checkNode(node, filter){
      return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() == filter.toUpperCase());
    }
    
    function getChildren(node, filter){
      var result = new Array();
      var children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        if(checkNode(children[i], filter)) result[result.length] = children[i];
      }
      return result;
    }
    
    function getChildrenByElement(node){
      return getChildren(node, "ELEMENT_NODE");
    }
    
    function getFirstChild(node, filter){
      var child;
      var children = node.childNodes;
      for(var i = 0; i < children.length; i++){
        child = children[i];
        if(checkNode(child, filter)) return child;
      }
      return null;
    }
    
    function getFirstChildByText(node){
      return getFirstChild(node, "TEXT_NODE");
    }
    
    function getNextSibling(node, filter){
      for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
        if(checkNode(sibling, filter)) return sibling;
      }
      return null;
    }
    function getNextSiblingByElement(node){
            return getNextSibling(node, "ELEMENT_NODE");
    }
    
    // Menu Functions & Properties
    
    var activeMenu = null;
    
    function showMenu() {
      if(activeMenu){
        activeMenu.className = "";
        getNextSiblingByElement(activeMenu).style.display = "none";
      }
      if(this == activeMenu){
        activeMenu = null;
      } else {
        this.className = "active";
        getNextSiblingByElement(this).style.display = "block";
        activeMenu = this;
      }
      return false;
    }
    
    function initMenu(){
      var menus, menu, text, a, i;
      menus = getChildrenByElement(document.getElementById("menu"));
      for(i = 0; i < menus.length; i++){
        menu = menus[i];
        text = getFirstChildByText(menu);
        a = document.createElement("a");
        menu.replaceChild(a, text);
        a.appendChild(text);
        a.href = "#";
        a.onclick = showMenu;
        a.onfocus = function(){this.blur()};
      }
    }
    
    if(document.createElement) window.onload = initMenu;
    //-->
    </script>
    
    </head>
    
    <body>
    <ul id="menu">
    	<li>Training
    		<ol>
    			<li><a href="#">Sub Item 1.1</a></li>
    			<li><a href="#">Sub Item 1.2</a></li>
    			<li><a href="#">Sub Item 1.3</a></li>
    		</ol>
    	</li>
    	<li>Menu Item 2
    		<ol>
    			<li><a href="#">Sub Item 2.1</a></li>
    			<li><a href="#">Sub Item 2.2</a></li>
    			<li><a href="#">Sub Item 2.3</a></li>
    		</ol>
    	</li>
    	<li>Menu Item 3
    		<ol>
    			<li><a href="#">Sub Item 3.1</a></li>
    			<li><a href="#">Sub Item 3.2</a></li>
    			<li><a href="#">Sub Item 3.3</a></li>
    		</ol>
    	</li>
    	<li>Menu Item 4
    		<ol>
    			<li><a href="#">Sub Item 4.1</a></li>
    			<li><a href="#">Sub Item 4.2</a></li>
    			<li><a href="#">Sub Item 4.3</a></li>
    		</ol>
    	</li>
    </ul>
    </body>
    </html>
    As I said, all the code is the same, save for the stylesheet.

    I started with a universal selector (that's *) to remove the margins and padding from everything in the page. If it can have a margin or padding, well, let's just say it doesn't anymore (unless we specifically give it back later on).
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    Below that, I declared the rules for the HTML "body" element (or tags). I gave it a light grey background color with black text, then set the font to be a normal strength (so it's not bold or anything - normal is the default), gave it a 100% font size so it will use 100% of whatever the browser's font size is currently set to (16px will be 16px, 12pt will be 12pt, and so on), and then gave it a line-height of 1.2. Browsers will treat this as 120%, so there's really no need to declare a unit here. I also listed all the sans-serif fonts that the page will use for its main text. I prefer Tahoma, but since you have a preference for Verdana, you can safely remove everything from Tahoma to Lucida if you want. Notice how Lucida Grande is enclosed in quotation marks. If you have a font name that has multiple words in it, they have to be enclosed in quotation marks. This identifies it as a single font. The padding was for illustrative purposes only, so that can safely be removed.
    Code:
    body {
    	background-color: #CCCCCC; /* for illustrative purposes only */
    	color: #000000;
    	font: normal 100%/1.2 Tahoma, "Lucida Grande", Lucida, Verdana, Arial, Helvetica, sans-serif;
    	padding: 1em; /* for illustrative purposes only */
    }
    The menu has an orangish background color, like you had originally specified, but now has a right, bottom and left solid white border that is one pixel wide. The top of the menu has no border, since the list items will be taking care of that particular job. Less code this way, IMHO anyway. I used the "shorthand" for list-style to set all the list style properties to none. Just one of my personal habits, I guess. I finally set the width to 170px, which is what I think yours was originally set to.
    Code:
    #menu {
    	background-color: #F39F2B;
    	border-top: 0;
    	border-right: 1px solid #FFFFFF;
    	border-bottom: 1px solid #FFFFFF;
    	border-left: 1px solid #FFFFFF;
    	color: #FFFFFF;
    	list-style: none;
    	width: 170px;
    }
    The list items and the links have a few custom styles applied. Each list item has a top border that is the same as the ones on the parent list, so that's done and taken care of. They also share some common rules with the links, in this case a font size and a line-height to go with it. If you ever change a metric for a font, it is always a good idea to specify a line-height to go with it. By metric I mean the unit. Pixels, points, EM, and so on.

    The links by default have an orangish background color, grey text, and are set to display: block; so they will be treated as block level elements (like DIV and P for instance). They will automatically expand to fill all the space they can, which in this case is the LI they are in, which is in turn bound by the space set in the #menu style rule - 170px. 2px top and bottom padding are also applied, along with 30px of left and right padding. This is important, especially since we're using the standard box model here, rather than IE's quirky one. Which brings me to the hack. Yes, I employed one. I'm not ashamed of it, since there really IS no other way around it. Since the main list is 170px wide, and the links are declared to be block level elements, they should expand to fill the entire container. But not in IE before version 7. I had to subtract 30px from the left and right sides to come to a value that IE 6 will accept - in this case 110px. That is the width of the menu links when set to block, but we have to force this down IE 5/6's collective throats. Of course, IE 5 won't get it anyway, but I don't support 5 anymore, since it's more than six years old as it is (I think it's closer to 8 years now, but I can't remember off-hand). Of course, there is a hover state for the links, which changes the background and text colors when the mouse scrolls over the links. Kinda cute, if you ask me.
    Code:
    	#menu li {
    		border-top: 1px solid #FFFFFF;
    	}
    	
    	#menu li, #menu a {
    		font-size: 12px;
    		line-height: 18px;
    	}
    	
    	#menu a {
    		background-color: #F39F2B;
    		color: #333333;
    		display: block;
    		padding: 2px 30px;
    		text-decoration: none;
    	}
    	
    	/* this is a hack for IE 5.5 and 6 only \*/
    		* html #menu a {
    			width: 110px;
    		}
    	/* IE 5 and 6 are now fixed */
    	
    	#menu a:hover {
    		background-color: #F7BC6B;
    		color: #FFFFFF;
    	}
    Last, but not least, we have the ordered lists. The story here is the same as the unordered list with the ID of menu, and its children, with one notable difference. It's set to display: none. I didn't want to do this, since display: none; will cause some screen readers to flat out ignore the existance of the lists themselves, but it was necessary to get it to work with the script you are using. One small sacrifice, I know. Normally, to ensure that screen readers can still see it, I'd set its position to absolute, and then push it off the screen (visually) by setting its left position to -9999em; but I don't have that luxury this time, because of the script.
    Code:
    	#menu ol {
    		background-color: #F39F2B;
    		color: #FFFFFF;
    		display: none;
    		list-style: none;
    		text-indent: 20px;
    	}
    		#menu ol a {
    			background-color: #D17D09;
    			color: #FFFFFF;
    		}
    		
    		#menu ol a:hover {
    			background-color: F7BC6B;
    			color: #333333;
    		}
    If you have any other questions, I'm sure someone else can fill in for me, since I'm heading off to bed so I can be up at 7am to take a shower, walk down to the train station and catch the 9:10 express to Chicago. I haven't had a break in two months, and for once I intend to enjoy one.

    And for the record, this was tested in Internet Explorer 6, Internet Explorer 7, FireFox 1.0.3, and Opera 9.0 on Windows XP Professional with Service Pack 2 on a 56k dialup connection .

  13. #13
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks heaps, your a legend!!!
    Enjoy your break. I am going to bed and will test this in the morning.

  14. #14
    Non-Member Webby007's Avatar
    Join Date
    Sep 2005
    Location
    UK, England
    Posts
    38
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs up

    A handy & easy CSS Rollover tutorial is provided in the link below:

    www.webdesignerforum.co.uk/index.php?showtopic=270

  15. #15
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry Webby, not what she needs in her particular case, and the code in the tutorial could be a lot better (like not using absolute positioning for layout for example).

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now have a tesing server !!!! yay
    But am having trouble again.
    I am having trouble when I put the list into a table. In ff the white border dosen't display to the egde, and in IE it seems to be a lot wider(wanting it to be 170px).
    Here is the link if someone could tell me what I might have to fix to get it right.

    loveLee

  17. #17
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok, I know you said you're taking code off of other sites, but in this case it's basically not only refusing to play nice with the other code you have, but you are also using a mix of obsolete code (the presentational code like the bgcolor attribute), modern CSS and tables for layout (tables are for tabular data, not layout - semantic HTML is what's needed here).

    You saw the detailed explaination I gave for your original problem yesterday morning. I'll cook something up for you today when I wake up (along with a template you can use for your entire site).

  18. #18
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I learnt a lot of this at university, but there they focused on using tables instead of frames, with CSS as a why to format your whole site from one style sheet. I guess it has all moved on a bit. From everything I have seen it is now CSS rather then tables.
    I'll start again and see if I can work it out. Should I use serparate CSS for each section of the site? Or just one with commenting?
    Normally I would take my time to learn and update my knowledge, but they need this site ASAP (take a look at there old site if you want to know why).

    Thanks for your patience and time Dan

  19. #19
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi -
    When just starting out, it actually helps to put your styles into an internal style sheet in the <head> section so you can see the changes quickly - then to move them to a linked external one once you're done. Yes, 1 styles.css for the entire with comments is good - later you can do handheld.css, print.css or whatever you wish..;-)

    Good luck,
    El

    Off Topic:

    Why DO a lot of universities still teach outmoded coding for html?
    F-Fox 2.0 :: WIN :: el design :: US

  20. #20
    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)
    Quote Originally Posted by lovelee
    if someone could tell me what I might have to fix to get it right.
    I don't know much about tables but try:

    Code:
    table{table-layout:fixed}

  21. #21
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys. I've been playing with the using CSS, and been looking at Pauls 3 coloum layout (need more sleep to work this out, though need more sleep to work out what the clock is saying)
    What a long day I have ahead of me


    off topic : I have no idea, but this was a few years ago. I've been doing graphics and very basic sites since and havn't updated myself.

  22. #22
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also working on a CSS template for you - I might even be able to use 100% original code (or as close to it as possible) so you can just add the content as necessary. When I finish it, I'll upload it along with the documentation, then give you full ownershilp of the "work" .

  23. #23
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow Dan....your making me want to give you a big kiss

  24. #24
    [Biped] LJK's Avatar
    Join Date
    Jun 2004
    Location
    In My Jammies
    Posts
    761
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Off Topic:

    Eeeeew!
    F-Fox 2.0 :: WIN :: el design :: US

  25. #25
    SitePoint Enthusiast
    Join Date
    Oct 2006
    Location
    Tasmania
    Posts
    96
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by LJK
    Off Topic:

    Eeeeew!
    Off Topic:



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
  •