SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Thread: Css Positioning

  1. #1
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Css Positioning

    Fellowes - Product - Category- Detail (code at the bottom)

    I have been trying like crazy to get the positioning of this nav correct. I need to get each of the navs to position exactly over their respective links. So the white "Products" word (over state) should sit exactly over the purple "Products" link. It should stick in the correct position on screen resolution change too. This nave will be localized too so more letter should be able to be added to each line of the pop-ups and still stick in its spot. These are all the issues I am having. PLEASE HELP! I have spent soooo much time on this and its driving me crazy!!

    Code:
    <!DOCTYPE html>
    <html>
    
    <head>
    
    	<title></title>
    	<meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
    	<meta http-equiv="Content-Language" content="en-us"/>
    	<meta http-equiv="imagetoolbar" content="no"/>
    	<meta name="robots" content="index,follow,archive"/>
    
    	<style type="text/css" title="">
    	body { 
    		font-family: Arial, Helvetica, sans-serif;
    		line-height: 115%; 
    		font-size:10px;
    		background-color: #000000;
    		height:100%;
    		color:#FDB813;
    	}
    	
    	.auto-width {
    		display:-moz-inline-stack;
    		display:inline-block;
    		zoom:1;
    		*display:inline;
    	}
    
    	#footer-container {
    		background-color:#000;
    		height:420px;
    	}
    
    	#footer{
    		margin:0 auto; 
    		width:980px; 
    		background-color:#000;
    	}
    
    	#footer-nav {
    		margin:30px 0 0 0px;
    		width:980px;
    		position:relative;
    	}
    
    	.fnpc {
    		position:absolute;
    		display:none;
    		top:0px;
    		left:19px;
    		z-index:10;
    	}
    
    	.fnp {
    		border:1px solid #555555; 
    		background-color:#252526;
    		color:#888888;
    		text-align:left;
    		padding:10px;
    		position:relative;
    		z-index:10;
    		top:-34px; 
    		left:0px;
    	}
    
    	.fto {
    		border-top-style:none;
    		border-right-style:solid;
    		border-bottom-style:solid;
    		border-left-style:solid;
    		border-width:1px;
    		border-color:#555555;
    		background-color:#252526;
    		position:absolute; 
    		bottom:-1px; 
    		left:0px; 
    		z-index:11;
    	}
    
    	.fnc {
    		font-size:10px;
    		color:#ffffff;
    		padding:10px;
    		height:15px;
    		cursor:pointer;	
    	}
    
    	</style>
    
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    
    </head>
    
    <body>
    
    <!-- Footer Starts Here. Everything Below should be stuck in an include. -->
    <div id="footer-container" style="margin-top:200px;">
    	
    	<div id="footer">
    
    		<div id="footer-nav">
    
    			<div style="float:left; margin-right:50px;">
    			
    				<div id="fnp-container-Products" class="fnpc">
    					<div id="fnp-Products" class="fnp auto-width">
    						<a href="" class="">Aaaaaaa bbbbbb</a><br>
    						<a href="" class="">Baaaaaa bbbbbb</a><br>
    						<a href="" class="">Caaaaaa bbbbbb</a><br>
    						<a href="" class="">Daaaaaa bbbbbb</a><br>
    						<a href="" class="">Eaaaaaa bbbbbb</a><br>
    						<a href="" class="">Faaaaaa bbbbbb</a><br>
    					</div>
    					<div id="footnav-Products" class="fto">
    						<div class="fnc auto-width">Products</div>
    					</div>
    				</div>
    
    				<a href="" class="footer-nav-link footer-Products">Products</a>
    
    				<script type="text/javascript">
    				<!--
    				$('.footer-Products').mouseenter(function() {
    					$('.fnpc').hide();
    					$('#fnp-container-Products').show();
    					$("#fnp-container-Products").css({ 
    						"top":  $("#fnp-Products").height() + "px", 
    						"left":  $("#fnp-Products").height() + "px" 
    					});
    				});
    				//-->
    				</script>
    
    			</div>
    			<div style="float:left; margin-right:50px;">
    			
    				<div id="fnp-container-Solutions_Center" class="fnpc">
    					<div id="fnp-Solutions_Center" class="fnp auto-width">
    						<a href="" class="">Aaaaaaa bbbbbb ccccc</a><br>
    						<a href="" class="">Baaaaaa bbbbbb ccccc</a><br>
    						<a href="" class="">Caaaaaa bbbbbb ccccc</a><br>
    						<a href="" class="">Daaaaaa bbbbbb ccccc</a><br>
    						<a href="" class="">Eaaaaaa bbbbbb ccccc</a><br>
    						<a href="" class="">Faaaaaa bbbbbb ccccc</a><br>
    					</div>
    					<div id="footnav-Solutions_Center" class="fto">
    						<div class="fnc auto-width">Solutions Center</div>
    					</div>
    				</div>
    
    				<a href="" class="footer-nav-link footer-Solutions_Center">Solutions Center</a>
    
    				<script type="text/javascript">
    				<!--
    				$('.footer-Solutions_Center').mouseenter(function() {
    					$('.fnpc').hide();
    					$('#fnp-container-Solutions_Center').show();
    					$("#fnp-container-Solutions_Center").css({ 
    						"top":  $("#fnp-Solutions_Center").height() + "px", 
    						"left":  $("#fnp-Solutions_Center").height() + "px" 
    					});
    				});
    				//-->
    				</script>
    
    			</div>
    			
    		</div>
    	
    	</div>
    
    </div>
    
    <script type="text/javascript">
    <!--
    $('.fnpc').mouseleave(function() { 
    	$('.fnpc').hide();
    });
    //-->
    </script>
    
    </body>
    </html>

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,481
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    That's a bit muddled and not very semantic with all elements split like that.

    Your main problem is that you haven't set a stacking context (position:relative) for the parent of the absolute elements which will tie them together.

    Here's the menu in working order but as I said above the code could do with tidying up and being made more semantic.
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Fellowes - Product - Category- Detail</title>
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
    <meta http-equiv="Content-Language" content="en-us"/>
    <meta http-equiv="imagetoolbar" content="no"/>
    <meta name="robots" content="index,follow,archive"/>
    <style type="text/css" title="">
    body {
        font-family: Arial, Helvetica, sans-serif;
        line-height: 115%;
        font-size:10px;
        background-color: #000000;
        height:100%;
        color:#FDB813;
    }
    .auto-width {
        display:-moz-inline-stack;
        display:inline-block;
        zoom:1;
     *display:inline;
    }
    #footer-container {
        background-color:#000;
        height:420px;
    }
    #footer {
        margin:0 auto;
        width:980px;
        background-color:#000;
    }
    #footer-nav {
        margin:30px 0 0 0px;
        width:980px;
        position:relative;
    }
    .fnpc {
        position:absolute;
        left:-10px;
        bottom:2em;
        z-index:10;
        display:none;
    }
    .fnp {
        border:1px solid #555555;
        background-color:#252526;
        color:#888888;
        text-align:left;
        padding:10px;
        position:relative;
        z-index:10;
        left:0px;
        white-space:nowrap;
    }
    .fto {
        border-top-style:none;
        border-right-style:solid;
        border-bottom-style:solid;
        border-left-style:solid;
        border-width:1px;
        border-color:#555555;
        background-color:#252526;
        z-index:11;
        margin-top:-1px;
        position:absolute;
    }
    .fnc {
        font-size:10px;
        color:#ffffff;
        padding:10px;
        height:15px;
        cursor:pointer;
    }
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    </head>
    <body>
    <!-- Footer Starts Here. Everything Below should be stuck in an include. -->
    <div id="footer-container" style="margin-top:200px;">
        <div id="footer">
            <div id="footer-nav">
                <div style="float:left; margin-right:50px;position:relative;">
                    <div id="fnp-container-Products" class="fnpc">
                        <div id="fnp-Products" class="fnp auto-width"> <a href="" class="">Aaaaaaa bbbbbb</a><br>
                            <a href="" class="">Baaaaaa bbbbbb</a><br>
                            <a href="" class="">Caaaaaa bbbbbb</a><br>
                            <a href="" class="">Daaaaaa bbbbbb</a><br>
                            <a href="" class="">Eaaaaaa bbbbbb</a><br>
                            <a href="" class="">Faaaaaa bbbbbb</a><br>
                        </div>
                        <div id="footnav-Products" class="fto">
                            <div class="fnc auto-width">Products x</div>
                        </div>
                    </div>
                    <a href="" class="footer-nav-link footer-Products">Products</a>
                    <script type="text/javascript">
                    <!--
                    $('.footer-Products').mouseenter(function() {
                        $('.fnpc').hide();
                        $('#fnp-container-Products').show();
                        
                    });
                    //-->
                    </script>
                </div>
                <div style="float:left; margin-right:50px;position:relative">
                    <div id="fnp-container-Solutions_Center" class="fnpc">
                        <div id="fnp-Solutions_Center" class="fnp auto-width"> <a href="" class="">Aaaaaaa bbbbbb ccccc</a><br>
                            <a href="" class="">Baaaaaa bbbbbb ccccc</a><br>
                            <a href="" class="">Caaaaaa bbbbbb ccccc</a><br>
                            <a href="" class="">Daaaaaa bbbbbb ccccc</a><br>
                            <a href="" class="">Eaaaaaa bbbbbb ccccc</a><br>
                            <a href="" class="">Faaaaaa bbbbbb ccccc</a><br>
                        </div>
                        <div id="footnav-Solutions_Center" class="fto">
                            <div class="fnc auto-width">Solutions Center</div>
                        </div>
                    </div>
                    <a href="" class="footer-nav-link footer-Solutions_Center">Solutions Center</a>
                    <script type="text/javascript">
                    <!--
                    $('.footer-Solutions_Center').mouseenter(function() {
                        $('.fnpc').hide();
                        $('#fnp-container-Solutions_Center').show();
                    });
                    //-->
                    </script>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
    <!--
    $('.fnpc').mouseleave(function() { 
        $('.fnpc').hide();
    });
    //-->
    </script>
    </body>
    </html>

    As an example here's a method that doesn't need javascript (for all but IE6 ) and is semantic and logical and much cleaner.

    Untitled Document

    Just view source to see how it works. The basis of the html is that a structured unordered list is used.

    Code:
    <ul id="nav">
        <li><a href="#">Products</a>
            <ul>
                <li><a href="#">Lorem ipsum text goes here</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Link Link </a></li>
                <li><a href="#">Lorem ipsum text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Link Link </a></li>
            </ul>
        </li>
        <li><a href="#">Solutions Center</a>
            <ul>
                <li><a href="#">Lorem ipsum text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Link Link </a></li>
                <li><a href="#">Lorem ipsum text goes here</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Link Link </a></li>
                <li><a href="#">Lorem ipsum text</a></li>
            </ul>
        </li>
        <li><a href="#">Test</a>
            <ul>
                <li><a href="#">Lorem ipsum text</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Link Link </a></li>
                <li><a href="#">Lorem ipsum text goes here</a></li>
                <li><a href="#">Text</a></li>
                <li><a href="#">Link Link </a></li>
                <li><a href="#">Lorem ipsum text</a></li>
            </ul>
        </li>
    </ul>

  3. #3
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul O'B is spot on (provided you with your answer+).

    @cesarcesar
    I'm curious as to why you're using an HTML5 doctype and then dictate your code as if it's intermixed with some XHTML code syntax (self closing tags), e.g:
    <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>

    If you look at the given MIME type, it's text/html; which essentially
    is served as HTML.

    Aside:
    To note, it looks like you're declaring your document as if it were HTML5, but it's not utilizing any HTML5 elements.

    -- I'd stick with the HTML4.01 doctype and try to adhere to the HTML4.01 strict DTD (HTML5 is a language for hobbyists).

  4. #4
    SitePoint Addict
    Join Date
    Jun 2005
    Posts
    196
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Paul O'B - your a god! thanks you so much!

    @domscripter - i guess from what i understood from any ready online the using the HTML5 doctype was acceptable moving forward. I was't aware it was jst for the "hobbyist". can you point me anywhere to read about why/why not to use it.

  5. #5
    SitePoint Member
    Join Date
    Dec 2010
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @domscripter - i guess from what i understood from any ready online the using the HTML5 doctype was acceptable moving forward. I was't aware it was jst for the "hobbyist". can you point me anywhere to read about why/why not to use it.
    What I mean is:
    You're declaring that your document is HTML5 with the doctype inclusion.
    That comment (html5 is for hobbyists) is my personal opinion

    My recommendation still holds valid: "Stick to HTML4.01 Strict".

    Decent Read:
    http://www.sitepoint.com/forums/html...-a-741955.html


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
  •