i want to create menu bar and its contents as below but the contents are appearing on below the other :
HTML:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Login</title>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<div class="menuheader"> Facebook, Twitter, Youtube </div>
<div class="menu">
<ul> Home </ul>
<ul> About Us
<li> Establishment </li>
</ul>
<ul> Careers
<li> Current Openings </li>
<li> Working with us </li>
<li> Work Culture </li>
</ul>
<ul> Contact Us </ul>
</div>
CSS:
.menu{
background-color:#999999;
color:#FFFFFF;
width:940px;
height:50px;
margin:20px;
padding:20px;
font-size:12px;
float:left;
}
The float:left is working, however, your padding of 20px to the right is causing the problem. I made a fiddle for you, http://jsfiddle.net/tsJ7r/1/
Change:
padding:20px;
to:
padding:0px;
and it should work
If you want the padding to be there on all sides except the left, you can use
padding-top:20px;
padding-bottom:20px;
Your unordered list markup is not correct. Try something like this:
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>Careers
<ul>
<li>Current Openings</li>
<li>Working With Us</li>
<li>Working Culture</li>
</ul>
</li>
<li>Contact Us</li>
</ul>
Then your CSS would look like this:
ul.menu {
float: left;
}
ul.menu li {
float: left;
padding: 20px;
// etc.
}
Related
I have read through my small code and want the dots removed from my nav-bar. I have already explored other similar questions on stack over flow and tried their answer. But the outcome that I have seen is that is still not removing the dots but when I type in the code in code.io it removes it for me: https://codepen.io/abhirajsb/pen/xxVLrpW.
My HTML code in my code editor(VS-CODE):
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
My CSS code:
li {
list-style-type: none;
padding: 0%;
margin: 0%;
}
The output on my extension live is always showing the dots:
Try This in the header replace styles.css with ur css:
<head>
<link rel="stylesheet" href="styles.css">
</head>
You just try list-style: none instead of list-style-type: none;
li {
list-style: none;
padding: 0%;
margin: 0%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multi-Vitamins</title>
</head>
<body>
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
</body>
</html>
Could you please show us your CSS code? if this is all you have. Could you please try to do a hard reset. by clicking Ctrl + shift + R in your browser and check again with our answers.
Or try to run it on your local device. I don't see ay problem with your code as it run without any problem. anyway I tried it with list-style: none; and it worked
ul {
list-style: none;
}
that would solve your problem. if that doesn't work please let me know.
ul {
list-style: none;
}
<header id="header">
<img src="image/LOGO.jpg" alt="Multi-Vitamins" id="header-img" />
<nav id="nav-bar">
<ul>
<li>About</li>
<li>How it works</li>
<li>Pricing</li>
</ul>
</nav>
</header>
I simply forgot to reference CSS style sheet to my HTML sheet.
solved it.
I'm trying to get my ul section to display my code on the same line yet it still presents it in a vertical list. I'm new to this and so can't figure out why it won't go on the same line. I've tried display:inline-block; and float:left; but that hasn't worked.
HTML:
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
CSS:
body nav ul li {
display: inline-block;
}
You have it right. Check that the css file is named correctly and that main2.css is in the same directory as your html file.
works as expected when put into a snippet - see below. Check the filepath for the stylesheet and typos...
body nav ul li{
display:inline-block;
}
<!doctype html>
<html>
<head>
<title>practice.co.uk</title>
<link href="main2.css" rel="stylesheet">
</head>
<body>
<h1>My Webpage</h1>
<nav>
<ul>
<li>Home</li>
<li>Page 2</li>
</ul>
</nav>
<h2>Page 2</h2>
<p>All the content of Page 2</p>
</body>
</html>
I was a lot of time busy, with learning HTML, and i decided to make wamp server. Everything whent OK and i started to code the HTML. But when i started to code te CSS the selector will not show in the webpage on my local domain(rolfweb.net:8080). But in localhost it shows all CSS correctly!
Code:
<DOCTYPE html>
<html>
<head>
<title> RolfWeb </title>
</head>
<body>
<link type="text/css" rel="stylesheet" href="/css/indexss.css"/>
<nav>
<ul>
<li> Home </li>
<li> Video's </li>
<li> Games </li>
<li> Contact en informatie </li>
<li> Over mij </li>
</ul>
</nav>
<p> Test </p>
<footer>
</footer>
</body>
</html>
And the CSS:
p {
color: blue;
}
/* This is not working! */
nav ul {
list-style-type: none;
background-color: #3f875f;
border: 3px solid #3a756c;
text-align: center;
}
So it shows good on localhost but on rolfweb.net:8080 not.
PS: Sorry for my bad english i'm dutch :P
Move your css link within the head tags:-
<DOCTYPE html>
<html>
<head>
<title> RolfWeb </title>
<link type="text/css" rel="stylesheet" href="/css/indexss.css"/>
</head>
<body>
<nav>
<ul>
<li> Home </li>
<li> Video's </li>
<li> Games </li>
<li> Contact en informatie </li>
<li> Over mij </li>
</ul>
</nav>
<p> Test </p>
<footer>
</footer>
I have created a navigation menu that I have been inserting into my pages using the "object" tag. Whenever I click a link on the navigation menu, it takes me to the correct page but it is inside the object tag. The rest of the page remains the same including the original address in the address bar. I cannot seem to find anyone else having the same issue as I am.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link rel="stylesheet" href="/css/body.css" />
<body>
<object id="navigation" type="text/html" data="/includes/inc.nav.php"></object>
<div id='page'>
<div id='pageTitle'>Knowledge Base</div>
<p>Here is the body</p>
</div>
</body>
</html>
inc.nav.php
<link rel="stylesheet" href="/css/navbar.css" />
<ul id="menu">
<li>Tickets
<ul>
<li>BLAH</li>
<li>Haha</li>
<li>Woohoo</li>
</ul>
</li>
<li>Equipment
<ul>
<li>Trucks</li>
</ul>
</li>
<li>Reports
<ul>
<li>Reports</li>
<li>User List</li>
</ul>
</li>
<li>Knowledge Base</li>
<li>Logout</li>
</ul>
I'm sure I am missing something simple. Any help would be appreciated.
Found information on the answer here
Links should look like this:
<li><a target="_parent" href="/vision/tickets.php">BLAH</a></li>
Nothing shows up when I try to put a background image in a div via CSS. I've tried adding properties like position, width, height. And, I am also able to place the photo via CSS in the <body> tag. But, obviously, I'd like to not have to leave it there. Here's my html:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div id="photo">
</div>
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</body>
</html>
Here's my CSS:
#photo{
background-image: url('../images/bandbanner.png')
}
<div id="photo">
</div>
in your dive you haven't set the size. for example:
#photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
The div photo contains nothing, try adding
#photo{
background-image: url('../images/bandbanner.png');
width: 100%
padding : 100px;
//hopefully this will make the photo appear and you can go from there
}
Set height & width property of #photo.
See working example: http://jsfiddle.net/ihkawiss/2n0o9t9x/
The HTML:
<!DOCTYPE html/>
<html>
<head>
<link type="text/css" rel="stylesheet" href="main.css"/>
<title>
Lovers & Fighters
</title>
</head>
<body>
<div class="photo">
<nav>
<ul id="main">
<li>Menu</li>
<li>About</li>
<li>Music</li>
<li>Videos</li>
<li>Photos</li>
<li>Contact</li>
</ul>
</nav>
<ul id="social">
<li>
<img/>
</li>
<li>
<img/>
</li>
</ul>
</div>
</body>
</html>
And the CSS:
.photo{
background-image: url('../images/bandbanner.png');
width:100px;
height:100px;
}
set your height and width
width: px;
height: px;