I'm trying to make a nav bar with a header and then 2 links on each side.
But when it test it on a local host it seems to make it like this when i want to it be all horizontal.
LINK LINK
TITLE(h1)
LINK LINK
Html:
<body>
<div id="navigation">
Index
Home
<h1>Home</h1>
Home
James
</div>
</body>
css:
#navigation
{
position: fixed;
top: 0;
left:0;
right:0;
width: 100%;
color: #ffffff;
height: 120px;
text-align: center;
padding-top: 15px;
-webkit-box-shadow: 0px 0px 8px 0px #000000;
-moz-box-shadow: 0px 0px 8px 0px #000000;
box-shadow: 0px 0px 8px 0px #000000;
background-color:#666;}
#navigation a
{
font-size: 18px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
#navigation h1
{
font-size: 25px;
padding-left: 15px;
padding-right: 15px;
color: white;
text-decoration: none;
}
Why does it go like this?
LINK LINK
TITLE
LINK LINK?
Thanks!
Based on the information provided, it seems that your Title "h1" is set to display:block . Change it to display: inline .
Just move the <h1>Home</h1> after <div id="navigation">. Your code should be
<body>
<div id="navigation">
<h1>Home</h1>
Index
Home
Home
James
</div>
</body>
Related
I'm creating a website as i'm trying to learn HTML.
I have created a few very basic websites, so I am no master.
My horizontal(top) navigation bar is underneath my header, however I cant center the tabs for some reason.
How do I get the tabs text to be centered with the nav bar?
<!--Header-->
<header>
<img id="pumpkin" src="pumpkin.gif" alt="Pumpkin">
<h2 id="halloween">The Halloween Store</h2>
<h3 id="goblin">For the little Goblin in all of us!</h3>
</header>
<!--Main Body With Drop Down Navigation-->
<body>
<nav class="topNav">
<ul id="topNav">
<li>Home</li>
<li>Product List</li>
<li>Personal</li>
<li>Decorating Ideas</li>
<li>Join Email</li>
</ul>
</nav>
</body>
CSS
#topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
#topNav li {
display: inline-block;}
#topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
#topNav a:hover {
background-color: lightgray}
#body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;}
In your CSS file you should do like that:
.topNav {
width: 790px;
height: 35px;
font-size: 15px;
text-align: center;
background-color: black;}
.topNav li {
display: inline-block;}
.topNav a {
padding: 10px 30px 10px 30px;
font-weight: bold;
text-decoration: none;
color: White; }
.topNav a:hover {
background-color: lightgray}
body{
width: 800px;
background: white;
border: 5px solid black;
box-shadow: 0px 0px 10px 10px;
margin: auto;
}
also <header> should go inside <body> tag.
If you are trying to center the tabs(li) aligned inside the Nav(ul), Add the FLOAT: LEFT; CSS to "#topNav a" element in your CSS file.
#topNav a{float:left;padding: 9px 30px 9px 30px !important;}
Refer to the below URL.
https://jsfiddle.net/rajeevRF/m1bu4fnr/1/
This question already has answers here:
Remove white space below image [duplicate]
(9 answers)
Image inside div has extra space below the image
(10 answers)
Closed 4 years ago.
I know you guys prefer stackcode, but this is a lot and didn't display properly when I tried that, however, I'll provide the basic context.
Here is the entire thing
And here is the summarized HTML & CSS:
#logoDiv{
}
#jqueryLogo{
height: 60px;
padding: 0;
margin: 0;
}
/*vvv HEADER BELOW vvv*/
#header{
height: 50px;
background-color: #05568D;
border-radius: 10px 10px 0px 0px;
}
#header > ul{
list-style-type: none;
padding: 0px 20px 0px 20px;
margin: 0px;
}
#header > ul > li{
padding: 0px 10px 0px 10px;
color: white;
font-size: 20px;
line-height: 54px;
float: left;
}
<div id="logoDiv">
<img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
</div>
<div id="header" class="container">
<ul>
<li>Download</li>
<li>API Documentation</li>
<li>Blog</li>
<li>Plugins</li>
<li>Browser Support</li>
</ul>
</div>
The issue: There is a 7.5px margin between the logo image and the header. I did not set any margins to cause this, and when I inspect the elements, nothing shows up there... but when I encapsulated the logo img with a div, it now shows the space as equalling that div.
How can I get rid of that margin between the header and logo image?
Add just a display block to your image element as below as #Sol commented to your question
#jqueryLogo {
height: 60px;
display: block;
}
Display: block removes all the spaces from all side of your parent element and adjust it as per the actuall height and width of child element.
It is because the image's display style is automatically set to inline
if you set the style on it to be the following, then it will remove that gap.
#jqueryLogo {
display: flex;
height: 60px;
padding: 0;
margin: 0;
}
I'm not exactly sure why the inline property adds that gap, but this should remove it.
https://jsfiddle.net/bg8oad8d/
Here's a fixed issue
body{
background: #0769AD;
margin: 0;
padding: 0;
font-family: 'Teko', sans-serif;
}
.container{
width: 96%;
margin: 0 auto;
}
/*vvv TOPBAR vvv*/
#topbar{
height: 30px;
width: 100%;
background: linear-gradient(#494949, #272727);
}
#leftTopbar{
float: left;
}
#rightTopbar{
float: right;
}
#rightTopbar > ul{
list-style-type: none;
display: inline-block;
font-family: 'Helvetica', sans-serif;
margin: 0;
}
#rightTopbar > ul > li{
color: white;
float: left;
padding: 0px 12px 0px 12px;
height: 30px;
line-height: 30px;
border-left: 1px solid black;
font-size: 14px;
}
#rightTopbar > ul > li:hover{
background-color: #242424;
}
/*vvv LOGO IMAGE vvv*/
#jqueryLogo{
height: 60px;
padding: 0;
margin: 0;
display:table;
}
/*vvv HEADER BELOW vvv*/
#header{
height: 50px;
background-color: #05568D;
border-radius: 10px 10px 0px 0px;
}
#header > ul{
list-style-type: none;
padding: 0px 20px 0px 20px;
margin: 0px;
}
#header > ul > li{
padding: 0px 10px 0px 10px;
color: white;
font-size: 20px;
line-height: 54px;
float: left;
}
#hero{
background-color: white;
border-radius: 0px 0px 10px 10px;
}
#hero-container{
margin: 25px 100px 0px 100px;
background-color: red;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="demonstration.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Teko" rel="stylesheet">
<title>Demo</title>
</head>
<body>
<div id="topbar">
<div id="leftTopbar">
</div>
<div id="rightTopbar">
<ul>
<li>Plugins</li>
<li>Contribute</li>
<li>Events</li>
<li>Support</li>
<li>JS Foundation</li>
<li></li>
</ul>
</div>
</div>
<div id="logoDiv">
<img id="jqueryLogo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/81/JQuery_logo_text.svg/2000px-JQuery_logo_text.svg.png" alt="" >
</div>
<div id="header" class="container">
<ul>
<li>Download</li>
<li>API Documentation</li>
<li>Blog</li>
<li>Plugins</li>
<li>Browser Support</li>
</ul>
</div>
<div id="hero" class="container">
<div id="hero-container">
<p>This is a lot of text</p>
<p>This is a lot of text</p>
<p>This is a lot of text</p>
<p>This is a lot of text</p>
</div>
</div>
</body>
</html>
Whatever I do I can't get the navigation to center.
I have a wrapper and the navigation bar has an underline across this div. The top of the buttons are rounded of so it just looks like they are coming out of the bottom border.
I've tried searching for a good way to center them. A lot of people use margin auto or margin 0 auto. Other people also use this in combination with display inline-block but then the border gets cut off from the nav buttons.
This is my HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>About me</li>
<li>Portfolio</li>
<li>CV</li>
<li>Contact</li>
</ul>
</div>
The CSS:
#nav {
margin: auto;
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
}
#nav ul {
margin: auto;
padding-top: 6px;
padding-bottom: 8px;
padding-left: 5px;
list-style:none;
}
#nav li {
display: inline;
width: 120px;
margin:0;
padding: 10px 5px;
border-radius: 10px 10px 0px 0px / 10px 10px 0px 0px;
background : -webkit-gradient(linear, left top, left bottom, from(rgb(100,100,100)), to(rgb(132,132,132)));
background : -moz-linear-gradient(top, rgb(200,200,200), rgb(232,232,232));
}
#nav li:last-child {
border-right: none;
}
#nav a {
text-decoration: none;
color: #383838;
font-weight: bold;
font-size: 20px;
padding-right: 10px;
padding-left: 5px;
}
For the ease for you i've also put it in a js fiddle http://jsfiddle.net/ge702rna/
Really hope someone can help me out because i've got my hands tied up in my hair right now.
Probally i'm just doing something simple wrong.
Simply add text-align:center;
#nav {
color: #FFFFFF;
width: 100%;
border-bottom: 1px solid #000000;
text-align:center; /* <-- ADD THIS LINE */
}
I just change the width in
#nav {
margin: auto;
color: #FFFFFF;
width: 77%; //changed
border-bottom: 1px solid #000000;
}
Are you looking for this..DEMO
I've been having issues with adding CSS to a UL and still having the bullet points showing up.
this is my html code
<div id="menu">
<ul>
<li> تماس با ما</li>
<li>درباره ما</li>
<li> آرشیو ویدئو</li>
<li>آرشیو سرودها و منابع پرستشی</li>
<li>خانه</li>
</ul>
</div>
and this is my CSS
<style>
#menu {
width: 780px;
height: 40px;
font-size: 13px;
font-family: Tahoma, Geneva, sans-serif;
font-weight: bold;
text-align: center;
text-shadow: 3px 2px 3px #333333;
background-image: url("images/Menu_Background.jpg");
border-radius: 9px;
}
#menu li {
list-style:none;
list-style-type:none;
display: inline;
padding: 20px;
}
#menu ul {
height: auto;
padding: 8px 0px;
margin: 0px;
}
#menu a {
text-decoration: none;
color: #fff;
padding: 8px 8px 8px 8px;
}
#menu a:hover {
color: #F90;
background-color: none;
}
</style>
I've read many other forums and questions that were asked on Stackoverflow and the solution was to add the `list-style-type=none; but when I added that I am still having the same issue.
here is my URL to the site http://khaneyeparastesh.com/indexHomeNew.htm
list-style-type is not your issue. When you enter the code you've provided on a JS Fiddle there are no bullets. I believe that you are referring to the red "bullet" points that are showing on your website. These are a result of this style:
li a {background: url(images/bull.gif) 0 7px no-repeat;}
Remove that and the red bullets will be gone.
I want to center (automatically) the navbar on this site. Also, I need to have a 1px border-top and 1px border-bottom that extends roughly 70% of the nav area.
It should look like this mockup once it's done:
Remove the floats on your li tags, and on your #navigation, add text-align: center;. Your floats are making your parent have a height of 0, which will in turn not allow you to have your borders. This fixes both those issues. From there, just add border-top: 1px solid white; border-bottom: 1px solid white; to your ul to get your lines.
Take a look at this fiddle http://jsfiddle.net/qZTAt/
The key there is this piece of code:
nav {
border-top: 1px solid #fff;
border-bottom: 1px solid #fff;
margin: 0 15%;
text-align: center;
}
Try using margin:0 auto; padding:0;
Right I'm going to come in late to this party (with an already answered question!) just to add what I would have done. It's based on this technique here
http://jsfiddle.net/rabmcnab/GSSQx/
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<style> body {
font-family: 'Poiret One', cursive;
font-weight: bold;
font-size: 20px;
}
.font {
font-family: 'Poiret One', cursive;
}
header {
background-color: aqua;
padding: 40px 0px;
}
ul {
list-style-type: none;
}
li {
display: inline-block;
padding: 0 40px;
margin: 0 auto;
text-align: center;
}
nav {
border-top: thin solid white;
border-bottom: thin solid white;
width: 50%;
margin: 0 auto;
}
h1 {
text-align: center;
margin-top: -10px;
color: white;
font: 40px/0 arial;
padding: 40px 0;
}
li:hover {
color: #fff;
cursor: pointer;
}
</style>
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<body>
<header>
<h1 class="font"> Heading</h1>
<nav>
<ul>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>
</header>
</body>
</html>
<li>Wedding</li>
<li>Engagement</li>
<li>Services</li>
</ul>
</nav>