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/
Related
My website project has a navigation bar at the top of the page. I made it on the index/home page and then copied and pasted it onto the other three pages so that there would be no differences. It looks the same on all of the pages, except for one page, where it has less margin/padding. I'll insert the pictures, but I've been told that the difference isn't clear unless you see it in real life on my screen.
Correct margin/padding, incorrect margin/padding.
.navigation {
list-style-type: none;
margin: 5px;
padding: 1px;
text-align: center;
background-color:#bee7b8;
overflow: hidden;
}
.navigation img {
width: 250px;
float: left;
}
.navigation a {
display: block;
width: 10px;
color: #0c7c59;
font-family: Nunito;
font-size: 28px;
text-decoration: none;
padding-left: 100px;
}
.navigation li {
float: left;
padding-top: 32.5px;
width: 295px;
}
.navigation a:link {
color: #0c7c59;
}
.navigation a:visited {
color: #28c191;
}
.navigation a:hover {
color: #799b74;
}
.navigation a:active {
color: #4c2e05;
}
<header>
<ul class="navigation">
<img class="navigation" src="https://i.imgur.com/x4oWsIA.png">
<li>HOMEPAGE</li>
<li>PRODUCTS</li>
<li>REGISTER</li>
<li>FAQ</li>
</ul>
</header>
I'm wondering if it's like this because I've tried using an image slideshow from W3 schools (shown in this question of mine), but removing that has not helped.
EDIT: I found out that linking to the w3 stylesheet is what causes it! IDK how to fix this though...
have you reset your CSS code? If you haven't then try this on top of your CSS code:
* {
margin: none;
padding: none;
}
also, make sure you didn't miss anything when you copied the code.
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;
}
I'm new to web development sorry. ok so i want to make html and css menu drop when you click on it. i google and all i could find was menus which expand when you hover over them.
basically i want something like this
so far i have tried this
CSS
.menu-item {
background: #fff;
width: 50px;
}
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item ul {
background: #fff;
font-size: 13px;
line-height: 30px;
height: 0px;
list-style-type: none;
overflow: hidden;
padding: 0px;
}
.menu-item:focus ul {
height: 93px;
}
.menu-item h4 a {
display: block;
text-decoration: none;
width: 200px;
cursor: pointer;
}
HTML
<div class="menu-item">
<h4>▼</h4>
<ul>
<li>Settings</li>
<li>Log Out</li>
</ul>
</div>
i would also be very pleased if you guys can give me link to any tutorial which would help me make this menu.
You can use jQuery for making it simple. It is a JavaScript file which provides you ease for creating such menus with ease. One of them which is easy to use can be found here: http://patrickkunka.github.io/easydropdown/
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 tried something with divs in html, and normally it isn't a problem. However I encountered a problem and I don't find my mistake.
The menu div is supposed to be in the center of the header div and there should be no margin at the top.
here is the example with the error: http://jsfiddle.net/j83eb/
here is the html:
<div id="header">
<div id="menu">
<ul>
<li><a class="nav-element" href="#">News</a></li>
<li><a class="nav-element" href="#">Turnier</a></li>
<li><a class="nav-element" href="#">Ergebnisse</a></li>
<li><a class="nav-element" href="#">Impressionen</a></li>
<li><a class="nav-element" href="#">Anmeldung</a></li>
<li><a class="nav-element" href="#">Impressum</a></li>
</ul>
</div>
</div>
and the css:
#header {
padding: 0;
margin:0;
background: #003399;
width: 100%;
height: 50px;
display: block;
position: fixed;
top: 0;
left: 0;
}
#menu a {
display: block;
width: 150px;
height: 50px;
}
#menu {
padding:0;
margin-right:auto;
margin-left:auto;
line-height:50px;
width: 950px;
height: 50px;
}
#menu ul li {
display: block;
width: 150px;
height: 50px;
float: left;
text-align: center;
text-transform: uppercase;
font-family: Arial;
font-size: 16px;
font-weight: normal;
list-style: none;
margin:0;
paddin:0;
line-height:50px;
}
.nav-element:link {
color: #FFF;
text-decoration: none;
}
.nav-element:visited {
color: #FFF;
text-decoration: none;
background: #81b4e3;
}
.nav-element:hover {
text-decoration: none;
color: #FFF;
text-decoration: none;
background: #1a589d;
}
.nav-element:active {
color: #FFF;
text-decoration: none;
background: #C00;
}
Thanks!
Below will fix it (remove margin/padding from ul)
#menu ul {
margin:0;
padding:0;
}
And the Fiddle
As said above, you'll want to clear the default margins on the <ul> element. (No need to clear the padding, there is none). I also removed the height and line-height from everything since that isn't necessary and will likely just cause problems in the future.
Also, make sure to look through your CSS before sending it out for help. There were a number of properties with typos as well as duplicate properties.
http://jsfiddle.net/j83eb/3/