3 Replies - 955 Views - Last Post: 28 January 2014 - 12:20 AM

#1 poliosynthesis   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 27-June 13

Issues with positioning links and increasing the size of link boxes

Posted 27 January 2014 - 02:10 AM

Hi guys,
I am trying to create a simple static web page to test my skills and see how rusty they are! I am having issues with positioning and sizing links in a navigation bar. When I attempt to place the links in the centre of the navigation bar using the margin property it has no effect and it is the same story when I attempt to increase the size of the highlighted area when a user hovers over the link. I am also encountering problems when I use fixed positioning for the navigation bar. And for the record I am aware that the code is horribly messy. :P
Thanks in advance!

index.html


    <html>
    <head>
    <title>Home</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
    <div id="wrapper">
    <div id="nav">

    <a href="#">Home</a>
    <a href="#" >About</a>
    <a href="#" >Products</a>
    <a href="#">Contact</a>
    </div>
    </div>
    <div id="content">
    <div id="boxes">
    <div id="box1">
    box 1
    </div>
    <div id="box2">
    box 2
    </div>
    <div id="box3">
    box 3
    </div>
    </div>
    <div id="slideshow">



    </div>
    </div>
    <div id="footer">
    <br />
    <hr>
    Copyright 2014 &copy;

    </div>


    </body>
    </html>






style.css


    body {


    background-color:#FFFFCC;
    }
    #box1 {
    height:300px;
    width:31%;
    margin-top:400px;
    float:left;
    border:1px solid black;
    margin-left:1%;
    margin-bottom:50px;
    }
    #box2 {
    height:300px;
    width:31%;
    margin-top:400px;
    float:left;
    border:1px solid black;
    margin-left:2%;
    margin-bottom:50px;
    }
    #box3 {
    height:300px;
    width:31%;
    margin-top:400px;
    float:left;
    border:1px solid black;
    margin-left:2%;
    margin-bottom:50px;

    }
    #footer {

    margin-top:750px; 
    padding:15px;

    }
    #nav {
    width:100%;
    height:50px;
    background-color:#99EE66;
    margin-top:10px;
    border-radius:25px;


    }

    #nav a {
    margin:10px 0px 0px 200px;

    text-decoration:none;
    background-color:#99EE66;
    color:#666666;
    font-size:20px;


    }
    #nav a:hover {
    background-color:#666666;
    color:white;



   }
   #boxes {
   margin:0px auto;
   width:70%;


   }




Is This A Good Question/Topic? 0
  • +

Replies To: Issues with positioning links and increasing the size of link boxes

#2 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6544
  • View blog
  • Posts: 26,527
  • Joined: 12-December 12

Re: Issues with positioning links and increasing the size of link boxes

Posted 27 January 2014 - 06:19 AM

The answer to your question is very.

Just giving the a-links a left margin won't work, try changing the browser width to confirm this. You also have no css that attempts to increase the size of the a-links.

  • The a-links need to be changed from their default inline display to display: inline-block, otherwise they will ignore any width settings.
  • The nav-bar itself needs text-align: center
  • A width of 20% on the a-links will keep them evenly distributed as the browser width changes.

#nav {
    width:100%;
    height:50px;
    background-color:#99EE66;
    margin-top:10px;
    border-radius:25px;
    text-align: center;
}
#nav a {
    /*margin:10px 0px 0px 200px;*/
    display: inline-block;
    width: 20%;
    text-decoration: none;
    background-color: #99EE66;
    color: #666666;
    font-size: 20px;
}

Your mention of fixed-positioning is a little disturbing. I suggest you get a book or find a good tutorial. MDN, html-dog, css-tricks spring to mind.

Also search for "css menus" or "css nav bar"; you'll notice that most use ul-li sets rather than just a-links.
Was This Post Helpful? 0
  • +
  • -

#3 andrewsw   User is offline

  • blow up my boots
  • member icon

Reputation: 6544
  • View blog
  • Posts: 26,527
  • Joined: 12-December 12

Re: Issues with positioning links and increasing the size of link boxes

Posted 27 January 2014 - 06:30 AM

Giving the a-links line-height: 50px (the same as the nav-bar's height) will also center the links vertically.

Posted Image
Was This Post Helpful? 0
  • +
  • -

#4 poliosynthesis   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 40
  • Joined: 27-June 13

Re: Issues with positioning links and increasing the size of link boxes

Posted 28 January 2014 - 12:20 AM

Thankyou!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1