What I've done is I placed   a lot of times but when you change the size of the window, the logout button does not stay put.How do you make the logout button stay in the rightmost portion of the navigation bar besides using the   code? Thanks
Try This
<!DOCTYPE html>
<html>
<head>
<style>
div.horizontal ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div.horizontal {
width: 100%;
height: 30px;
background-color: #98BF21;
}
div.horizontal li {
float: left;
}
div.horizontal a:link, div.horizontal a:visited {
font-weight: bold;
color: #FFF;
background-color: #98BF21;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
div.horizontal a {
display: block;
width: 100px;
}
li.last
{
float:right !important;
}
</style>
</head>
<body>
<div class="horizontal">
<ul>
<li>Home</li>
<li>News</li>
<li>Articles</li>
<li>Forum</li>
<li>Contact</li>
<li>About</li>
<li class="last">Logout</li>
</ul>
</div>
</body>
</html>
Related
I Created this page with the help of some tutorial and I edited the code to attach a text box in the center of the page but the text box is mixing with the navigation menu. Some Help Would be appreciated. I have very less knowledge of html and css so please guide me in a simple way. I searched on the google and also got a w3 article but that did not help as I have used it in the css as yu can can see I have used margin-top , bottom , left and right to solve problem but instead it is mixing or overlapping it self with the navigation menu.
body {
background: url('nature.jpg') no-repeat;
background-size: cover;
font-family: Arial;
color: white;
}
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
ul li {
float: left;
width: 200px;
height: 40px;
background-color: black;
opacity: .8;
line-height: 40px;
text-align: center;
font-size: 20px;
margin-right: 2px;
}
ul li a {
text-decoration: none;
color: white;
display: block;
}
ul li a:hover {
background-color: green;
}
ul li ul li {
display: none;
}
ul li:hover ul li {
display: block;
}
div.transbox {
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60);
/* For IE8 and earlier */
margin-top: 200px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
}
div.transbox p {
margin: 5%;
font-weight: bold;
color: #000000;
}
<html>
<link href='style.css' rel='stylesheet'>
<ul>
<li>Home</li>
<li>About
<ul>
<li><a>Our Team</a></li>
<li><a>Camp Sites</a></li>
<li><a>Mission</a></li>
<li><a>Resources</a></li>
</ul>
</li>
<li>Things to do
<ul>
<li><a>Activities</a></li>
<li><a>Parks</a></li>
<li><a>Shops</a></li>
<li><a>Events</a></li>
</ul>
</li>
<li>Contact
<ul>
<li><a>Map</a></li>
<li><a>Directions</a></li>
</ul>
</li>
<li>News</li>
</ul>
<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.</p>
</div>
</div>
</html>
You have to add
.background {
clear: both;
}
This is to clear the float: left that was applied before.
Read more on float
I used another post (positioning an image next to a menu bar with html/css), and it worked well, but now my heading is acting really weird! If you look at the result of the example code in full screen, you'll see some of it is stuck next to my menu bar. May someone please help me? I want my heading to be BELOW my menu bar.
body {
font-family: sans-serif;
}
h1 {
font-family: comic sans ms;
float: top;
}
nav ul {
list-style-type: none;
background-color: blue;
border: 4px solid orange;
border-radius: 500px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid orange;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: orange;
}
nav {
display: inline;
}
div {
float: left;
}
nav {
float: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/example.css"/>
<div>
<img src="images/example.jpg">
</div>
<nav>
<ul>
<li>Home</li>
<li>Example</li>
<li>Random</li>
<li>Blah Blah</li>
<li>Other</li>
<li>Something Else</li>
<li>More</li>
</ul>
</nav>
</head>
<body>
<h1>Example Example Example Example Example Example Example</h1>
</body>
</html>
Your html is invalid, you're not supposed to place those html tags inside the <head>. Anyway, I think your css is way too invasive, setting a float for every div on the page? Definitely too aggressive, I removed some of those unnecessary floats and set the nav to be inline-block
body {
font-family: sans-serif;
}
h1 {
font-family: comic sans ms;
}
nav {
display: inline-block;
}
nav ul {
list-style-type: none;
background-color: blue;
border: 4px solid orange;
border-radius: 500px;
font-family: sans-serif;
font-weight: bold;
padding: 16px;
}
nav ul li {
display: inline;
border-right: 2px solid orange;
padding-right: 8px;
padding-left: 8px;
}
nav ul li:last-child {
border-right: none;
}
nav ul li a {
text-decoration: none;
color: orange;
}
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<link type="text/css" rel="stylesheet" href="css/example.css"/>
</head>
<body>
<div>
<img src="images/example.jpg">
</div>
<nav>
<ul>
<li>Home</li>
<li>Example</li>
<li>Random</li>
<li>Blah Blah</li>
<li>Other</li>
<li>Something Else</li>
<li>More</li>
</ul>
</nav>
<h1>Example Example Example Example Example Example Example</h1>
</body>
</html>
I'm trying to make the following horizontal along the page, instead of vertical. I would like to do this as it is meant to be a header along the top of the site. Thanks.
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Problems with you code:
The <header> element is wrong, should be <head>.
There's no <html> tag.
The </header> is orphaned.
There's no end tags for </body> and </head>.
Just do the two things:
Remove the width for the <ul>.
Add display: inline-block for the <li>.
Code:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #f1f1f1;
}
ul li {
display: inline-block;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
try below css property for li
float: left;
Your code has several errors:
Look at this:
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
/* width: 200px;*/
background-color: #f1f1f1;
}
li {display: inline-block}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
</body>
</html>
You need to put "display:inline-block" for the li.
<style>
ul li{
display:inline-block;
width: 20%; /* put width as per your requirement*/
}
</style>
add with display:inline-block its shows as horizontal and width will be auto its show as log. if you no need the change width into px`
ul {
list-style-type: none;
margin: 0;
padding: 0;
width:auto;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li{display:inline-block;}
/* Change the link color on hover */
li a:hover {
background-color: #555;
color: white;
}
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
I have currently designed a webpage to have a header that follows the user as they scroll down when I did this I used style tags. But now everything I link or try to list gains these attributes and I cant figure out how to stop it.
<!DOCTYPE html>
<html>
<head>
<title>About</title>
<!DOCTYPE html>
<html>
<head>
<title>About</title>
</head>
<body bgcolor="#E6E6FA">
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
}
li {
float: left;
}
a:link, a:visited {
display: inline;
width:550px;
height: auto;
font-weight: bold;
font-size: 25px;
color: #D2291F;
background-color: #30166B;
text-align: center;
padding: 20px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
color: #30166B;
background-color: #D2291F;
}
</style>
</head>
<body>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Awards</li>
</ul>
<br>
<br>
<p>
<br>
My Co-op NBE was created in 1985, since then the company has been helping the Orillia area
with all IT issues both personal and commercial. The team at NBE has won many Awards and specializes in everything IT including:
</body>
</html>
I shortened the html as much as possible to paste it so how would I make this style stuff only apply to the header and not the rewards link in the chat
This is all I want in the header and affected by the style
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Awards</li>
</ul>
Your CSS currently specifies styles for ALL <ul> elements. If you want it to only apply to your nav, you have to be more specific by using a class, like "sticky". So first, add 'class="sticky"' to your <ul> element, like this:
<ul class="sticky">
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
<li>Awards</li>
</ul>
and the css, if you want all of the styles to ONLY apply to your "sticky" nav, should be:
<style>
ul.sticky {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
position: fixed;
}
ul.sticky li {
float: left;
}
ul.sticky li a:link, ul.sticky li a:visited {
display: inline;
width:550px;
height: auto;
font-weight: bold;
font-size: 25px;
color: #D2291F;
background-color: #30166B;
text-align: center;
padding: 20px;
text-decoration: none;
text-transform: uppercase;
}
ul.sticky li a:hover, ul.sticky li a:active {
color: #30166B;
background-color: #D2291F;
}
</style>
I've this site:
[Removed - problem solved]
As you can see, if you look at the navigation bar, buttons don't fill it, thus making it to look ugly.
I want to know if there is a way to calculate the button's width in a manner that no matter how many buttons I'll have, they'll always fill the entire page's width, thus only allowing a small stripe below them to be seen.
This is the CSS:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
}
li {
float: left;
}
a:link, a:visited {
display: block;
width: 120px;
font-weight: bold;
color: #FFFFFF;
background-color: #359DFF;
text-align: center;
padding:4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover,a:active {
transition-property: background-color;
background-color: #33CCFF;
transition-duration: 1s;
}
.navbg {
background-color: #33CCFF;
position: absolute;
top: 70px;
width: 100%;
height: 32px;
z-index: -1;
}
Just change the li width
li {
width: 20%;
float: left;
}
The solution of this problem is in your HTML, you have to put your in your navigation bar.
for the moment you have:
<header>
<h2>Liceul Teoretic Dunarea</h2>
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</header>
<div class="navbg">
te
</div>
It should be like that:
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
Change your code like the following:
<!DOCTYPE html>
<!-- WEBSITE DE DUMITROV CRISTIAN -->
<head>
<title>Liceul Teoretic Dunarea</title>
<link rel="stylesheet" type="text/css" href="css/stil.css">
</head>
<body>
<header>
<h2>Liceul Teoretic Dunarea</h2>
</header>
<div class="navbg">
<ul>
<li>Acasa</li>
<li>Proiecte</li>
<li>Management</li>
<li>Profesori</li>
<li>Contact</li>
</ul>
</div>
<footer>
<div class="footertxt">
<p><em>(C) Liceul Teoretic Dunarea<br>2013 [MMXIII]</em></p>
</div>
</footer>
</body>
Also add the following CSS:
.navbg ul{width:100%;margin:0 auto;}
.navbg {
display: block !important;
height: auto !important;
overflow: visible !important;
padding-bottom: 0;
}
.navbg ul > li {
display: table-cell;
width: 1%;
float: none;
position: relative;
}
.navbg ul > li > a {
background-color: #E5E5E5;
color: #777777;
font-weight: bold;
margin-bottom: 0;
padding-bottom: 15px;
padding-top: 15px;
text-align: center;
display: block;
padding: 10px 15px;
position: relative;
}