WEB document outline

Discussion in 'OT Technology' started by White Stormy, Sep 27, 2008.

  1. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
  2. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    did I stump KingToad? :eek:
     
  3. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    When I ran the outline it looked like it just passed H1 to H6 tags. Maybe you don't have any heading tags? :dunno:
     
  4. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
  5. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
  6. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    yeah but I wanted the whole box to be a link.. and then use just the title of box with a heading tag for the outline/semantics :hs:

    I guess I can just use correct html and use js for the functionality
     
  7. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Adjust the margins and paddings in the headings element and add padding to the anchor element. Something along the lines of this should get you your required result without javascript:

    Code:
    h1 {
      margin: 0;
      padding :0;
    }
    h1 a {
      display: block;
      padding: 5px;
    }
    
     
  8. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    :) thanks
     
  9. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    god all this code makes me want to vomit
     
  10. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    I had the <a> outside the heading tag so that I could use a:hover to change text-decoration on the heading tag.. but I can just do it with js and use proper xhtml :)
     
  11. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    You should structure your elements so the anchor tag (child) inherits the attributes from the heading element (parent), so you wouldn't need to apply hover styles to the heading element, just the anchor element.

    Example:
    Code:
    h1 {
      font: bold 18px Verdana;
      color: #fff;
    }
    h1 a {
      text-decoration: none;
    }
    h1 a:hover {
      color: #000;
      text-decoration: underline;
    }
    
    The link within a heading tag will come out bold at 18px using font-family: Verdana and color: #fff with no text-decoration. When hovered over, the color will change to #000 with a modified text-decoration.

    The anchor tag will inherit the parent attributes of H1. You shouldn't have to use JavaScript for something like this.
     
  12. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Unless I am completely misunderstanding what you are trying to do. :eek5:
     
  13. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    you are, a bit. I wanted the heading to be underlined whenever ANY part of the box was hovered, not just the heading.

    http://halefx.com/

    you can see the border around each box.. I changed it back to how I had it before until I do the js version.. so you can see what I mean now. you can hover over any part of the box and it'll underline the heading. I'll just change it to proper xhtml and use jquery for the hover. I hadn't used jquery when I first did it
     
  14. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Code:
    ul li h2 a:hover {
      text-decoration: underline;
    }
    
    You will have to restructure some of your HTML a bit to get it right correctly.
     
  15. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    wouldn't that only underline when the <a> inside the <h2> is hovered?
     
  16. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis
    maybe I'll buy a CSS book..
     
  17. pkr

    pkr Guest

    I want to buy a kingtoad book
     
  18. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    Technically yes, but in this case, no, because of the way you are forcing your anchor (now block) element inside of your list element. I downloaded your code, added that element, and modified the HTML structure and it worked.
     
  19. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    :rofl:
     
  20. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    is this what you were trying to do?

    CSS
    Code:
    * {
    	margin: 0;
    	padding: 0;
    }
    
    body {
    	background-color: #ffffff;
    }
    
    h1 {
    	display: none;
    }
    
    ul#directory {
    	list-style-type: none;
    	margin: auto;
    	width: 800px;
    }
    
    ul#directory li {
    	position: relative;
    	float: left;
    	border: medium double #e8e8e8;
    	color: #000000;
    	width: 300px;
    	height: 200px;
    	margin: 25px;
    	padding: 15px;
    	overflow: hidden;
    }
    
    ul#directory li h2 {
    	position: absolute;
    	top: 15px;
    	left: 15px;
    }
    
    ul#directory li a {
    	position: absolute;
    	top: 0px;
    	left: 0px;
    	width: 100%;
    	height: 500px;
    	display: block;
    	padding: 50px 15px 15px;
    }
    
    ul#directory li p {
    	margin-top: 35px;
    }
    
    /* @group ros links */
    
    a:link {
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    a:visited {
    	text-decoration: none;
    }
    
    /* @end */
    
    /* @group li links */
    
    ul#directory li a:hover {
    	text-decoration: none;
    }
    
    /* @end */
    
    xhtml
    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" xml:lang="en" lang="en">
    <head>
    	<title>HaleFX</title>
    	<link rel="stylesheet" href="screen.css" type="text/css" media="screen" title="no title" charset="utf-8" />
    </head>
    <body>
    	<h1>HaleFx.com Directory</h1>
    	<ul id="directory">
    		<li>
    			<h2>Joe Hale</h2>			
    			<a href="http://joe.halefx.com" title="blurb">&nbsp;</a>
    			<p>Coming soon</p>
    		</li>
    		<li>
    			<h2>Jonathan Hale</h2>
    			<a href="http://jonathan.halefx.com" title="blurb">&nbsp;</a>
    			<p>Jonathan Hale is a problem-solving and technology consultant, a software and web developer, and a Georgia State University Computer Science graduate.</p>
    		</li>
    		<li>
    			<h2>Micah Hale</h2>			
    			<a href="http://micah.halefx.com" title="blurb">&nbsp;</a>
    			<p>Coming soon..!</p>
    		</li>				
    	</ul>
    </body>
    </html>
    
    i didnt test this in IE since I dont have it at on this machine. your outlines didnt show up because your xhtml wasnt valid
     
  21. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    broseph, why you gotta show me up
     
  22. biawokauns

    biawokauns New Member

    Joined:
    Sep 18, 2001
    Messages:
    19,893
    Likes Received:
    0
    Location:
    Republic of Kalifornia
    i want bros buying my books, not yours bro. ibdoesntwork. i acutally thought about ul#directory li>a, then i realized that was unncessary :rofl:
     
  23. pkr

    pkr Guest

    rofl
     
  24. kingtoad

    kingtoad OT Supporter

    Joined:
    Sep 2, 2003
    Messages:
    55,918
    Likes Received:
    10
    Location:
    Los Angeles
    :rofl:

    Needs more: ul#directory li > a[href*=joe.halefx.com]
     
  25. White Stormy

    White Stormy Take that, subspace!

    Joined:
    Sep 17, 2002
    Messages:
    85,489
    Likes Received:
    70
    Location:
    Sparkopolis

Share This Page