body {
width:960px;
font-family: 'Open Sans', sans-serif;
margin:0 auto;
padding:0 auto;
}
ul {
height:60px;
width:100%;
margin: 0 auto;
border: 1px solid white;
}
li {
float:left;
}
ul a {
color:black;
text-decoration:none;
font-size:20px;
display:block;
}
ul li a {
display:block;
padding:20px 70px;
line-height:1.0em;
text-decoration:none;
}
ul a:hover {
color:yellow;
background-color:black;
}
<html>
<head>
<link rel = "stylesheet" type+ "text/css" href = "style.css">
</head> <body background ="background.jpg">
<div id="navigation">
<ul>
<li><a href = '#'>Home</a></li>
<li><a href = '#'>Media Design</a></li>
<li><a href = '#'>Informatie</a></li>
<li><a href = '#'>Contact</a></li>
</ul>
</div>
<center><img src="banner.png" alt="Media Design" height="540" width="960"></center>
</body>
</html>
Hi there, somehow when I run my website code (http://prntscr.com/8qsljg), the menu won't start at the very left. I tried like everything, but still I am stuck for this problem for a couple of hours.
It's a pretty simple thing. You did not remove the <ul> of the menu under the navigation div.
What you need to do is just to include these lines in your CSS
div#navigation ul {
padding-left: 0px;}
Regards
Nabeel
Try resetting the padding in your ul element:
ul {
padding: 0px;
}
Related
I am trying to create a menu as follows. When hover the menu item, it should be animate the height from bottom to top. So I positioned anchor tag absolute and gave bottom 0. When anchor tag is positioned absolute, It does not show menu properly.
css is as follows.
#navigation
{
position:relative;
float:right;
margin-top:55px;
padding-right:45px;
}
#navigation ul
{
text-decoration:none;
list-style:none;
display:inline;
position:relative;
padding:0px;
height:30px;
margin:0px;
}
#navigation ul li
{
position:relative;
float:left;
}
#navigation ul li a
{
position:absolute;
bottom:0px;
padding:10px 5px;
width:79px;
display:block;
text-decoration:none;
background-color:#1c1c1c;
color:rgb(255,255,255);
/*margin:2px;
margin-bottom:0px;*/
text-align:center;
font-family:Tahoma;
/*position:relative;*/
font-size:15px;
}
html is as follows.
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/90up4hz2/
demo - http://jsfiddle.net/victor_007/90up4hz2/1/
the issue is because of position:absolute for the li and position:relative the width becomes 0 try adding fixed with for li
#navigation ul li {
position:relative;
float:left;
height:30px;
width:89px;
}
http://jsfiddle.net/L0r493ag/2/
I created this for you, dont use ul li or just add the follow css to them or to any object
.boxhead
{
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
padding-left:10px;
padding-right:10px;
height:50px;
}
.boxhead:hover
{
color: #7d7d7d;
}
and then
<div id="navigation">
<a class="boxhead" href="index.php">Home</a>
<a class="boxhead" href="about-us.php">About Us</a>
<a class="boxhead" href="products.php">Products</a>
<a class="boxhead" href="contact-us.php">Contact Us</a>
</div>
Some of the links in my nav bar do not function. They seem to get covered up by an iframe element, and do not change color.
The iframe element is visibly below the nav bar, but I used .wrapper1 to reposition the iframe element. When I remove the iframe element, or remove the .wrapper1 object, the problem disappears (the links work).
insight?
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.wrapper1 {position:fixed; left:50%; top:80px;}
iframe {
background: rgba(256,256,256,0);
position:relative;
top:60px;
left:-400px;
}
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
}
li {
background:none;
display:inline;
width:100%;
padding-left:40px;
color:#FFF;
font-size: 16pt;
font-family:'Rammetto One', cursive;
}
a {
text-decoration: none;
color:#FFF;
}
a:hover, a:active {
color:#333;
}
</style>
</head>
<body bgcolor="#000">
<div class="wrapper1">
<ul>
<li>Introduction</li>
<li>Services</li>
<li>Testimonials</li>
<li>Contact Us</li>
</ul>
<div>
<div class="wrapper1">
<iframe name="content_frame" width="800" height="300"></iframe>
</div>
</body>
</html>
Preview (jsFiddle)
Add
z-index: 1;
to "ul" like so:
ul {
width:800px;
position:relative;
left:-50%;
list-style: none;
background: none;
margin:0px;
padding:0px;
z-index: 1;
}
Link to Demo
i've been facing trouble with aligning some content to center of a page... the point is, i was able to achieve it .. but when the browser is resized, the content on the left side is not visible.. i am not sure where i am going wrong.. the code is as follows...
HTML Code ....
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Home</title>
<link href="home.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="container">
<img class="logo" src="logo.jpg" width="160px" height="83px">
<div id="menualign">
<ul>
<li class="topli">Home</li>
<li class="topli">site 1</li>
<li class="topli">Site 2</li>
<li class="topli">Logout</li>
</ul>
</div>
<img src="bgn.jpg" width="900" height="7" id="bar">
</div>
</body>
</html>
CSS Code is as follows
#container
{
width:920px;
height:600px;
position:absolute;
left: 50%;
top: 50%;
margin-left: -460px;
margin-top: -300px;
}
#menualign
{
position:relative;
left:24%;
}
#menualign ul
{
margin: 0;
padding: 0;
list-style-type: none;
text-align: center;
}
#menualign ul li { display: inline; }
#menualign ul li a
{
text-decoration: none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 16px;
padding: .2em 1.41em;
color: #0056A2;
background-color: #fed352;
}
img.logo
{
position:relative;
top:20px;
}
#menualign ul li a:hover
{
color:black;
font-size:17px;
}
You need to position your container with margin:0 auto; and then give float:left to the image and float:right to the menu. Last give menu line-height of the image height to align it verticaly.
#container
{
width:920px;
margin:0 auto;
}
#menualign ul li {
margin-top:10px;
line-height:83px;
float:left;
}
img.logo
{
float:left;
margin-top:10px;
}
Ok i made a little jsFiddle and I hope it will help.jsFiddle
I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot:
I've spent hours on this, but even though I was able to manipulate the links the first time I used them in my code it would seem that the links on my footer won't change no matter what I do...
any advice/hint/solution would be appreciated...
Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>usaelectricalsystemshome</title>
<style type="text/css" media="screen, print, projection">
body{
background: black;
}
#wrap {
width:1000px;
margin:0 auto;
background: blue;
}
#alldivs{
}
#header{
background: blue;
}
#nav{
background: yellow;
padding: 0px;
margin: 0px;
background:blue repeat-x;
width:100%;
float:left;
border: 1px solid #42432d;
border-width:1px 0;
}
#nav li{
display: inline;
padding: 0px;
margin: 0px;
}
#nav a:link,
#nav a:visited {
color:#000;
background:#FFFFF0;
float:center;
width:auto;
border-right:1px solid #42432d;
text-decoration:none;
font:bold 1em/1em Arial, Helvetica, sans-serif;
text-transform:uppercase;
}
#nav a:hover,
#nav a:focus {
color:#fff;
background:blue;
}
#main{
background: white;
float: left;
width: 800px
}
#sidebar{
background: gray;
float: right;
width: 200px;
}
#footer{
background: blue;
clear: both;
}
#footernav a:link{
color:gray;
text-decoration: none;
}
#footernav li{
display: inline;
color: gray;
text-decoration: none;
}
</style>
</head>
<body>
<br>
<div id="alldivs">
<div id ="wrap">
<div id="header"><p>This is the header, put something here!!</br>safsdf</p></div>
<ul id="nav">
<li id="home">HOME</li>
<li id="services">SERVICES</li>
<li id="contact">CONTACT</li>
</ul>
<div id="main"><p>
MAIN CONTENT
</p></div>
<div id="sidebar">sidebar space</div>
<div id="footer">
<p>
this is the footer
</p>
<ul id="footernav">
<li id="footerhome">HOME</li>
<li id="footerservices">SERVICES</li>
<li id="footercontact">CONTACT</li>
</ul>
</div>
</div>
</div>
</body>
</html>
You need:
#footernav a:link, #footernav a:visited {
Remember, links are either :link, or :visited, never both.
Your syntax is off:
a { color:gray } /* Foo */
This will change the link color (affects visited links as well):
a:hover { color:green } /* Foo */
This will change it when hovered.
try #footernav li a:link not #footernav a:link Your traverse through the DOM seems off.
Try adding a:visited { color:#000;} between the style tag.