www.webdeveloper.com
Results 1 to 8 of 8

Thread: [RESOLVED] Positioning links, how to go about it...

  1. #1
    Join Date
    Mar 2006
    Posts
    78

    resolved [RESOLVED] Positioning links, how to go about it...

    I have a header image which I have set as a "background-image" in order to place links at the bottom of the same "div" for navigation. I'm just unsure of the best way to achieve this.

    Here's what I have so far...

    http://davey-martin.com/

    Below, I've attached what I'm trying to achieve.

    Any input would be much appreciated!

    PS: I've validated my CSS and HTML and both are bug free (with the exception of the analytics code embedded into my pages automatically by my host throwing up two errors).
    Attached Images Attached Images

  2. #2
    Join Date
    Mar 2006
    Posts
    78
    Further to my current issue, having tried to position the links to the bottom of the div using the following code within the CSS for "header_centre":

    Code:
    #header_centre {
    	height:152px;
    	width:398px;
    	margin-left:10px;
    	margin-right:10px;
    	background-image:url(images/header.png);
    	background-repeat:no-repeat;
    	float:left;
    	text-align:center;
    	vertical-align:bottom;
    }
    this is placing the cursor to the centre, where i want it... however, it isn't positioning it to the bottom of the div. it is staying at the top?? any suggestions?

    Thanks.

  3. #3
    Join Date
    Dec 2010
    Posts
    3
    Try this, I am no expert as I am still learning alot, but this may work, and just adjust the margin-top to find the right area to put the links
    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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>D A V E Y - M A R T I N . com | Design Solutions</title>
    <style type="text/css">
    body,td,th {
    	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    	color: #FFF;
    }
    body {
    	background-image: url(images/tile.jpg);
    	background-repeat: repeat;
    	margin: 0px 0px 0px 0px;
    }
    a:link {
    	color: #FFF;
    	text-decoration: none;
    }
    a:visited {
    	text-decoration: none;
    	color: #FFF;
    }
    a:hover {
    	text-decoration: underline;
    	color: #FD007D;
    }
    a:active {
    	text-decoration: none;
    	color: #FFF;
    }
    #wrapbody {
    	width:100%;
    	height:auto;
    }
    #topbar {
    	width:100%;
    	height:auto;
    	font-size:9px;
    	background-color:#000;
    	border-bottom:1px solid #161C24;
    	text-align:center;
    	cursor:default;
    }
    #container {
    	height:auto;
    	width:800px;
    	margin-left:auto;
    	margin-right:auto;
    }
    #header_left {
    	height:152px;
    	width:191px;
    	float:left;
    }
    #header_centre {
    	height:152px;
    	width:398px;
    	margin-left:10px;
    	margin-right:10px;
    	background-image:url(images/header.png);
    	background-repeat:no-repeat;
    	float:left;
    	display:table-cell;
    	text-align:center;
    	vertical-align: bottom;	
    }
    #header_right {
    	height:152px;
    	width:191px;
    	float:left;
    }
    ul.links {
    	color: #FFFFFF;
    	list-style-type: none;
    	margin-top: 125px;
    }
    ul.links li {
    	display:inline;
    }
    </style>
    </head>
    
    <body>
    
    <div id="wrapbody">
    
    <div id="topbar">
    Graphics&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Web&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Logos&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Business&nbsp;Cards&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Magazine&nbsp;Covers&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Flyers&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Photo&nbsp;Editing&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;And&nbsp;More
    
    </div>
        
    <div id="container">
        
        <div id="header_left"></div>
        
        <div id="header_centre">
        <ul class="links">
        	<li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
            <li>Item 4</li>
        </ul>
        
        </div>
        
        <div id="header_right"></div>
       
    
    </div>
    </div>
    
    <div id="footer"></div>
    </body>
    </html>
    
    <!-- www.**********.com Analytics Code -->
    
    <script type="text/javascript" src="http://analytics.hosting24.com/count.php"></script>
    <noscript><a href="http://www.hosting24.com/"><img src="http://analytics.hosting24.com/count.php" alt="web hosting" /></a></noscript>
    <!-- End Of Analytics Code -->

  4. #4
    Join Date
    Mar 2006
    Posts
    78
    Thanks for your input Sicon, managed to figure it out in the end!

    Had to use padding-top and adjust the height of the div as opposed to using margin-top to get the links exactly where i wanted.

    It's coming along nicely now I think lol.

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,458
    Hi there Davey_M,

    I know that you may be reasonably happy with your page but I noticed
    that it uses &nbsp over 90 times and javascript for the rollovers.

    With that in mind you may be interested in a reworking of your page that uses neither.

    coothead
    Attached Files Attached Files

  6. #6
    Join Date
    Mar 2006
    Posts
    78
    Thanks coothead, was in the process of seeing what alternatives I could use instead of the &nbsp; codes. As for the rollovers I just did them in DW as I'm useless when it comes to all that scriptin stuff lol!

  7. #7
    Join Date
    May 2007
    Posts
    105
    If solved, please mark "resolved". It's at the top under "Thread Tools". And yes, please remove all those '&nbsp;'s. Ewwwww.
    Thanks
    Mike

  8. #8
    Join Date
    Mar 2006
    Posts
    78
    lol Mikester, thanks! - And don't worry, they're going very soon! Got to now adapt the files coothead sent over into the files I had been working on (or vice versa) lol

    Thanks again for the help!

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