0

  1. The top part of the five links on the right aren't clickable. How can I get the link to be active throughout the entire button?

  2. Also, how would I make it so that when I hover over the links, the background color still changes as it currently does but has an opacity:0.5. Whenever I try this the background color as well as the words turn transparent.

  3. One more thing. If I re-size my browser the navbar moves around and looks terrible. How can I keep the navbar in place as I re-size the browser?

Here's the JSFiddle link


HTML 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>Me</title>
<link href="../css/style.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Montserrat:700' rel='stylesheet' type='text/css'>
</head>

<body>
<section class="main_front">
<nav id="nav_container">

<div class="logo"><img src="../images/logo.png" height="65px" /></div><!--end of logo-->
<ul class="right_links">
<li class="nav_li"><a href="#">Goals</a></li>
<li class="nav_li"><a href="#">School Site</li></a>
<li class="nav_li"><a href="#">Web Design</li></a>
<li class="nav_li"><a href="#">Summer</li></a>
<li class="nav_li"><a href="#">Schedule</li></a>
</ul><!--end of right_links-->

</nav><!--end of nav_container-->
</section><!--end of main_front-->



<section class="footer">
<div class="phonenumber">
<b>Contact:</b> 239-XXX-XXXX
</div><!--end of phonenumber-->
<div id="email">
adesign@email.com
</div><!--end of email-->
<div class="address">
1234 Web Design Ave.
</div><!--end of address-->
</section><!--end of footer-->
</body>
</html>


CSS Code

@charset "utf-8";
/* CSS Document */

body {
    margin:0;
    margin:none;    
}

.logo {
    float:left;
    margin-top:5px; 
}

.main_front {
    width:100%;
    height:90vh;
    background-color:#A9D2F1;   
}

/* .nav_links {
    width:1600px;
    height:100px;
    margin:auto;
    color:white;    
} */

.nav_li {
    float:right;
    margin-right:20px;
}




#nav_container {
    width:100%;
    height:79px;    
    /*background-color:#82B5E8;*/
    background-image:url(../images/nav_container_bg.png);
}

.right_links {
    width:70%;
    float:right;
    list-style-type:none;
    text-align:center;
}

.right_links a {
    display:inline-block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size:17px;
    margin-top:15px;
    font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}

.right_links li {
    width:130px;
    height:40px;    
    line-height:10px;
    text-align:center;  
    border-radius:15px;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -ms-transition:all 0.5s;
}

.right_links li a {
    display:block;
    width:130px;
    height:40px;
}



.right_links li:hover {
    background-color:#166083;

}   

.phonenumber {
    font-size:26px;
    margin-left:15px;
    float:left; 
}

.address {
    font-size:26px;
    margin-left:75%;

}

#email {
    font-size:26px;
    float:left;
    margin-left:-295px;
    margin-top:40px;
}   

.footer {
    width:100%;
    height:10vh;
    background-color:#8FC6ED;
}
Anthony726
  • 75
  • 2
  • 4
  • 10

2 Answers2

1

change your CSS to this:

/* CSS Document */
 body {
    margin:0;
    margin:none;
}
.logo {
    float:left;
    margin-top:5px;
}
.main_front {
    width:100%;
    height:90vh;
    background-color:#A9D2F1;
}
/* .nav_links {
    width:1600px;
    height:100px;
    margin:auto;
    color:white;    
} */
 .nav_li {
    float:right;
    margin-right:20px;
}
#nav_container {
    width:100%;
    height:79px;
    /*background-color:#82B5E8;*/
    background-image:url(../images/nav_container_bg.png);
}
.right_links {
    width:70%;
    float:right;
    list-style-type:none;
    text-align:center;
}
.right_links a {
    display:block;
    list-style-type:none;
    text-decoration:none;
    color:white;
    font-size:17px;
    margin-top:0px; height:30px; padding-top:15px;
    font-family:Montserrat, "Arial Black", Gadget, sans-serif;
}
.right_links li {
    width:130px;
    height:40px;
    line-height:10px;
    text-align:center;
    border-radius:15px;
    transition:all 0.5s;
    -moz-transition:all 0.5s;
    -webkit-transition:all 0.5s;
    -ms-transition:all 0.5s;
}
.right_links li a {
    display:block;
    width:130px;
    height:40px;
}
.right_links li:hover {
    background-color:rgba(22,96,131,0.5);
}
.phonenumber {
    font-size:26px;
    margin-left:15px;
    float:left;
}
.address {
    font-size:26px;
    margin-left:75%;
}
#email {
    font-size:26px;
    float:left;
    margin-left:-295px;
    margin-top:40px;
}
.footer {
    width:100%;
    height:10vh;
    background-color:#8FC6ED;
}

About your last question, it all depends on what you need. If you want to make it responsive, the size of the nav will vary, hence the menu elements will re-locate, this requires a decision on what do you want to do depending on which size is shown (you can do nothing as well, as in no resizing)

Devin
  • 7,690
  • 6
  • 39
  • 54
0

  1. You are using margin-top:15px to move the text down on the button. Change this to padding-top and the entire button will be clickable. This is because padding is on the inside of the a tag, and so expands the size of the a tag (which is your clickable link).

  2. You have stumbled onto a problem that bothers a lot of us. When you have text within an element, it is tricky to apply opacity to the element but not to the text within. However, there are workarounds that workgreat. Here are a couple of posts:

    http://css-tricks.com/non-transparent-elements-inside-transparent-elements/

    CSS - Apply Opacity to Element but NOT To Text Within The Element

  3. There are two ways to specify the location/size of elements on your page: fixed px/em or percentages. Fixed sizes do not re-size, but percentages do. Therefore, instead of this:

Do this:

<div style="height:10%;width:15%;"></div>

As the window size changes, so will the width/height of the div.

Two downsides to this approach:

a. You probably can't do this with just the navbar -- you may have to refactor your page to use percentages in most places;

b. Large monitors will have larger elements than smaller monitors -- but usually, this is a good thing.

What most folks do when switching to percentages is to set the outer page boundaries (the "wrap" or "container" or whatever is your top-level level div beneath body) in pixels -- and then use percentages for all else underneath. Okay, rarely all -- it is okay to mix percents and pixels/ems (of course, not in the same element ). Usually, there are some divs (buttons or shapes or whatever) that will remain fixed size regardless the size of the monitor/window.

A couple of references on this one:

http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/

Which is better to use in CSS, percentage or pixels?

Community
  • 1
  • 1
cssyphus
  • 37,875
  • 18
  • 96
  • 111