SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    xhtml/css covering up links

    I'm drafting a template for a friend's website (the layout and colors are his choice) and I'm having issues with the left-hand nav column. The link is visible, but not clickable. I'm not sure what's up, so here's some code. If anyone has any suggestions that would help fix the template, I'd much appreciate!
    *note- I can't post links yet, so i removed doctype and messed up other links*
    Code:
    <head>
    	<title>Test_Page_1</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    	<link rel="stylesheet" href="test.css" type="text/css" media="all" />
    </head>
    <body>
    <div id="head">
    	<img src="/data/img/logo.png" alt="logo" class="logo" />
    	Welcome to XXXXXX
    
    </div>
    <div id="left">
    
    	<ul><li>
    <a class="nav" href="#nogo">Test link</a></li></ul>
    </div>
    <div id="content">
    <h1>This is Test page 1 header 1</h1>
    <p>This is paragraph 1.<div>div</div></p>
    
    </div>
    <div id="footer">
    
    Copyright XXXXX
    </div>
    </body>
    </html>
    and now for the css
    Code:
    html
    {
    	height:100%;max-height:100%;margin:0;padding:0;border:0;overflow:hidden;
    }
    
    body
    {
    	color:#333;
    	background-color:#fafafa;
    	font-family:Verdana, Arial, Helvetica, sans-serif;
    	font-size:0.75em;
    	padding:0;margin:0;border:0;
    	
    	height:100%;
    	max-height:100%;
    	overflow:hidden;
    }
    
    h1 {font-size:1.7em;margin-top:0;}
    h2{font-size:1.5em;}
    h3{font-size:1.3em;}
    h4{font-size:1.1em;}
    h5{font-size:1.0em;}
    h1,h2,h3,h4,h5{ font-family : Georgia, serif; color: #f22;}
    img{ border : 0; }
    form{ margin : 0; }
    
    #content 
    {
    	display:block; 
    	height:100%; 
    	max-height:100%; 
    	overflow:auto; 
    	padding-left:200px; 
    	position:relative; top:135px;
    }
    
    #head 
    {
    	background:url(/data/img/header.jpg) no-repeat right black; overflow:hidden;
    	position:fixed; 
    	margin:0; top:0; 
    	display:block; 
    	width:100%; height:135px;
    	font-size:4em;
    	color:#fff;
    }
    
    #left
    {
    	position:fixed; left:0; top:135px; 
    	height:100%; width:150px; 
    	background-position:0 100px;
    	background-color:#000;
    	font-size:1em; 
    	color:#fff;
    }
    #left h2{color:#fff;}
    #left ul
    {
    	list-style:none;
    }
    #footer
    {
    	width:100%;height:50px;
    	position:fixed;
    	bottom:0;
    	background:#ddd;
    }
    
    
    
    a.nav, a.nav:visited 
    {
    	display:block; 
    	width:100px; height:25px; 
    	text-decoration:none; color:#fff; 
    	font-weight:bold; 
    	line-height:25px;
    	border-bottom:2px black solid;
    	border-top:2px white solid;
    }
    a.nav:hover
    {
    	color:#000000;
    	background-color:#ffffff;
    }
    img.logo
    {
    	float:left;
    	width:93px;height:130px;
    	margin:2px;
    }
    Thanks all!

  2. #2
    SitePoint Addict
    Join Date
    Aug 2008
    Location
    Coimbatore- India
    Posts
    247
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Arrow

    HTML Code:
    <a class="nav" href="#nogo">Test link</a></li></ul>
    I think you will have to change the above as
    HTML Code:
    <a class="nav" href="#">Test link</a></li></ul>
    
    or
    
    <a class="nav" href="sample.html">Test link</a></li></ul>

  3. #3
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi dzdrazil, welcome to SitePoint!

    It is the content div that is covering the left div. If you change the 200px padding-left to margin-left instead it will not cover the link.

    (Then for IE7 to change the link background on hover, it may need help, you can add visibility:visible on hover to remind IE7 that something has changed.)
    Happy ADD/ADHD with Asperger's

  4. #4
    SitePoint Member
    Join Date
    May 2009
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah yes, I don't know why but padding and margin get mixed up a bit for me, all too often Thank you!

    as for the actual link in the href, links can also refer to divs on the same page. So, #nogo will try to open the same page,focused on a div with id="nogo" ,or else the top of the page. It won't affect the clickability of the link at all.


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
  •