I've spent almost an hour trying to get my navigation menu to look nice.
I'm using Twitter Bootstraps's flat css menu.
For some reason, the first item of the menu has a taller height than every other item in the menu - as seen here:
How can I get the height of the first item the same as every other list item in the list?
I've tried:
Explicitly setting the height of the first list item. Nothing changes.
Removing padding from the menu. Nothing changes.
Removing margin from the menu. Nothing changes.
Here's a jsfiddle showing my problem in action. I know the code in the fiddle is a bit messy right now, but I'll work on this later on after I fix this problem.
Code from the fiddle:
HTML:
<img id="profile_circle" style="height:25px;width:25px;;border-radius: 16px;float:right;margin-top:10px;border:2px solid #DDD8CE;cursor:pointer;" src="https://secure.gravatar.com/avatar/3ab5cad18247b67090e61f59b47ef7c4?size=20" alt="">
<div style="width:160px;min-height:100px;background-color:white;z-index:3;position:relative;top:40px;left:240px;-moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.2),inset 0 0 0 #000;-webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2),inset 0 0 0 #000;" class="grey_box">
<ul class="dropdown-menu">
<li>My profile</li>
<li>My university</li>
<li>My dumps</li>
<li>My notes</li>
<li class="divider"></li>
<li>Logout</li>
</ul>
</div>
CSS:
.dropdown-toggle:focus{outline:0;}
.dropdown-menu{z-index:1000;display:block;padding:5px 0;list-style:none;font-size:14px;background-color:#ffffff;background-clip:padding-box;margin:0px !important;}
.dropdown-menu .divider{height:1px;margin:9px 0;overflow:hidden;background-color:#e5e5e5;}
.dropdown-menu>li>a{display:block;padding:3px 20px;clear:both;font-weight:normal;line-height:1.428571429;color:#333333;white-space:nowrap;}
.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus{text-decoration:none;color:#ffffff;background-color:#428bca;}
.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus{color:#ffffff;text-decoration:none;outline:0;background-color:#428bca;}
.grey_box {
background-color: #FFF;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border: 3px solid #DDD8CE;
}
The extra height of the first item comes from your image (profile_circle). This image has set the floating-style (float:right). The div with your menu inside "floats" besides this image, but the style .dropdown-menu>li>a says block-layout in addition with clear:both for the links in your menu, which places the whole menu "below" the image.
Related
I'm programming a to-do list with react. In CSS i made li:active to cause height expanding animation, however i've already programmed the <span>x </span> to have onClick to delete the corresponding item. My problem is that span is a children of li, and every time i click it, it'll cause a micro animation because it resides in the same space as li. Not sure what approach can i do to fix this.
this is the list structure:
<ul>
<li>
to-do text
<span> X </span>
</li>
</ul>
full code at codesandbox
You can use button instead of span and then use this CSS trick
<button key={i.id + "x"} refx={i.id} onClick={deleteItem}>
x
</button>
CSS:
li:active:not(:focus):not(:focus-within) {
background-color: rgb(248, 4, 4);
box-shadow: 0 8px 0 0 rgba(0, 0, 0, 0.15);
margin-bottom: 15px;
margin-top: 10px;
margin-bottom: 15px;
}
sample codesandbox,Hope be helphful
I found some free source code online for a nice menu bar that I like. It came with its own stylesheet which worked fine, but it jacked up a lot of the vertical alignment on my existing site. I want the menu bar and all tables centered on every page--simple. But because of this new stylesheet, everything is kinda centered, but not quite, and sometimes it's way off center.
I can fix any page, case by case, by playing around with margin-left in various elements, but this is tedious, and whenever I add a menu item, or put 2 tables side by side, etc, the horizontal alignment gets all jacked up again. I'm looking for a simple, universal way to center my menu bar and tables so that when menu items are added or removed, or tables get wider or placed side-by-side, all the centering stays correct.
First, a visual:
As mentioned, I can get everything to align perfectly only if I change styles on a page-by-page basis and tweak it differently on each page. I'm looking for a global solution.
The body tag has a width set:
<body style="width:720px;margin: 50px auto">
The menu source instructions said I have to set a width on body, which I've never done before on other web pages. If I don't do it, all the alignment goes way off. It seems ideal to not have to set a body width, I'm guessing that's causing problems.
The HTML for the menu bar looks like this:
<ul id="nav" style="margin-top:-95px">
<li><img src="images/RefSlot_Menu.png" onclick="location.href='index.html'" title="RefSlot Home Page" style="cursor:pointer;width:119px;margin-right:78px;margin-left:10px"></li>
<!--<li>RefSlot</li>-->
<li>Organization
<ul>
<li>Create New Member</li>
<li>Your Members</li>
<li>Sites</li>
<li>Archived Groups</li>
</ul>
</li>
<li>Create Group</li>
<li>Profile</li>
<li>Contact Us</li>
</ul>
CSS on top-level UL:
#nav {
margin: 0;
padding: 7px 6px 0;
background: #777D85 url(images/gradient.png) repeat-x 0 -110px;
line-height: 100%;
border-radius: 2em;
-webkit-border-radius: 2em;
-moz-border-radius: 2em;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, .4);
-moz-box-shadow: 0 1px 3px rgba(0,0,0, .4);
}
CSS on each LI:
#nav li {
margin: 0 5px;
padding: 0 0 8px;
float: left;
position: relative;
list-style: none;
}
What can I do to force my content to center? Currently I'm having to tweak around with margin-left on BODY or TABLEs, etc, different on each page. Thanks in advance.
Working example: http://www.refslot.com/_stackdemo.html
Add following code to your css file:
body {
margin: 0 auto;
}
or change your body tag like this:
<body style="width: 720px; margin: 0 auto;">
I'm having the following problem:
The Bootstrap 3 navbar according to the documentation has three different dividers as defined here: http://getbootstrap.com/components/#navbar-default
nav navbar-nav
navbar-form navbar-left
nav navbar-nav navbar-right
However, I don't have any navigation links to input in the nav navbar-nav section next to brand; I only make use of navbar-form navbar-left and nav navbar-nav navbar-right so I decided to remove nav navbar-nav entirely.
The issue that gives me is that when the menu collapses there is a weird spacing between the navbar and the form. What is the proper way to implement what i'm trying to do and / or avoid this issue?
Update If I drop nav navbar-nav navbar-right I get the same spacing issue except for the bottom for the bottom of the collapsed menu. It seems that Bootstrap expects something to be there; is there a way around this?
Update2 Default Bootstrap 3 Navbar http://jsfiddle.net/wmkp595e/
Spacing issue between the search form and navbar http://jsfiddle.net/wmkp595e/1/
If you look at the Bootstrap 3 css (https://raw.githubusercontent.com/twbs/bootstrap/master/dist/css/bootstrap.css) of the navbar before the media queries -- which is the one used by the small viewport menu, you'll see that the borders are there no matter where you put your form, so if it's right after the .navbar-header you will have double rules and a padding on the top that you may or may not want to remove.
.navbar-form {
padding: 10px 15px;
margin-top: 8px;
margin-right: -15px;
margin-bottom: 8px;
margin-left: -15px;
border-top: 1px solid transparent;
border-bottom: 1px solid transparent;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 1px 0 rgba(255, 255, 255, .1);
}
If you put your form right after it, write some css to address this, since your css will come after the Bootstrap CSS, you will need a max width or yours will screw up the padding:
#media (max-width:767px) {
.navbar-form {
border-top:0px;
padding-top:0;
}
}
DEMO: http://jsfiddle.net/wmkp595e/3
nav navbar-nav navbar-form navbar-left navbar-right
are utility classes that sets positioning of the element,
can you make a fiddle or show the site?
This is default behavior with Bootstrap. If there is too much content in the top navigation then when the browser window size is smaller it will cause the elements in the header to wrap. There are a couple of ways to deal with it:
You can reduce the amount of space that is being used in the navigation by either reducing padding or making your navigation links use less text or sizing down your input elements. This is probably the simplest option.
Alternatively you can edit the #media CSS in bootstrap to allow the navbar-toggle button to activate sooner.
In Zurb's Foundation 4, whenever we have the following top-bar navigation
<nav class="top-bar">
<ul class="title-area">
<!-- Title Area -->
<li class="name"><!-- Leave this empty --></li>
<!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
<li class="toggle-topbar menu-icon"><span>Menu</span></li>
</ul>
.
.
.
and we use a mobile or just shrinks the browser are a lot, whatever is in the top navigation bar collapses and its contents are replaced by a cool menu icon. As in the picture bellow:
I've tried to use Firebug/Chrome Dev tools and the only thing I'm certain about this button is that is doesn't use a picture. Was it built using only CSS? If so, how?
Googling around I found this site:
http://css-tricks.com/three-line-menu-navicon/
It seems that Foundation uses the "Pseudo Element w/ box-shadow" trick, but I wasn't able to find it in Zurb's code.
My aim is to use this 'menu button' in other parts of my code, not related to the shrinking of the browser's area.
It's not difficult to find in the code, just inspect the element .toggle-topbar .menu-icon a span
I've made a Fiddle that just has the code for the menu icon:
http://jsfiddle.net/3HPLu/
The only code you really need to generate the three lines is:
#menu-icon {
display: block;
-webkit-box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
box-shadow: 0 10px 0 1px black, 0 16px 0 1px black, 0 22px 0 1px black;
}
But Zurb just use a mix of positioning tricks to add the 'Menu' text.
I've made a horizontal menu using a list. I'm trying to get each <li> to appear as a horizontal rectangle with wedges snipped out of its sides - snip> <snip - and text centered horizontally and vertically.
I thought I could accomplish this by giving the <li>'s a line-height of 0, making the borders thick, and making the right and left border transparent, but it behaves like there's still .4em of line height or something.
A note about the attached code: I have nothing resembling a formal education, so I expect there to be some serious holes in my method and code. I am absolutely willing to take all input in the interest of making my code semantic, clean, and simple.
Thanks for your help!
#CAPMenu li
{
float:left;
width:95px;
border-top: 20px solid #4672A3;
border-bottom: 20px solid #4672A3;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
line-height:0em;
}
<div id="CAPMenu">
<ul>
<li>Home</li>
<li>Idea</li>
<li>Concept</li>
<li>Feasability</li>
<li>Development</li>
<li>Scale Up</li>
<li>Launch</li>
<li>Post Launch</li>
</ul>
</div>
Adding "height: 0" gives me some wedges: