I have the same basic navigation structure for all my websites. As you can tell I have a space between the contact us and the pixels on my website: http://thenewfilmsandfluff.blogspot.com/2015/09/hitman-47.html
Given the fact that it looks like this on all my relevant websites I think it is sufficient enough to include both the HTML and CSS for the relevant structure. I use the advanced template layout to mark-up my HTML with CSS.
This is what the HTML looks like for my navigation section- I've made it in comments so that it would still be able to show.
Context: this is the code navigation for my website.
<!--<section id="nav">
<nav><ul>
<li>Hitman 47!!</li>
<li>Minions!! </li>
<li>Selected Reviews #1</li>
<li>Terminator Genisys</li>
<li>Adjustment Bureau</li>
<li>Jurassic World</li>
<li>Inside Out</li>
<li>Star Wars IV: A New Hope</li>
<li>Star Wars V: The Empire Strikes Back</li>
<li>Contact<li>
<li>Pixels!</li></ul></nav>
I've included the # to denote examples.
</section> -->
And here is the CSS for the section
/*
h2{color: #00CCFF; border: 1px; background-color: blue; border-radius: 10px; -MOZ-BORDER-RADIUS: 10PX; -webkit-border-radius: 10px; -moz-box-shadow: 10px 10px; -webkit-box-shadow: 10px 10px; }
h2.style{font-size: 35px;}
p.style2{font-size: 20px; color: #0000FF !important; font-family: ariel, times new-roman; background-color: lawngreen;}
body{background-color: beige;}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
a {
display: inline;
width: 60px;
background-color: #dddddd;
body{background-color: mediumpurple;}
}
a:link{color: #CC3300; }
a:visited{color: #D14719;}
a:hovor{color: #D65C33; background-color: blueviolet;}
a:active{color: #661A00;}
section#main{float: left;
width: 70%;}
Section#nav{float:right;
width: 20%;}*/
What is it that I could be doing?
You didnt close the li tag for contact
<li>Contact<li>
<li>Contact</li>
You missed a doubled quote here by href
<li>Selected Reviews #1</li>
:)
<li>Contact<li> //(You didnt close the li tag for contact)
It should be like this:
<li>Contact</li>
Modern browsers will parse the html automatically and close the unclosed tags so its rendering like:
<li>Contact</li> and empty list item <li></li>
Related
So I'm learning to make websites in html and css. recently i encountered the error which didn't happened to me before: then i adding border to link in css, i cant get bottom and top borders to appear (that's a huge issue because i want to use border-bottom)
a.navi:link{color: black;}
a.navi:hover{color: black;
border-bottom: 5px solid #0ecf5b;}
#navigation li{
display: inline-block;
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
background: #ffffff;
/*border-bottom: 5px solid #0ecf5b;*/
}
however if I'm adding border-bottom: to navigation li{} im getting this border
(#navigation li{} is list items surrounded by
<a href="..." class="navi">
tags)
Html code:
<nav id="navigation">
<ul>
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
</nav>
Put your <a> tags inside your <li> tags.
For example:
<li>Home</li>
Here is a working example: https://jsfiddle.net/kb3su8og/
I'm assuming you want your links underlined, which would be better if you created a div underneath the link and the colored that appropriately, but to do borders try something like this for your html:
<nav id="navigation">
<ul class="navi">
<li>Home</li>
<li>Some-Stuff</li>
<li>About</li>
<li>Contacts</li>
<li>Others</li>
</ul>
and have your css reflect the changes with:
navi > a:hover {
border-bottom //that stuff
What that does is when a link is hovered over it does whatever you want. I am away from my computer so I can not test the code but I think this will work if not there are tons of youtube tutorials on this exact matter. Have a nice day!
Make sure you are using <a> tag inside <li> tag, it should be
<nav id="navigation">
<ul>
<li>Stuff</li>
</ul>
</nav>
ul{list-style:none;}
a{display:block;text-decoration:none;}
li{display:inline-block;}
li:hover > a{color: black;border-bottom: 5px solid #0ecf5b;}
#navigation a{
font-family: Courier New;
font-style: italic;
font-size: 32px;
padding: 5px 25px;
}
<nav id="navigation">
<ul>
<li>Stuff</li>
<li>Stuff</li>
<li>Stuff</li>
</ul>
</nav>
I think the more standard way to do what you want would be to put your a tags inside your li's, and use styles to make sure they fill the whole space, such as display: block.
ul {
list-style: none;
width: 200px;
}
li a.navi {
display: block;
padding: 5px;
border: 1px solid black;
cursor: pointer;
text-align: center;
}
li a.navi:hover {
background-color: #cccccc;
}
<ul>
<li><a class="navi">One link</a></li>
<li><a class="navi">Second link</a></li>
</ul>
This may not be the style you are going for, I'm just guessing based on the snippet you provided.
I'm running into issues on my first ever website. I have successfully created a navigation bar at the top which looks and acts somewhat how I want it to (other than the color scheme but that can come later). The issue is that whenever I click a different link on the bar I want that box to change color, but it is currently stuck highlighted on the homepage. I think this is something super simple but i cannot find it. Thank you for the help.
body
{
font-family:sans-serif;
width: 100%;
margin: 0px;
}
/* upper strip holding the tabs*/
ul
{
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position:fixed;
top: 0px;
width: 100%;
background-color: #328CC1
}
li
{
float:left;
border-right:3px solid #30FFE3;
}
li a
{
display: block;
color: whitesmoke;
text-decoration: none;
padding: 14px 16px;
text-align: center;
}
li a:hover:not(.active)
{
background-color: #111;
}
a.active
{
background-color: #EAB126
}
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>Academics</li>
<li>Athletics</li>
<li>Contact</li>
</ul>
Change this:
a.active
background-color: #EAB126
}
to this:
li a:focus {
background-color: #EAB126
}
Here is the JSFiddle demo
This does what you ask BUT if this is a navigation bar then bear in mind that the control will lose focus as soon as you change page. It would be better if you use Javascript/JQuery to handle that much more easily.
A typical way of handling this is to have each page have a class that includes the page name: <div class="academics"> for example.
Now modify your header (within the page div) as follows:
<ul>
<li><a class="for_home" href="#home">Home</a></li>
<li><a class="for_academics" href="#academics">Academics</a></li>
<li><a class="for_athletics" href="#athletics">Athletics</a></li>
<li><a class="forcontact" href="#contact">Contact</a></li>
</ul>
this would be followed by the css as follows:
.home .for_home, .academics .for_academics, .athletics .for_athletics, .contact .for_contact {
background-color: #EAB126;
}
Then the menu item for the current page will be highlighted.
Congratulations on your first website!
Here is the menu html code for the nav bar:
<nav>
<div id="menu">
<ul>
<li>Home Page</li>
<li>History</li>
<li>Events</li>
<li>Information</li>
<li>Photos</li>
<li>Contact Us</li>
<li>Useful Links</li>
</ul>
</div>
</nav>
and here's the code for css :
nav{
float: left;
margin-top: 15px;
}
nav ul {
list-style: none;
margin: 0;
padding: 0px 0px 0px 0px;
}
nav li {
display: inline-block;
}
nav a {
padding: 8px 0px;
margin-right:71px;
color: #ffffff;
display: block;
text-decoration: none;
text-transform: capitalize;
font-size: 13px;
}
nav a:hover {
color: #cccccc;
}
So for example, if I am currently looking at history page, the text "History" in the navbar will be red. How can I do such a thing?
#edit: As stated in a comment, I am trying to avoid jquery.
This is a great resource for beginners: W3Schools
This page on that site contains the answer to your question: CSS Text Formating
I don't mean to be vague, but your question is a little unclear.
just add active class name in the active state link.
<li>Home Page</li>
<li>History</li>
<li><a class="active" href="events.html">Events</a></li>
<li>Information</li>
And in your CSS
nav a.active {
color: red;
}
You will need to use jQuery to add an active class to the anchor tag that corresponds with the page that you are on. Once that is done you can style it like this a.active {color:red}
If these are individual HTML pages you could also just manually apply the active class to the anchor tag for that page.
The CSS attribute you are describing is a CSS selector. Your CSS will be as follows, which will target all "active" hrefs in the div ID menu
#menu a:active {
color: blue;
}
Ok hey guys.
So what I try to acheive is to have a menu in the topnav of my site and when hovring the mouse over to show some stuff in a list under it.
so far I'm working on local on a test html file until I get it working.
so what i got so far is this menu:
<ul id="menu">
<li>Notifications
<ul>
<li id="foot-notify-954>
Xtesting left a comment for your blog 22 hours ago
</li>
<li id="foot-notify-953>
X
<p>testing left a comment for your blog <span>22 hours ago</span></p>
</li>
</ul>
</li>
and my css code:
ul {
font-family: Arial, Verdana;
font-size: 14px;
margin: 0;
padding: 0;
list-style: none;
}
ul li {
display: block;
position: relative;
float: left;
}
li ul { display: none }
ul li a {
display: block;
text-decoration: none;
color: #ffffff;
border-top: 1px solid #ffffff;
padding: 5px 15px 5px 15px;
background: #2C5463;
margin-left: 1px;
white-space: nowrap;
}
ul li a:hover { background: #617F8A }
li:hover ul {
display: block;
position: absolute;
}
li:hover li {
float: none;
font-size: 11px;
}
li:hover a { background: #617F8A }
li:hover li a:hover { background: #95A9B1 }
I think the problem is that I'm having more than 1 <a> hyperlink inside the notifications <li>
id like each li notification to show in 1 line, as in the format, the X button at the start to remove it then the notification itself.
First, you have to check the html syntax:
list should looks like this:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li><a href='#'>Milk</a></li>
</ul>
This tool helps you find the errors (red highlighted):
http://jsbin.com/emowir/1/edit
Here is your example:
<ul id="menu">
<!-- type 1: NOT drop down-->
<li>Home</li>
<!--type 2: drop down-->
<li>About Us
<ul>
<li>The Team</li>
<li>History</li>
<li>Vision</li>
</ul>
</li>
</ul>
What would you like to insert and where?
Your problem does seem to be bad code formatting. This is a clean and edited version of your code. The code "breaking" is an issue of CSS formatting. Using inline-blocks instead of blocks helps get things lined up properly, and shifting the background style to the <li> rather than the <a> makes it look better.
Your problem is the following:
ul li a {
display: block;
This makes every link you insert into the list a block. Try start to float things like in this example I made from your code, http://jsfiddle.net/xN8sc/1/
If you could kindly hover your mouse over the MORE button in the menu here: http://jsfiddle.net/H8FVE/7/
You will see that there is a list containing the words Random text here. I tried to style that list but somehow the styling of the drop down menu prevents me from doing it. The style I used for the list is:
#trendcontainer {
margin-top: 0px;
padding-bottom: 1px;
}
#trend { width: 188px; }
#trend ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;
}
#trend film
{
display: block;
padding: 3px;
width: 188px;
background-color: #B40404;
border-bottom: 1px solid #eee;
text-align: center;
letter-spacing: 0.4px;
color: #FAFAFA;
}
Here is part of the HTML:
<div id="second-menu" class="clearfix">
<ul id="secondary-menu" class="nav sf-js-enabled">
<li class="manimation">Animation</li>
</ul>
<ul id="mega">
<li class="dif mmore" style="background:none;">More...
<div>
<moretopbar>
<ul>
<li class="mgames">Games</li>
<li class="mliterature">Literature</li>
<li class="marts">Arts</li>
<li class="mcontact" style="background:none;">Contact</li>
</ul>
</moretopbar>
<morecontainer>
<moreleftbar>
<trendcontainer>
<trend>
<ul>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
<li><film>Random text here</film></li>
</ul>
</trend>
</trendcontainer>
</moreleftbar>
</morecontainer>
</div>
</li>
</ul>
</div> <!-- end #second-menu -->
Although, I would advice overlooking the fiddle for a visual presentation of the issue: http://jsfiddle.net/H8FVE/7/
Can you figure out how to fix the styling? If you choose to answer, please be detailed as my coding knowledge is limited - ideally with an updated fiddle.
I just updated it. http://jsfiddle.net/H8FVE/11/
I added a class called .random in the css code and class="random" into the ul element you aimed to modify.
in the css I added the following code, although you may change it to fill your purposes. (if you want to style only the ul, change it to .random { }
.random li {
font-weight:bold;
}