www.webdeveloper.com
Results 1 to 2 of 2

Thread: Float stopping links working

Hybrid View

  1. #1
    Join Date
    Feb 2005
    Location
    Norwich, UK
    Posts
    138

    Float stopping links working

    Hi, got a weird problem I can't get my head round. I'm trying to learn some responsive design CSS and HTML, having created fixed sized sites until now.

    I'm placing a logo top right, and a UL main menu below left.

    For some reason, when I place the logo to the right using float:right in my CSS, the hyperlinks attached to the logo and menu stop showing as links. Float:left has the same problem. If I remove float entirely, it all works fine!

    My HTML is
    Code:
    <div class="block_head">
    	<div id="logo"><a href="index.php" target="_self"><img src="images/logo.gif" alt="LSI Architects" /></a></div>
    		
    	<ul class="main_menu">
    		<li><a href="projmenu.php">PROJECTS</a></li>
    		<li><a href="pracmenu.php">PRACTICE</a></li>
    		<li><a href="commmenu.php">COMMUNITY</a></li>
    		<li><a href="contact.php">CONTACT</a></li>
    	</ul>
    </div>
    My CSS is
    Code:
    .block_head {
    	text-align: left;
    	display: block;
    	margin: 2em 1em;
    	background: #0f0;
            z-index: 1;
    }
    
    #logo {
    	background: #ff0;
    	position: static;
    	/*float: left; The problem! */
    	padding: 1em 0em;
    	z-index: 7;
    }
    
    .block_head ul {
    	display: block;
    	clear: both;
    	font-size: 1.5em;
    	float: left;
    	width: 100%;
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	background: #f00;
    }
    
    .block_head li { display: inline; }
    
    .block_head li a {
    	float: left;
    	padding: 0.5em 2em 0.5em 0em;
    	color: #888;
    	font-family: Verdana;
    	background: #00f;
    }
    All references talk about z-index but this doesn't seem to change things either...
    _____________________________________________

    http://www.djillustration.com

  2. #2
    Join Date
    Feb 2013
    Posts
    9
    Here's a jsFiddle. I don't get what's wrong. The links seem to work.
    http://jsfiddle.net/DYhXY/


    Can you clarify what's happening on your end?

    By the way, 2 things:
    1. You don't need "position: static" as that's the default.
    2. "z-index" only works on things positioned with "absolute" or "relative".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles