I am having real troubles with trying to align a horizontal menu.So far my menu is looking like
I have 2 centered elements to make up the menu in the image you can see a gray border (slide-nav class) that has been centered within the page. Now I am trying to do the same for the menu
I have had to hard code the li widths but ideally I would like them to fit automatically. Is it possible without javascript to align the menu items in the center?
My html
<nav class="slide-nav">
<ul class="slider">
<li class="selected">
<div>
<span class="heart"></span>
<div>
Get Started</div>
</div>
</li>
<li>
<div>
<span class="price-tag"></span>
<div>
Get Results</div>
</div>
</li>
<li>
<div>
<span class="star"></span>
<div>
Track & Engage</div>
</div>
</li>
<li>
<div>
<span class="people"></span>
<div>
Features</div>
</div>
</li>
</ul>
</nav>
css
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
}
.slider
{
list-style: none;
height: 38px;
margin: 0 auto;
width: 722px;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
width: 150px;
}
.slider li div
{
line-height: 31px;
}
.slider li div div
{
text-indent: 6px;
}
.slider li.selected > div
{
border-bottom: solid 7px #592970;
}
Here the CSS that u have to change with
.slide-nav
{
border-bottom: solid 1px #f2f2f2;
margin: 0 auto;
width: 856px;
text-align:center;
}
.slider
{
list-style: none;
height: 38px;
margin: 0;
padding: 0;
}
.slider li
{
border-bottom: solid 7px transparent;
cursor: pointer;
display: inline-block;
padding:0 10px;
}
I believe this has been answered in detail here.
Basically you want to have your individual buttons rendered with display:inline-block which would allow for them to be justified. There's a trick however with adding a "dummy" line break to force justification.
I just got rid of the widths, removed margin: 0 auto from .slider and added the ole text-align: center.
Check out a live demo:
http://jsfiddle.net/RJL7J/
Hope this helps.
Related
I have a list ul with items li. Under the list there is a box surrounded with border. The top border of the box is also the bottom border of the list items.
What I want to do know is to remove the bottom border of the active tab. That means removing the top border of the content box along the active tab. Is this possible or do I need to use a different approach?
li {
display: inline-block;
padding-top: 0;
padding: 15px;
border-right: 1px solid #e6e6e6;
cursor: pointer;
border-top: 1px solid #e6e6e6;
font-family: 'Cera';
font-size: 13px;
}
ul {
list-style-type: none;
margin: 0 auto;
border-left: 1px solid #e6e6e6;
padding-left: 0px;
}
.content-box {
display: block;
min-height: 100px;
margin: 0 auto;
border: 1px solid #e6e6e6;
overflow: hidden;
padding-bottom: 10px;
}
.active {
position: relative;
background-color: #f8f8f8;
top: -3px;
}
<ul id="menu">
<li class="active" data-nav="1">Prerender</li>
<li data-nav="2">Prefetch</li>
<li data-nav="3">Preconnect</li>
<li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender"> Prerendered page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
Here's how I'd like it to look:
I suggest that you use negative margin to overlap elements.
Use a margin-top:-1px to overlap the top border of the lower box with the bottom edge of the top boxes. This allows the background-color of the active top box to cover the top border of the lower box.
Use margin-left:-1px on all top boxes except the first one to overlap the borders on their left and right sides. Otherwise, with a border on only one side, the active box will be missing a piece of border where it rises above the others.
I've removed the white space between <li> elements because, since they are display:inline-block, that space is rendered as gaps between the boxes.
I'm using additional padding to raise the active top box, instead of using negative top. This keeps the text inside the active box at the same height as the other boxes.
I've aligned the top boxes with vertical-align:bottom to keep them flush against the bottom box.
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
padding: 15px;
margin-left: -1px;
border-style: solid;
border-color: #e6e6e6;
border-width: 1px 1px 0 1px;
cursor: pointer;
font-family: 'Cera';
font-size: 13px;
vertical-align: bottom;
}
li:first-child {
margin-left: 0;
}
.content-box {
min-height: 100px;
border: 1px solid #e6e6e6;
margin-top: -1px;
padding: 10px;
}
.active {
background-color: #f8f8f8;
padding-top: 18px; /* 15 + 3 */
}
<ul id="menu">
<li data-nav="1">Prerender
</li><li class="active" data-nav="2">Prefetch
</li><li data-nav="3">Preconnect
</li><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender">Prefetched page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
If your idea is to slide down the tab to hide the border , then you should reset vetical-align on li (and eventually mind the white-space) , then increase the padding of 1px (for a one px border) and low it down of that extra pixel(s) like you tried.
li {
display: inline-block;
padding-top: 0;
padding: 15px;
border-right: 1px solid #e6e6e6;
cursor: pointer;
border-top: 1px solid #e6e6e6;
font-family: 'Cera';
font-size: 13px;
vertical-align: bottom;
}
ul {
list-style-type: none;
margin: 0 auto;
border-left: 1px solid #e6e6e6;
padding-left: 0px;
}
.content-box {
display: block;
min-height: 100px;
margin: 0 auto;
border: 1px solid #e6e6e6;
overflow: hidden;
padding-bottom: 10px;
}
.active {
position: relative;
background-color: #f8f8f8;
padding-bottom: 16px;/* increase height of 1 px here, can be any value you want */
top: 1px;/* low it done at least the border's thickness to hide */
}
body {
margin: 1em;
}
<ul id="menu">
<li class="active" data-nav="1">Prerender</li><!-- kill that white space via comments
--><li data-nav="2">Prefetch</li><!--
--><li data-nav="3">Preconnect</li><!--
--><li data-nav="4">DNS-prefetch</li>
</ul>
<div class="content-box box1 expanded">
<h3 id="isPrerender"> Prerendered page:</h3>
<ul class="results" id='pagetitle1'></ul>
</div>
I have facing some problems with my div container. I want to set standard height on my container. If content inside of the div is large scroll bar should show on the side. Here is example of my CODE:
//In this section I have Navigation bar and HTML included.
<section class="settingsBox">
<nav class="xNavigationSetting">
Menu |
</nav>
<div id="htmlSetting">
<cfinclude template="Includes/hmSettings.html">
</div>
</section>
<div id="settingMain" class="settingsBox">
<div id="settingTesting">
<fieldset>
<legend>Testing</legend>
<ul>
<li>
<span id="location">Test Location</span>
</li>
<li>
<span id="reason">Reason</span>
</li>
<li>
<span id="results">Results</span>
</li>
</ul>
</fieldset>
</div>
<div id="settingEquipment">
<fieldset>
<legend>Equipment</legend>
<ul>
<li>
<span id="type">Type</span>
</li>
</ul>
</fieldset>
</div>
</div>
<div id="settingTbl">
<div id="containerMaster"></div>
</div>
Here is my CSS:
div.settingsBox {
height: 400px;
overflow-y: scroll;
}
div.settingsBox fieldset {
font-weight: bold;
border: 2px solid #000099;
margin: 10px;
}
div.settingsBox ul li span:hover {
text-decoration: underline;
color: red;
cursor: pointer;
}
div.settingsBox ul {
list-style-image: url('../Images/edit.png');
}
nav.xNavigationSetting {
width: 100%;
margin-left: 0;
margin-right: 0;
padding-top: 2px;
margin-bottom: 5px;
background-color: #c8e2db;
float: left;
border-bottom: 2px solid #000099;
height: 18px;
}
nav.xNavigationSetting a {
color: black;
text-decoration: none;
cursor: pointer;
font-weight: bold;
padding-left: 5px;
padding-right: 5px;
}
My settingsBox has height of 400px and overflow-y set to scroll. For some reason all content disappears when I apply this CSS. If anyone knows why or what is wrong in my code structure please let me know. Thank you.
You need to clear float on div.settingsBox. It's currently floated outside of the viewport.
div.settingsBox {
...
clear: both;
}
I'm trying to make a navigation bar with a border-bottom as the hover effect which purpose is to follow the user mouseover and highlight the item. However, the border-bottom is including the padding of its parent, which I don't like. Using padding: 0px; doesn't do it.
Here's what I've got so far, bear with me since I'm fairly new to HTML & CSS and this is my first time making a website:
*{
padding: 0px;
margin: 0px;
}
#navdiv ul {
width: 100%;
height: 80px;
line-height: 80px;
vertical-align: middle;
background: #333;
margin-top: 5px;
}
#container {
margin-left: 200px;
margin-right: 200px;
}
#navdiv ul a {
width: 80%;
text-decoration: none;
color: #f2f2f2;
padding: 15px;
font-size: 16px;
}
#navdiv ul li {
height: 63px;
list-style-type: none;
float: right;
}
#navdiv ul li:hover {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
height: auto;
max-width: 100%;
max-height: 60px;
vertical-align: middle;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<ul>
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<li>Item 4</li>
<li>Item 3</li>
<li>Item 2</li>
<li>Item 1</li>
</div>
</ul>
</div>
</div>
</nav>
As you can see, the orange border-bottom is taking "Item 1" padding which is making the border-bottom larger than it's content, which I find it ugly and I would like to fix it.
While at it, is there a way to make the border-bottom animation come from the left to right? If so, is there also a way to make it "smart" enough to know that if the user's cursor comes from the left of the item, it should animate from "left to right" and if the cursor comes from the right animate it from "right to left" accordingly?
I would also love to make it follow the user cursor instead of instantly disappearing after leaving the previous item and immediately appearing once the next item is hovered.
Sorry for the long post, I've got so many questions and so little luck while troubleshooting using google with the little knowledge that I know.
Massive thanks!
- Kay.
Removing width: 80%; from #navdiv ul a will fix the larger border-bottom issue.
Please find below for left-to-right border-bottom effect.
https://codepen.io/julysfx/pen/qXBzYL
The reason for the border looking like that is because the border is around the outside of the HTML element. Padding is within the element so the border will incorporate that and thus do a border at that boundary. This stack overflow question explains this with diagrams:
Difference between margin and padding?
You might want to change to using margin to space out the items. Also, width: 80% might also make the border look a bit longer than you imagined. You could either increase the margin between items, or if you really want the items to be 80% wide, you could have a parent div which is 80% width so that it doesn't affect the border.
Is this more what you are looking for?
*{
padding: 0px;
margin: 0px;
}
.slider {
position: absolute;
display:block;
left: 0;
top: 90%;
margin: 0 auto;
height: 2px;
width: 0%;
border-bottom: 5px solid #FF9933;
transition: width 1s ease;
}
#navdiv {
background: #333;
}
#navdiv ul {
width: 100%;
display: inline;
}
#container {
margin-left: 200px;
margin-right: 200px;
height: 63px;
line-height: 63px;
}
#navdiv ul a {
text-decoration: none;
color: #f2f2f2;
font-size: 16px;
}
#navdiv ul li {
list-style-type: none;
float: right;
position:relative;
display:inline;
background-color: red;
line-height: 29px;
margin-top: 16px;
margin-right: 10px;
}
#navdiv ul li:hover .slider {
border-bottom: 5px solid #FF9933;
transition: all 0.3s ease-in-out;
width: 100%;
}
#highlight {
display: inline-block;
line-height: 1em;
padding: 0;
border-bottom: 5px solid #FF9933;
}
#navdiv img {
width: auto;
max-width: 100%;
}
<nav>
<div id="Maindiv">
<div id="navdiv">
<div id="container">
<img src="../img/menu-logo.png" alt="Menu Logo">
<ul>
<li>
Item 5
<span class="slider"></span>
</li>
<li>
Item 4
<span class="slider"></span>
</li>
<li>
Item 3
<span class="slider"></span>
</li>
<li>
Item 2
<span class="slider"></span>
</li>
<li id="highlight">
Item 1
<span class="slider"></span>
</li>
</ul>
</div>
</div>
</div>
</nav>
I am able to correctly align the menu bar when the browser is not resized. Once i start zooming out , the content in the menu bar comes below , I am currently concentrating on zooming out the menu.
please advice me what must be the problem, and is there any way i can keep the menu items from wrapping .
<body>
<div id="wrapper">
<div id="header">
<div id="logo">CodePlayer </div>
<div id="run_btn"> <button id="run"> Run </button> </div>
<ul id="menu">
<li> HTML </li>
<li> CSS </li>
<li> JS </li>
<li> Result </li>
</ul>
<div class="clear"> </div>
</div>
</div>
</body>
CSS
body {
padding: 0;
margin: 0;
}
#wrapper {
width: 100%;
}
#header {
width: 100%;
background-color: #EDEDED;
height: 40px;
}
#header #logo {
font-weight: bold;
font-family: Helvetica;
font-size: 0.9em;
padding: 10px 10px;
float: left;
}
#header #menu {
width: 220px;
margin: 0 auto;
border: 1px solid grey;
border-radius: 3px;
height: 27px;
position: relative;
top: 5px;
padding-left: 0px;
padding-right: 0px;
}
#header ul li {
float: left;
list-style-type: none;
padding: 5px 10px;
border-right: 1px solid grey;
font-size: 1em;
}
#header ul li:last-child {
border-right: none;
}
#run_btn {
float: right;
padding: 5px 10px 0 0;
}
#run_btn #run {
font-size: 120%;
}
.clear {
clear: both
}
link
It does not work in the responsive layout . so the solution would be wither use the #media-queries or u can use the bootstrap grid layout , where u can put header as a row and giving the 3 columns of size 4 i.e 'col-md-4',
this will keep the code intact with the window resize.
I am building a CSS only two-level horizontal navigation bar with relative sub-navigation to the parent. All menu items are inline. Dependent upon the classes 'right' or 'left', the sub-nav aligns to the parent. This is what I've managed to accomplish so far:
html:
<body>
<div class="navbar">
<ul class="topnav left">
<li>nav</li>
<li>menu1
<span class="subnav">
<ul class="subnav subnav-left">
<li>item1-1</li>
<li>item1-2</li>
<li>item1-3</li>
</ul>
</span>
</li>
<li>menu2
<span class="subnav">
<ul class="subnav subnav-left">
<li>item2-1</li>
<li>item2-2</li>
<li>item2-3</li>
</ul>
</span>
</li>
</ul>
<ul class="topnav right">
<li class="right">menu3
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</span>
</li>
<li class="right">menu4
<span class="subnav subnav-right">
<ul class="subnav subnav-left">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</span>
</li>
</ul>
</div>
</body>
css:
body {
font-family: arial;
margin: 0;
}
.navbar {
height: 40px;
background-color: black;
}
ul.topnav {
margin: 0;
padding: 0;
}
.subnav {
position: absolute;
}
.subnav-right {
right: 0;
}
ul.subnav {
position: relative;
margin: 4px 0 0 -8px;
padding: 0;
display: none;
}
ul.topnav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
ul.subnav li {
background-color: red;
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
float: left;
clear: none;
box-sizing: border-box;
}
.topnav li:hover {
background-color: red;
}
.topnav li:hover ul.subnav {
display: inline-block;
background-color: red;
}
.nav ul li:hover {
background-color: black;
}
.nav ul li {
width: 100%;
}
.nav li ul {
display: inline-block;
clear: none;
position: absolute;
background-color: red;
margin: 4px 0 0 -8px;
padding: 0;
}
.left {
float: left;
}
.right {
float: right;
}
The jsfiddle:
jsfiddle.net/aLZqZ
Here is what I'm trying to accomplish:
image to nav menu
I got this for you http://jsfiddle.net/aLZqZ/99/. In under 100 tries, too. I became a little obsessed and spent at least 5 hours total. A good challenge for me and I have never really fiddled with sub navs before.
This issue was three fold:
Using float:right for a horizontal nav bar is usually not good in my experience because it causes unexpected issues, also it is negated and ignored by browsers if the same element is positioned relative or absolute (you had a lot of superfluous code, btw). I changed float:right to text-align:right where necessary. See this for horizontal nav I fixed for someone recently: Aligning/floating my nav bar to the right
The li element containing the sub menu was not positioned, therefore, the position:absolute and right:0 on the ul within it moves according to the closest containing element that is position:absolute or :relative. In this case there was not one so that element was html; thus the ul would be pushed all the way right to the end of the page. I added position:relative to these li elements which then made the right:0 behave as expected, but did not put all the li element on one line and stacked them instead.
You had tags with display:inline-block when :inline would have done it, but more importantly, no one ever really mentions that white-space:nowrap on the same elements to do what you are trying here is important. inline-block and nowrap together should force one line block like elements that you can align or float as whole as if they were a paragraph. BTW, IE7 needs some special attention for inline-block. See here: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/
I made special css at the bottom of yours in your fiddle to separate the left and right navs, and I basically left your original css alone. I also adjusted the html a bit. Here it all is.
HTML for the right nav (follows the HTML for the left nav):
<ul class="rightNav">
<li>menu3
<ul class="rightSubNav">
<li>item3-1</li>
<li>item3-2</li>
<li>item3-3</li>
</ul>
</li>
<li>menu4
<ul class="rightSubNav">
<li>item4-1</li>
<li>item4-2</li>
<li>item4-3</li>
</ul>
</li>
</ul>
CSS that I added to separate the right and left nav:
ul.rightNav {
margin:0;
padding:0;
text-align: right;
}
.rightNav li:hover {
background-color: red;
}
ul.rightNav li{
list-style: none;
display: inline-block;
color: white;
padding: 4px 8px;
font-weight: bold;
line-height: 32px;
position:relative;
}
ul.rightSubNav {
position: absolute;
right:0;
margin: 4px 0 0 -20px;
padding: 0;
display: none;
white-space:nowrap;
}
ul.rightSubNav li {
background-color: red;
list-style: none;
display: inline;
color: white;
padding: 4px 8px;
font-weight: bold;
position: relative;
line-height: 32px;
}
.rightNav li:hover ul.rightSubNav {
display: inline-block;
background-color: red;
}
If this helped I would appreciate the up votes and answer select. If you figured something else out and got it working differently please post. I would love to see it.