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.
Related
I am learning how to make nav bars with drop downs. This works well on Firefox and Chrome, but not in Edge. The problem is that once the drop down has been displayed after the mouse was hovering over it, when the mouse is moved and it's time for it to have display: none, you can still see a tiny amount of the bottom sticking out where the dropdown was. This is only when the ul is floated.
I've removed a lot of css to leave what mainly is essential, but included the whole html, in case anyone wants to just copy and paste into a file to see. I'm am wondering if this is something I've done wrong, or a bug in Edge, and if anyone can tell me how I can prevent this from happening.
<html>
<head>
<style>
.right {
float: right;
}
.nav {
background-color: #444;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav li {
font-size: 1.1em;
display: inline-block;
}
.nav .dropdown {
position: absolute;
display: none;
background-color: #444;
font-size: 0.9em;
}
.nav .dropdown li {
display: block;
}
.nav li:hover ul {
display: block;
}
.nav a {
text-decoration: none;
color: #fff;
display: block;
}
.nav a {
padding: 15px 25px 15px 25px;
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>Home</li>
<li class="right">Your...
<ul class="dropdown">
<li>Profile</li>
<li>Bookmarks</li>
<li>Songs</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I may have been hasty posting this question. I have figured out a way of hiding the problem by adding a border to the nav bar.
.nav {
background-color: #444;
border-bottom: solid #444 thin;
}
I don't know how to explain what's happening, but I have a logo image on my site and when you hover over some of it, it works right, but if you hover over some of the other parts it doesn't act like a link. It acts on it randomly so it's not like half of the image is just not a link or something it's like hover over the letter "P" it works hover over "in" it doesn't work hover over "kT" it works again (the logo says "Pink Tangerine").
It's a png with a transparent background so I'm wondering if that has something to so with it, but that doesn't make any sense. I've never ran into a problem like this before, can you guys tell me what's wrong?
HTML5
<div id="main-banner">
<header>
<a id="image" href="index.html">
<img alt="Logo" src="Images/PT-logo.png">
</a>
<nav>
<ul>
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</div>
CSS3
I don't imagine most of my CSS should be relevant, but I included all the link description and main header/banner stuff just in case. The one class that deals with the image is at the bottom of the CSS and it only makes it so I don't get a weird border when I hover over the image.
/*Link Info */
a {
text-decoration: none;
color: #DB7093;
}
a:link, a:visited {
text-decoration: none;
color: #FFC0CB;
}
a:hover, a:active {
text-decoration: none;
background-color: #DB7093;
color: #F0F8FF;
}
/*Banner Navigation*/
#main-banner {
width: 100%;
height: 110px;
padding: 25px 0 0;
background-color: #FFC0CB;
}
#main-banner header {
width: 70%;
margin: auto;
}
#main-banner header img {
width: 300px;
height: 100px;
float: left;
margin-left: 10%;
}
#main-banner header nav {
position: relative;
height: 20px;
left: 105px;
top: 50px;
}
#main-banner header nav ul {
list-style: none;
margin: auto;
}
#main-banner header nav ul li {
float: left;
display: inline;
}
#main-banner header nav li a:hover {
background-color: #DB7093;
color: #F0F8FF;
text-shadow: none;
}
#main-banner header nav ul li a {
color: #DB7093;
display: block;
padding: 3px 15px;
height: 12px;
}
/*Image Links*/
a#image {
background-color: transparent;
}
So the issue is the nav tag and the left/top/height css style, because it's container is the same as the image link so there is overlap.
removing the left/top/height fixes it as seen here. It depends on what your ultimate goal is as far as looks go in order to fix it and still have the appearance you want.
#main-banner header nav {
position: relative;
}
EDIT:
I would think using some margin to move the element would get you what you want, just not sure where the placement is supposed to go.
Figured it out thanks to something Charles380 pointed out. I made the image absolute and just the nav relative so I could move it like I wanted. Thanks for your help guys.
Doing some basic html/css. I was making a rudimentary navbar with floated links. After getting it working I was stuck with this problem, and so far have not come to a solution.
My links have these dots in them. As the picture shows.
My code is simple:
HTML
<div id="nav-wrapper">
<div id="navbar">
<ul id="nav">
<li>Home</li>
<li>About</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</div>
</div>
and the CSS
#nav-wrapper {
background-color: black;
height: 40px;
width: 100%;
border-top: 2px solid gray;
border-radius: 0 0 5px 5px;
}
#navbar {
}
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
}
ul#nav * a {
width: 25px;
margin: 0 10px 10px 0;
}
My question is what is causing these dots? And why don't they appear if I add more words/links to the list or I erase all but one item? It's odd. I must be missing something extremely embarrassing because this just seems odd.
You want to use the code - list-style: none;
so your code will look like
ul#nav li {
float: left;
font-family: sans-serif;
font-size: 18px;
text-decoration: none;
list-style: none;
}
Add this style:
list-style-type: none;
To this selector:
ul#nav li
Modify your declaration for ul#nav li to include this property
list-style:none;
http://jsfiddle.net/bcDDk/
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/