I am learning to create my first website and I've ran into the first problem that I can't solve. I have a navigation bar in which I want to sit nicely within a wrap but the navigation bar sits beneath it and I can't seem to get it right.
Advice would be great.
http://jsfiddle.net/z4pHZ/2/
HTML
<div class="links_container">
<div class="nav1">
<ul>
<li>Home</li>
<li>About</li>
<li>Challenges</li>
<li>Progress</li>
<li>Forum</li>
</ul>
</div>
CSS
.links_container {
width: 1000px;
height: 35px;
background-color: #33C4AB;
margin-right: auto;
margin-left: auto;
border-bottom-style: double;
border-bottom-width: 2px;
border-color: #000000;
/* [disabled]-webkit-box-sizing: inherit; */
/* [disabled]-moz-box-sizing: inherit; */
/* [disabled]box-sizing: inherit; */
position: absolute;
}
.nav1 {
float: left;
}
.nav1 ul li {
list-style-type: none;
float: left;
display: block;
}
.nav1 ul li a {
color: #FFFFFF;
text-decoration: none;
background-color: #333333;
display: inherit;
height: 35px;
width: 130px;
text-align: center;
line-height: 35px;
border-left: thin solid #CCCCCC;
}
.noBorder {
border-left-style: none !important;
}
.nav1 ul li a:hover {
background-color: #6B6B6B;
height: 35px;
}
.leftedge {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
}
.rightedge {
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
Try using
*{
margin:0;
}
and/or
.nav1 ul {
display: inline;
}
The first code will remove the default browser margin from the webpage, and the second code will display .nav1 ul as an inline element
Also, it's a good idea to think about removing .nav1{float:left;} since it doesn't affect anything, and change the .links_container width to 100% instead of 1000px.
Demo
You can use display: inline for your ul
.nav1 ul {
display: inline;
}
Updated Fiddle
Related
Okay, its a bootstrap menu with a little bit customized that has a skewed menu you noticed that when I inspect element it, the first menu on the left is overflowed on the width of the container and last menu does not meet on the end of the container, what is the best solution to align it in both sides? Thanks
.nav-tabs {
border: 0;
margin-top: 10px;
margin-bottom: 10px;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
background: transparent;
border-radius: 0;
font-family: 'Klavika Bd';
text-decoration: none;
font-size: 28px;
border: 0;
}
.nav-tabs>li>a {
margin: 0;
border-radius: 0;
font-family: 'Klavika Bd';
text-decoration: none;
font-size: 28px;
color: #fff;
border:0;
text-align: center;
display: inline-block;
width: 100%;
height: 80px;
position: relative;
line-height: 58px;
}
.nav-tabs > li {
width: 32.1%;
margin-right: 1.2%;
}
.nav-tabs > li > a:before {
content: '';
width: 100%;
height: 100%;
background: #ff4600;
transform: skew(-10deg);
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.nav-tabs > li > a:hover:before {
background: #ff6c34;
}
.nav-tabs > li.active > a:before {
background: #d1d2d4;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: transparent;
}
.nav-tabs>li {
float: left;
margin-bottom: -1px;
list-style-type:none;
}
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">1. PICK YOUR TOP 10</li>
<li role="presentation">2. REVIEW</li>
<li role="presentation">3. SUBMIT & SHARE</li>
</ul>
The main culprit of why the left side is padded different then the right is your li rule:
.nav-tabs > li {
width: 32.1%;
margin-right: 1.2%;
}
With this rule, the first one has no margin on the left and all others have margin on both sides. The easiest way to get this aligned evenly is to change it to:
.nav-tabs > li {
width: 32.1%;
margin-right: .6%;
margin-left: .6%;
}
Alternatively you could apply a rule specifically to either the first or last li using li:first-child or li:last-child to adjust as needed.
The best way would be to add a bit of margin-left to .nav-tabs>li:
.nav-tabs>li {
margin-left: 5px;
}
How much margin you add depends on how much offset you need.
Hope this helps :)
New to html and css, I have checked other questions here and googled it but I am not finding an answer.
I am working on the nav bar and have this annoying space I can not figure out how to get rid of.
I made the background of the nav element blue so you can see what I am referring to and here is a screenshot:
http://imgur.com/v18HTjH
The HTML is:
<div class="topnavbar">
<ul class="nav">
<li class="nav-element">Home</li>
<li class="nav-element">Blog</li>
<li class="nav-element">About Me</li>
<li class="nav-element">Services</li>
<li class="nav-element">testimonials</li>
<li class="nav-element">Contact</li>
</ul>
</div>
The CSS:
.topnavbar{
background-color: blue;
border-top: 5px solid black;
border-bottom: 5px solid black;
position: relative;
margin-left: auto;
margin-right: auto;
width:90%;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
border-top-right-radius:30px;
border-bottom-right-radius:30px;
}
body {
top:1px;
background-color: black;
}
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
}
li {
float: left;
border-radius: 5px;
}
a:link, a:visited {
display: inline-block;
width: 150px;
font-weight: bold;
color: #000000;
background-color: #ffffff;
text-align: center;
padding: 4px;
text-decoration: none;
text-transform: uppercase;
}
a:hover, a:active {
background-color: #FA0000;
}
This solution doesnt necessarily take away the space, but it centers the links within the navbar.
http://jsfiddle.net/swm53ran/261/
ul {
list-style-type: none;
padding: 0;
margin:0;
border-radius: 5px;
overflow: hidden;
text-align: center; /* added */
}
li {
/* float: left; */ /* commented out */
display: inline-block; /* added */
border-radius: 5px;
}
hope this helps
remove width attribute .topnavBar in CSS file and check it.
Add width:150px; to the li class,
and change width of .topnavbar to 67%;
Actually you are giving width 90% to .topnavbar but your content of all li's is just 67%.
I have a hover drop down menu on my website. It displays ok until you hover over. The submenu appears but before you can click on a link, the sub menu vanishes.
Here is the HTML -
<div id="top-nav"><div id="nav">
<nav>
<ul id="menu" style="list-style-type: none;">
<li id="sub">Artists
<ul>
<li>Banks</li>
<li>Lil Silva</li>
<li>Frances and the Lights</li>
<li>Jim-E Stack</li>
</ul>
</li>
<li>Night</li>
<li>Info</li>
</ul>
</nav>
</div>
</div>
And here is the CSS -
#nav {
text-align:center;
list-style: none;
}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;
}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;
}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;
}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;
}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}
What am I doing wrong? Any help is greatly appreciated!
the problem is the following line of your CSS code:
li#sub ul {
...
margin-top: 4px;
...
}
Just remove this margin-top and your drop down menu will work properly.
In your example there is a 4px margin space between the "Artists"-link and the drop down menu below. And if your cursors leaves the link and enters this "margin area", the browser interprets it as un-hovering the link - and hides the drop down.
Like dalucks said, remove the top margin from your CSS:
li#sub ul {
margin-top:0;
}
Also, reduce the left margin/paddings from the submenu UL and/or LI children. With the original large values (35px) the menu could be hovered over a lot of invisible space.
ul#menu li ul li a {
padding-left:5px;
}
Fiddle: http://jsfiddle.net/LXwTr/
Add Padding: 0 to this
li#sub ul {
padding: 0;
}
http://jsfiddle.net/tdQmE/
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right
the text within the li is a link, where as the entire li item including the text should work as a link. How can I get it so that the entire li item operates as link as opposed to just the text within the li?
CSS:
#navbar {
width: 900px;
height: 50px;
background-image: url(http://iforce.co.nz/i/chiislxt.mp4.png);
}
#navbar ul {
list-style-type:none;
margin:0px;
padding:0px;
text-align: center;
}
#navbar ul li {
height: 50px;
width: auto;
float: left;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
height: 100%;
}
#navbar a:link {
font-weight:bold;
color: black;
font-family: Franklin Gorthic Heavy, Helvetica, sans-serif;
text-decoration: none;
}
#navbar a:hover {
background-color: #003300;
color: gold;
}
#navbar a:visited {
color: black;
}
a:active {
background-color: #003300;
color: gold;
}
HTML:
<div id="navbar">
<ul>
<li>HOME</li>
<li>ABOUT</li>
<li>NEWS</li>
<li>READING</li>
<li>STORE</li>
<li>CONTACT</li>
</ul>
</div>
Here's a screenshot for reference: (home has my cursor over)
Cheers
here's a quick example for you:
http://jsfiddle.net/DFS5P/
You then should move some of the li css to the a css - like so
#navbar ul li {
height: 50px;
width: auto;
float: left;
}
#navbar ul li a {
display: block;
height: 100%;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
border-right: 1px solid black;
}
Give your padding & height to anchor instead of LI. Write like this:
#navbar ul li {
float: left;
border-right: 1px solid black;
}
#navbar ul li a {
display: block;
padding-left: 20px;
padding-right: 20px;
line-height: 50px;
height: 50px;
}
Check this http://jsfiddle.net/DFS5P/1/
Try adding
width:100%;
to:
#navbar ul li a {
display: block;
height: 100%;
}
If you remove the padding from the list items and give them a fixed width, it works as you need.
#navbar ul li {
height: 50px;
width: 100px;
float: left;
line-height: 50px;
border-right: 1px solid black;
}
jsFiddle example
It is definately not the best way, but sometimes I just move the entire 'li' inside the 'a' tag. This way everything witin the 'li' goes to the link in when you click on it.
Works fine by me, but as I said it is not the best way.