I am trying to center an a within a li in a navigation menu. IT is not working. Here is my relevant css:
#access ul li ul {
position: absolute;
background-color: #fff;
border-top: 4px solid #2980b9;
top: 55px;
left: 0px;
width: 190px;
}
#access li:hover
{
background: #2980b9;
}
#access a {
display: block;
margin-left: auto;
margin-right: auto;
}
Any thoughts on this?
For the HTML see the nag bar in http://phasetransfercatalysis.com
You need the element to be explicitly sized for that trick to work.
a{
dispaly:block;
margin-left:auto;
margin-right:auto;
width:40px;
}
http://jsfiddle.net/Zyw6y/2/
You have two options at least.
First option, set a width to your a like so
#access a {
width: 60%;
}
Second option, you can rework your code and set text-align: center on the parent which is the li, and make the a inline-block so that it follows the orders from li to be aligned centered.
#access li {
text-align: center;
}
#access a {
display: inline-block;
}
Related
Novice here! I'm looking to adjust some code for this site: http://www.lakeofstars.org
The footer area at the base of each page contains a series of logos. The ideal is to ensure that the logo images in the footer display correctly on mobile (if they are too large, some of the logos drop down below the designated footer background), but also to get them to center correctly on desktop - as you'll see, they are currently nudged to the left.
Here's the code as it stands:
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px; /* Height of the footer */
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif);
background-repeat: repeat-x;
background-position:bottom;
}
#footer .structure {
height: 140px;
width: 94%;
}
#footer .structure li {
display: inline-block;
margin: 10px 10px 0 0;
float: left;
}
#footer .structure li img {
height: 65px;
width: auto;
}
You need to remove float: left; from #footer .structure li.
Try to use line-height and vertical-align: middle; for vertical aligment and text-align: center; for horizontal:
#footer .structure {
text-align: center;
}
#footer .structure ul {
line-height: 140px;
vertical-align: middle;
}
#footer .structure li {
display: inline-block;
}
Or you can use flexbox technique
#footer {
position:absolute;
bottom:0;
width:100%;
height:140px;
background:#ffffff;
border-top: solid 3px #ffc600;
background-image:url(img/global/footer.gif) scroll 50% 50%;
background-repeat: repeat-x;
background-position:bottom;
}
add for #footer .structure ul - text-align: center;
remove for #footer .structure li - float: left
#footer .structure ul {
text-align: center; < -- add
}
#footer .structure li {
display: inline-block;
vertical-align: middle;
margin: 10px 10px 0 0;
/* float: left;*/ <-- remove
}
Remove width:auto ... give values in percentage....
#footer .structure li img
I am using bootstrap 3 navbar. But on one of my drop downs I have add a <span class="label label-success"></span>
I cannot seem to get my span inline with the links that it is connected to. Not sure what to do.
Demo here: Click on the notices link for drop down menu. http://codepen.io/riwakawebsitedesigns/pen/asqoy
.dropdown-menu {
min-width: 280px;
}
ul.nav .navbar {
margin: 0;
padding: 0;
}
.dropdown-menu li {
margin: 0;
padding: 0;
vertical-align: top;
}
.dropdown-menu li a {
margin: 0;
overflow: auto;
}
.dropdown-menu li a:hover {
background: #222222;
color: #FFFFFF;
}
.dropdown-menu li a span {
float: right;
display: block;
}
demo - http://codepen.io/anon/pen/hKJHp
.dropdown-menu li a span {
float: right;
line-height: inherit; /** set the line-height to inherit */
}
After getting some advice else where. It now works by using this css
ul.dropdown-menu > li > a {
display: block;
overflow: auto;
position: relative;
}
ul.dropdown-menu span.label {
position: absolute;
top:50%;
right:0;
transform:translate(-50%,-50%);
}
I need help centering my CSS menu. Not sure why it isn't centered. I played around with the padding but it didn't change anything really. I know you just can't center it like you can with HTML though.
Here is the CSS:
Here is the page:
Thank you!
-Mike
Try adding margin:auto in the css menu
#cssmenu {
background: #000000;
height: 44px;
position: relative;
width: 595px;
margin: auto;
}
FIDDLE
Add margin: 0 auto; to #CssMenu
#cssmenu {
position: relative;
height: 44px;
background: #000000;
width: 595px;
margin: 0 auto;
}
#cssmenu > ul {
position: relative;
display: block;
background: #000000;
height: 32px;
width: 100%;
z-index: 500;
text-align: center; /*add this to center your li itens*/
white-space: nowrap; /*add this if you dont want brake the 'HISTORY' link in another line*/
#cssmenu > ul > li {
display: inline-block; /*you must remove float:left; and add change display to inline-block to display your li items side by side*/
vertical-align: top; /*add this to make you li itens align by top*/
position: relative;
padding: 0;
}
I have a div black bar, and a logo image that currently sits at the left as the first child element of this div. The logo image has a height larger than the black bar's fixed height of 42, so it juts out (this is a style choice)
I want to include a menu in the black bar, so I added a UL menu as the next child element.
However, it sits as the bottom of the div, outside the black bar area, because it sits inline with the logo.
I want to push the menu to the top, above the black area
I've tried every possible combination of floats, display: inline/inline-block, margin-top, padding-top, etc. but to no avail.
Anyone got a solution?
Thanks!!!
HTML
<div id="black-bar">
<img src="..."></img>
<ul>
<li>Programs & Projects</li>
<li>Recipes</li>
</ul>
</div>
CSS (This is only the lat of many combos I've tried)
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul{
line-height: 119px;
display: inline;
vertical-align: top;
}
#black-bar ul li{
display: inline;
}
JSfiddle
CSS
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
line-height: 119px;
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline;
}
#black-bar ul li a {
vertical-align: top;
line-height: 40px;
color: white;
text-decoration: none;
}
You can take the line-height property from the black header.
Then you can display li as inline-block and apply padding as requited.
#black-bar {
text-align: left;
background: #373737;
height: 43px;
padding-left: 60px;
width: 100%;
/*line-height: 119px;*/
}
#black-bar .logo {
float: left;
margin-left: 0px;
}
/* header menu */
#black-bar ul {
display: inline;
}
#black-bar ul li {
display: inline-block;
padding:10px 15px 0 0;
}
see fiddle: http://jsfiddle.net/Jywd3/
I've a problem with inserting an image after every element in my list. I used ":after" and it shows me the image but instead of after every element, the images are with a new linebreak under every element:
Should be (|=image):
Site1 | Site2 | Site...
Reality:
Site1 Site2 Site3
| | |
Following my css code, maybe someone can help:
/* Navigation */
#nav {
position:relative;
height:70px;
background:#191919;
position:relative;
}
/* The main menu */
.menu{
list-style: none;
position: relative;
float: left;
display: block;
left: 50%;
padding-top:20px;
}
/* First level of navigation */
.menu li{
position: relative;
float: left;
display: inline;
right: 50%;
padding-right:15px;
}
.menu li a{
display:inline;
width:auto;
word-wrap: break-word;
text-shadow: none;
color:#FFF;
text-decoration:none;
font-size:14px;
font-weight:normal;
}
.menu li:after {
display: block;
content: "";
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}
You can use absolute position for this. Write like this:
.menu li:after {
display: block;
content: "";
position:absolute;
top:0;
right:-5px;
width: 5px;
height: 50px;
background: transparent url('../images/nav_bar_line.png') no-repeat;
}