I am using the following codes to create a layout, the issue is, the navigation menu won't center, the text centers, but the rest of the navigation bar doesn't.
Here is my HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div id="container">
<h1>Test</h1>
<ul id="navigation">
<li>Home</li>
<li>About</li>
<li>Projects</li>
<li>Contact</li>
</ul>
<div id="content">
</div>
<div id="footer">
<p>Test</p>
</div>
</div>
</body>
</html>
And here is my CSS:
/***** Body *****/
body {
font-family: arial, helvetica;
text-align:center;
}
div#container {
}
/***** Navigation Menu *****/
ul#navigation {
margin: 20px;
padding: 0;
list-style: none;
width: 525px;
}
ul#navigation li {
display: inline;
}
ul#navigation a {
text-decoration:none;
padding: 5px 0;
width: 100px;
background: #485e49;
color: #eee;
float: left;
text-align:center;
}
ul#navigation a:hover {
background: #FF00FF;
text-align:left;
}
ul#navigation a:active {
text-align:right;
}
Change your ul#navigation to
ul#navigation {
padding: 0;
list-style: none;
width:400px;
margin:0 auto;
}
Example: http://jsfiddle.net/jasongennaro/3WS7B/
What happened is your width was off. Once that was fixed to 400px, applying margin:0 auto worked.
You can add this to the ul#navigation css to center it:
margin:0 auto 0 auto;
Alternatively:
margin-left:auto;
margin-right:auto;
Related
I am experimenting with following HTML code. It displays a paragraph and two buttons at the bottom (Back and Next).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Test</title>
<!-- stylesheet -->
<style type="text/css" media="screen">
<!-- for UL. Hopefully straightforward to understand-->
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
<!-- to float left.Hopefully straightforward to understand -->
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
<!-- to float right. Hopefully straightforward to understand -->
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
<!-- for a in li. Hopefully straightforward to understand -->
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:centre; <!-- this isn't effective!-->
text-decoration:none;
}
</style>
</head>
<!-- mainbody-->
I want the text in to be centrally aligned but it doesn't. I have used text-align:centre to set style of . What am I doing wrong?
<body>
<p>
1. Some Para.
</p>
<ul id="navigation" >
<!-- The Back and Next should centre up but they are left aligned -->
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
</body>
</html>
You need to use text-align: center, rather than 'centre'.
ul#navigation li a {
display: block;
padding: .2 em;
color: #fff;
width: 5em;
background-color:#00f;
text-align: center;
text-decoration: none;
}
centre;<-- wrong word... it's center
#navigation {
list-style-type:none;
border-top:1px solid red;
margin:0;
padding:0;
}
ul#navigation .left{
float:left;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float:right;
width:5em;
margin: 10px 0 0 0;
}
ul#navigation li a {
display:block;
padding:.2 em;
color:#fff;
width:5em;
background-color:#00f;
text-align:center;/*centre;<-- wrong word... it's center */
text-decoration:none;
}
<p>
1. Some Para.
</p>
<ul id="navigation" >
<li class="left"> Back</li>
<li class="right"> Next</li>
</ul>
#navigation {
list-style-type: none;
border-top: 1px solid red;
margin: 0;
padding: 0;
}
ul#navigation .left {
float: left;
width: 5em;
margin: 10px 0 0 0;
}
ul#navigation .right {
float: right;
width: 5em;
margin: 10px 0 0 0;
}
#navigation ul li {
color: #fff;
width: 100%;
background-color: #00f;
text-align: center;
text-decoration: none;
}
<p>1. Some Para.</p>
<ul id="navigation">
<li class="left"> Back
</li>
<li class="right"> Next
</li>
</ul>
body {
background: gray;
height:100%;
width:100%;
margin:0;
}
header {
background:black;
height:auto;
width:100%;
float:left;
}
header nav {
width:100%;
height:auto;
}
header nav ul{
list-style:none;
height:auto;
width:40%;
float:right;
}
header nav ul li:hover{
background-color:lime;
border-radius:5px;
}
header nav ul li{
color:white;
float:left;
margin-left:5%;
padding:10px 15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link href="header.css" type="text/css" rel="stylesheet">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</body>
</html>
i want to make my hover effect background look like the same in picture
i tried editing my code , but it just highlights the text area but not the height of full header. the image posted has also been coded by me , but unable to find the error.
The <ul> tag has a default margin, you can override this in the CSS with margin: 0. This will make the li:hover the full height of the <ul>.
header nav ul{
list-style:none;
height:auto;
width:70%;
float:right;
margin: 0;
}
The default margin is 16px, if you want to preserve the look, add this to the <li> padding: padding:26px 15px;.
https://jsfiddle.net/pjpwea/cn12hjwt/1/
A small change in ul and li
header nav ul {
list-style: none;
height: auto;
width: 40%;
float: right;
margin: 0; // added
}
header nav ul li {
color: white;
float: left;
margin-left: 5%;
padding: 16px 15px; //added
}
Please find code snippet
body {
background: gray;
height:100%;
width:100%;
margin:0;
}
header {
background:black;
height:auto;
width:100%;
float:left;
}
header nav {
width:100%;
height:auto;
}
header nav ul{
list-style:none;
height:auto;
width:40%;
float:right;
margin: 0;
}
header nav ul li:hover{
background-color:lime;
border-radius:5px;
}
header nav ul li{
color:white;
float:left;
margin-left:5%;
padding:26px 15px;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="sample.css">
</head>
<body>
<header>
<nav>
<ul>
<li>Home</li>
<li>Portfolio</li>
<li>Blog</li>
<li>Contact Us</li>
</ul>
</nav>
</header>
</body>
</html>
Here is your working fiddle:
https://jsfiddle.net/sesn/jnpvxu9r/1/
header nav ul{
margin: 0px; margin-left: 20px; padding: 0px;
list-style:none;
height:auto;
}
header nav ul li:hover{
background-color:lime;
}
header nav ul li{
color:white;
float:left;
padding:10px 15px;
border-radius: 0px;
}
I just started learning HTML and decided I wanted to try to build a simple blog. I decided I wanted a navigation bar with links to other HTML files. I thought I had done this perfectly until I ran it and discovered that only the "Home" link works (which is the HTML file that I had put the href tags in) the other 4 links showed up as links but weren't clickable. All the files are located in the same folder.
<head>
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet" />
<div id="header">
<h1 align="center" style="margin-top: -155px"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</head>
#header {
background-color: #888888;
height:380px;
margin:0px;
padding:0px;
}
body {
background-color: #C0C0C0;
margin:0px;
padding:0px;
}
#main {
overflow: auto;
}
#content {
float:left;
}
#side {
float:left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type:none;
height:30px;
padding:0px;
margin:0px;
}
#nav ul li {
float:left;
margin:10px;
width:246px;
text-align:center;
font-family:"Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
As said you need to place your <header>, and <content> in the <body> tags.
This should help you out:
<html lang="en">
<head>
<meta charset="utf-8">
<title>Music Project</title>
<link href="MusicProject.css" rel="stylesheet">
<style>
#header {
background-color: #888888;
height: 380px;
margin: 0px;
padding: 0px;
}
body {
background-color: #C0C0C0;
margin: 0px;
padding: 0px;
}
#main {
overflow: auto;
}
#content {
float: left;
}
#side {
float: left;
}
#nav {
height: 42px;
background-color: #888888;
}
#nav ul {
list-style-type: none;
height: 30px;
padding: 0px;
margin: 0px;
}
#nav ul li {
float: left;
margin: 10px;
width: 246px;
text-align: center;
font-family: "Arial";
font-size: 23px;
color: #00004B;
}
#nav ul li a {
display: inline;
width: 246px;
}
</style>
</head>
<body>
<header>
<div id="header">
<h1 style="margin-top: -155px; text-align:center;"><img src="logo.png" alt="logo" id="logo" height="500" width="700" /></h1>
</div>
<div id="nav">
<ul>
<li>Home</li>
<li>Artists</li>
<li>Mixtapes/Albums</li>
<li>Suggestions</li>
<li>About</li>
</ul>
</div>
</header>
<content>
<!-- Page content here -->
</content>
</body>
</html>
Fiddle
Here is a link to help you learn the basics. Link
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="index.css"/>
</head>
<style>
body,html,aside,article,header,nav,footer,ul,section,div,li,ul{
padding:0;
margin:0;
}
aside,article,header,nav,footer,section,div,ul {
display:block;
margin:0;
padding:0;
}
html {
background:#F1C4F2;
}
body {
width:1000px;
background:#FF53A9;
margin: 0 auto;
font-size:12px;
}
#header{
width:98%;
background-color:#F081F3;
padding:1%;
color:white;
font-size:1.2em;
}
#nav {
width:98%;
background-color:#C043AA;
font-size:1.1em;
padding:1%;
}
ul{
margin:0 auto;
width:100%
}
li {
list-style:none;
float:left;
margin-right:8%;
color:white;
}
OR
/*
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
*/
</style>
<body>
<div id="header">
some.com
</div><!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div><!--NAVIGATION-->
<div id="footer"> </div> <!--FOOTER-->
</body>
</html>
I have 'UL' tag inside a 'NAV' <DIV>,for my navigation i have created a 'LI' items and floated it and when i apply ""margin:0 auto"" it doesn't apply.
Even when I use ""display:inline-block""(this section is commented out) to 'LI'.Js
Fiddle link: jsfiddle
Try to add text-align:center for your <ul> and remove float:left from <li> and use display:inline-block; Demo
ul {
margin:0 auto;
width:100%;
text-align:center;
}
li {
list-style:none;
display:inline-block;
margin-right:8%;
color:white;
}
This will center your ul and i've also added overflow:hidden so that the floats are contained (the li).
ul {
margin: 0 auto;
width: 50%;
overflow: hidden;
}
You were applying margin:0px auto to a 100% width element which wont work.
The result: fixed
Firstly, the ul is centered but it's 100% wide so I am assuming that, in fact. you want the list items centered in the ul.
So, remove any floats, set text-align:center on the ul and make the li display as inline-block
* {
padding: 0;
margin: 0;
}
html {
background: #F1C4F2;
}
body {
width: 1000px;
background: #FF53A9;
margin: 0 auto;
font-size: 12px;
}
#header {
width: 98%;
background-color: #F081F3;
padding: 1%;
color: white;
font-size: 1.2em;
}
#nav {
width: 98%;
background-color: #C043AA;
font-size: 1.1em;
padding: 1%;
text-align: center;
}
ul {
background: blue;
}
li {
list-style: none;
display: inline-block;
color: white;
margin: 0 2%;
}
<body>
<div id="header">
some.com
</div>
<!--HEADER-->
<div id="nav">
<ul>
<li>Home</li>
<li>Bio</li>
<li>Gallery</li>
<li>Upcoming Projects</li>
<li>Videos</li>
</ul>
</div>
<!--NAVIGATION-->
<div id="footer"></div>
<!--FOOTER-->
See the below images:
the website as viewed in chrome
http://i48.tinypic.com/2rr9zf7.png
the website as viewed in dreamweaver:
http://i50.tinypic.com/mcvey9.png
The problem is the carousel doesnt line up with the navbar at the top (see top right).
it seems to be out of line by 1mm
I believe it may have to do something with the navbar (see second image). As you can see the contact button falls below the rest of the buttons.
my theory is that its causing the carousel to be out of alignment.
HTML:
<!DOCTYPE HTML>
<html>
<head>
<link href="../CSS/styles.css" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=PT+Sans+Caption' rel='stylesheet' type='text/css'>
</head>
<body>
<div id="outer">
<img src="../Images/webimages/banner top.jpg" />
</div>
<div id="topnav">
<ul id="list-nav">
<li>Home</li>
<li>About Us</li>
<li>Services</li>
<li>Technologies</li>
<li>Contact</li>
</ul>
</div>
<div id="carousel">
<iframe src="../Carousel/HTML/carousel.html" height="280" width="900" scrolling="no" frameborder="0"> </iframe>
</div>
<div id="mainbody">
<div id="bigbuttons">
<img src="../Images/webimages/Meettheteam.jpg">
</div>
</div>
</div>
</body>
</html>
CSS:
/* Reset */
a img {
border: none;
}
html, body {
padding:0;
margin:0;
}
a {
text-decoration: none;
}
ul, li {
list-style-type: none;
}
img.floatLeft {
float: left;
margin: 0px;
}
*
{
margin: 0;
padding: 0;
}
body {background-color:#F1F1F1; }
#outer { width: 900px; margin: auto; }
#topnav { width: 900px; margin: auto; }
#mainbody { width: 900px; margin:auto; clear:both; }
#list-nav li{display:inline-block;width:20%;float:left;}
#carousel { width: 900px; height: 280px; margin:auto; clear:both; }
#bigbuttons { width: 220px; height: 80px; margin:auto; margin-top: 9px; clear:both; float:left }
ul#list-nav li a {
text-decoration:none;
font-family:Arial, Helvetica, sans-serif;
padding:5px 0;
width: auto;
background:#999;
color:#eee;
float: left
}
ul#list-nav li a {
text-align:center;
border-left: 1px solid #fff;
width: 100%;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
ul#list-nav li a:hover {
background:#CCC;
color:#ffff;
}
#content-fullwidth { width:100%; }
Check the code for the carousel that you are filling the iframe with. Looks like your issue is there, not with the code you have provided us.