My links are not working on my navigation bar. I cannot figure out what I've done wrong. This is the code. HTML:
<div id="menu"
<ul>
<li>Home</li>
<li>About Me</li>
<li>Publications</li>
<li>Location</li>
<li>Strategic Interactions</li>
</ul>
And CSS:
#menu {
width: 950px;
height: 35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
margin-top: -175px;
margin-left: 25px;
}
#menu li {
display: inline;
padding: 20px;
}
#menu a {
text-decoration: none;
color: #2B297F;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #2B297F;
background-color: #999;
}
I'm sure it's just something I'm missing. If you want to see the site itself to understand what mean, you can find it at http://kerryaltmantest.info
Thank you!
It looks like one of your divs is in front of your nav bar. Through a close investigation, I found that the div .mainrunner is overlapping the nav bar... (Red border)
If you try to remove it from your css, you will see that your nav is now clickable... YAY!
Let me know if anything else comes up!
Your Parent Div is overrides your Menu
Here I had added Working Fiddle
Click on Home in Fiddle
Working Demo
Use This CSS at your Index Page too
#menu {
width: 950px;
height: 35px;
font-size: 20px;
font-family: cambria, Georgia, sans-serif;
font-weight: bold;
text-align: center;
background-color: #FFF;
border-radius: 0px;
/* margin-top: -175px; */
margin-left: 25px;
}
Related
I want the colors of the text and background to change when clicked, and also the selected page button to have that inverted style. When i open it with a localink everything looks fine, but when i upload it to the server and i open it for the first time the links are more spaced out and the background color extends on the margin. Why is that? If i refresh it, it looks fine, but if i Ctrl+F5 to clear the cache the problem returns. And I dont know why but this issue happens only on portrait.
You can look on the website cristianleciu.com for the issue , and also i have linked 2 images, showing how its supposed to look, and how the problem looks like.
Thank you in advance.
This is how its supposed to look
This is how the problem looks
<!DOCTYPE html>
<html>
<body>
<header>
<div class="title">
<span>Cristian Leciu</span>
</div>
</header>
<nav>
<ul class="navlist">
<li class="selected">HOME</li>
<li>PORTOFOLIO</li>
<li>CONTACT</li>
</ul>
</nav>
</body>
<style>
.title {
display: flex;
justify-content: center;
text-align: center;
z-index:1000;
font-weight: bold;
font-size: 100pt;
line-height: 40%;
}
nav{
position: sticky;
position: -webkit-sticky;
top: 0;
background-color: white;
padding: 8px 0;
z-index: 10000;
}
.navlist {
padding-top: 0;
list-style: none;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
}
.navlist a{
font-size: 23px;
margin: 0 10px;
color: black;
text-decoration: none;
}
.navlist a:hover {
background-color: black;
color: white;
}
.selected{
font-size: 30px;
margin: 0 10px;
color: white;
background-color: black;
text-decoration: none;
font-weight: bold;
}
#media screen and (min-width:160px) and (orientation:portrait){
.title{
font-size: 118px;
margin-top: 5.45vh;
margin-left: 0;
font-weight: bold;
font-family: 'Tai Heritage Pro', serif;
line-height: 100%;
}
nav{
padding: 20px 0;
}
.navlist a, .selected{
font-weight: bold;
font-size: 32px;
}
}
</style>
</html>
You are missing the <a> tag in your code.
<ul class="navlist">
<li class="selected">HOME</li>
<li>PORTOFOLIO</li>
<li>CONTACT</li>
</ul>
You need to fix that first as your css rules is targeting the .navlist a
So first you need to fix your HTML like this:
<ul class="navlist">
<li class="selected">HOME</li>
<li>PORTOFOLIO</li>
<li>CONTACT</li>
</ul>
I am trying to center my H1 and nav by using text-align: center; although when I do this my nav is not reaching the center and is not under my h1 as I want it to be. Currently my nav does not reach under my H1 and is too far to the left, what do I need to add to my nav to be able to center it correctly under my H1.
* {
padding: 0px;
margin: 0px;
}
body {
background-color: #ededed;
font-family: sans-serif;
}
.main-h1 {
font-weight: 900;
text-align: center;
font-size: 70px;
padding-top: 20px;
}
.mobile-nav>ul {
list-style: none;
text-align: center;
}
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
}
.mobile-nav>ul>li>a {
text-decoration: none;
color: black;
font-weight: lighter;
}
.mobile-nav>ul>li>a:hover {
opacity: .5;
transition: .3s;
}
<h1 class="main-h1">Main</h1>
<nav class="mobile-nav">
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
problem is that your h1 and nav are correctly centred in the page.
Your design are not, so if you want the same result as your design, you gonna need to add a margin, for example :
.mobile-nav>ul>li:first-child {
margin-left: 22px;
}
but i don't really recommend it
I recommend you to set width for the li elements
.mobile-nav>ul>li {
display: inline-block;
font-size: 45px;
padding: 20px;
**width: 100px;**
}
so text-align: center is inherited from ul
here is the code
http://plnkr.co/edit/88Dy8v9AzB5uMSpiiVfR?p=preview
I'm relatively new to HTML (only a few weeks now), and I'm stuck. The "about" section on my page doesn't seem to be clickable and won't bring me to the linked page. The confusing thing is that the link appears to be clickable since the floating hand icon appears when hovering over the link. I can right-click and open the link in a new tab. If I delete the css and try the link without the formatting, it is also valid.
I'm confused... is the CSS somehow messing with my href tag?
here's the html:
<div id="header">
<div class="container">
<div class="row">
<div class="twelwecol last">
<div id="navigation"> <!-- Navigation Links -->
<ul>
<li>about</li>
<li>members</li>
<li>events</li>
<li>media</li>
<li>social</li>
</ul>
</div>
</div>
</div>
</div>
</div>
and the code from the "navigation.css" page:
#header {
width: 100%;
height: 49px;
color: white;
background-color: #1b1e25;
position: fixed;
z-index: 9999;
}
#logo {
background-image: url('../images/assets/logo.png');
background-repeat: no-repeat;
height: 80px;
width: 80px;
display: block;
float: left;
}
#navigation {
padding-top: 2px;
width: 480px;
display: block;
margin: 0px auto;
}
#navigation ul {
padding:0px;
margin: auto;
text-transform: uppercase;
}
#navigation ul li {
display:inline;
float:left;
list-style:none;
padding: 13px 20px 13px 20px;
}
#navigation ul li {
display:inline;
float:left;
list-style:none;
padding: 13px 20px 13px 20px;
}
#navigation ul li a {
color: gray;
text-decoration: none;
font-family:'Scada', sans-serif;
font-size: 13px;
}
#navigation ul li a:hover {
color: white;
}
.current {
border-bottom: 1px solid #cb1c1c;
color: white;
}
#contact {
padding-top: 12px;
float: right;
position: relative;
}
#contact a {
text-decoration: none;
text-transform: uppercase;
font-size: 9px;
color: gray;
padding: 11px;
}
#contact a:hover {
color: white;
border: #333333 1px solid;
padding: 10px;
}
Could someone please tell me what is going on here? Any help would be most appreciated!
it appears clickable because it is contained within the a tag. When you link something your href needs to have a proper extension. Are you sure youre using .htm and not html?
furthermore CSS affects Style (css= cascading style sheet) it wont affect html (or any other) functions like the href function.
try changing your href to href="about.html"
I have a very plain navigation menu using an unordered list laid out horizontally using display:inline;. The previews in my HTML editor show the page coming together just fine. However, when it's viewed in Chrome and IE, there's a strange padding on top of the nav menu and only on the top. Using the process of elimination, I know this is a problem with my CSS for the <li> tag but I'm not sure what the problem is.
So far I've tried display:inline-block, lowering the font size, setting the <ul> tag in the nav menu to display:inline, and a myriad other things. None seems to be helping. Any advice for where the CSS went wrong? Here is the HTML in question...
<body>
<div id="wrapper">
<div id="header"></div>
<div id="navigation">
<ul>
<li>welcome</li>
<li>who we are</li>
<li>what we do</li>
<li>contact</li>
</ul>
</div>
<div id="content"> </div>
</div>
</body>
And here is the CSS...
body {
background-color: #000000;
margin: 0;
padding: 0;
font-family: Arial, Helvetica, Sans-Serif;
text-align: center;
}
#header {
background-color: #ffffff;
height: 100px;
}
#wrapper {
width: 960px;
text-align: left;
}
#navigation {
height: 45px;
background-color: #C0C0C0;
font-size: 1.3em;
text-align: right;
}
#navigation a {
color: #00132a;
text-decoration: none;
}
#navigation a:hover {
color: #483D8B;
}
#navigation ul {
padding-top: 10px;
}
#navigation ul li {
display: inline;
list-style-type: none;
padding: 0 30px 0 30px;
}
#navigation-symbol {
font-size: 1em;
}
#content {
background-color: #ffffff;
text-align: left;
font-size: 14px;
}
And for interactive fun there's a jsFiddle as well which shows the exact same phenomenon I'm seeing. Thanks ahead for the advice!
Simply set margin to zero
#navigation ul {
margin: 0;
padding-top: 10px;
}
Wondering if someone can tell me why my links are not working. I have tried directly using the file path but still no luck.
Im not sure whether it is the css or the html link. Code snippets below.
HTML
<div id="menu">
<ul>
<li class="active">Homepage</li>
<li>Classes</li>
<li>About Us</li>
<li>Contact</li>
</ul>
</div>
CSS
#menu {
float: right;
width: 600px;
height: 99px;
}
#menu ul {
float: right;
margin: 0px;
padding: 70px 0px 0px 0px;
list-style: none;
line-height: normal;
}
#menu li {
float: left;
margin-left: 3em;
}
#menu a {
display: block;
letter-spacing: 2px;
text-decoration: none;
text-transform: uppercase;
font-family: 'Archivo Narrow', sans-serif;
font-size: 1.10em;
font-weight: 600;
color: #B6B6B6;
}
#menu .active a
{
color: #FFFFFF;
}
#menu a:hover {
text-decoration: underline;
}
Thankyou in advanced
Added a jsFiddle: http://jsfiddle.net/jSgPR/
Your links work fine, but the :before element is appearing on top of the links.
This bit of CSS is appearing over the top of the menu, and thus making the links not clickable:
#banner:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
/*background: url('images/gradient-bg.png') no-repeat right top;*/
background-size: 100% 100%;
top: 0px;
right: 0px;
}
You can fix this by adding the following to your CSS file
position:relative; z-index:10;
Add these to #menu and you'll be able to hover and click on the navigation links.
you have to have:
cooking.html
cookeryclasses.html
cookeryaboutus.html
in the same Folder as the php file your using if you use only Filenames and no Paths.
Check this fiddle. Everything will work. http://jsfiddle.net/jSgPR/1/