I need all text in <strong>Home</strong><span>This is a home</span> placed at bottom but css code not working.
css
a { text-decoration: none; color: #777; }
.menu {
margin: 0;
list-style: none;
}
.menu li {
position: relative;
display: inline-block;
}
.menu li a {
position: relative;
height: 100px;
display: block;
width: auto;
border: 1px solid #eee;
background: #fbfbfb;
padding: 10px 20px;
}
.menu li a span,
.menu li a strong {
display: block;
border-bottom: 1px solid #bfbfbf;
vertical-align: bottom;
}
the live code here http://jsfiddle.net/wgjfL/
Thanks in advance
You need to remove the position:relative; from the menu li a class and apply a display:table-cell; for it to work.
Here is the WORKING SOLUTION
The Code:
.menu li a {
background: none repeat scroll 0 0 #FBFBFB;
border: 1px solid #EEEEEE;
display: table-cell;
height: 100px;
padding: 10px 20px;
vertical-align: bottom;
width: auto;
}
To understand the full Logic of how and when to use vertical-align, refer to THIS ARTICLE.
Hope this Helps.
Just do the following on your main nav:
clear: both;
This will ensure that your links will always be at the bottom of anything above it.
You can also use:
float: left;
Then
clear: none;
on the other elements. Which will force them not to wrap around the text.
Guy
Related
I'm curious why my 'homepage' link keeps shifting over. I've made a fiddle of the problem:
jsfiddle.net/nbf8fwdv/
Thanks for the help. I'm still getting the hang of semantics and proper usage in CSS, so if you see any glaring problems with my code that only a beginner would make, please let me know. Thanks for the help in advance.
In order to prevent the homepage from shifting on hover, you'll want to remove this property:
max-width: 75px;
from this class:
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
max-width: 75px;
text-align:center;
}
Because the homepage list item is naturally greater than 75px, the max-width property is actually reducing it's width on hover.
You can write a class like bootstrap
body {
background-color: white;
font-family: PT Sans, sans-serif;
text-shadow: 1px 1px rgba(166,166,166,.2);
}
header {
background: white;
width: 100%
padding: 40px 0;
color: black;
text-align: center;
}
a {
text-decoration: none;
color: black;
font-size: 1.0em;
letter-spacing: 2px;
}
nav {
box-shadow: 1px 1px 10px rgba(166,166,166,.2);
}
nav ul {
background-color: rgba(253,235,193,.3);
overflow: visible;
color: white;
padding: 0;
text-align: center;
margin: 0;
position: relative;
}
nav ul li {
display: inline-block;
padding: 20px 40px;
position: relative;
}
nav ul ul {
display: none;
}
nav ul>li:hover {
background-color: rgba(253,235,193,.6);
text-align:center;
}
nav ul li:hover ul{
display: block;
margin-top: 20px;
}
nav ul li:hover li{
margin-left: -40px;
margin-top:-15px;
text-align: center;
float: left;
clear: left;
}
.portfolio_menu{position:absolute;top:100%;left:0;z-index:1000;display:none;float:left;min-width:160px;padding:5px 0;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}
To actually save your other links by shifting over when hover over the "portfolio", here is my 2 cents. http://jsfiddle.net/nbf8fwdv/5/
nav ul ul {
display: none;
position:absolute;
left:0;
}
I am trying to vertically align an anchor tag within a list item, i have managed to horizontally align it so far. See code below and check jsfiddle for demo.
HTML
<div id="header-top">
<div id="header-top-middle">
<ul>
<li><a data-icon="" a href="#">1</a></li>
<li><a data-icon="" a href="#">222222222</a></li>
<li><a data-icon="" a href="#">3</a></li>
<li><a data-icon="" a href="#">4</a></li>
</ul>
</div>
CSS
#header-top {
height:30px;
background-color:#303030;
width: auto;
border-bottom: 2px solid #DDDDDD;
}
#header-top-middle {
width:1024px;
margin: 0 auto;
height:30px;
}
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
}
#header-top-middle ul li {
border-right: 1px solid #DDDDDD;
display: inline;
float: left;
overflow-x: hidden;
overflow-y: hidden;
}
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
See jsfiddle
You can use display: table for your list:
#header-top-middle ul {
list-style: none;
margin: 0;
padding: 0;
display: table;
}
as well as display:table-cell; and vertical-align: middle; for your link inside list item:
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align: middle;
}
Updated Fiddle
Add line-height:30px to a:
http://jsfiddle.net/hRadK/1/
#header-top-middle ul li a {
color: #FFFFFF;
display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
line-height:30px;
}
This might help: http://css-tricks.com/centering-in-the-unknown/
In the link, Chris deals with centering an element whose width and height are unknown.
#header-top-middle ul li a {
color: #FFFFFF;
//display: block;
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
display:table-cell;
vertical-align:middle;
}
http://jsfiddle.net/hRadK/8/
Try the approach outlined in this answer of wrapping your hyperlinks in a div and applying the vertical alignment on the div. The only other amendment you will need to make is then to remove the block display of hyperlinks you currently have defined.
#header-top-middle ul li a {
color: #FFFFFF;
/* display: block; - remove this rule */
font-size: 15px;
height: 30px;
text-align: center;
width: 30px;
text-decoration:none;
}
Updated fiddle
I'm trying to center my dropdown menu without it affecting the functions of the menu. Any help is much appreciated! Thanks!
#menu_container { padding: 1px 0; border-bottom: 1px solid #FFF; }
#menu_container ul { list-style-type: none; }
#menu_container ul li { float: left; font-size: 12px; position: relative; }
#menu_container ul li a { display: block; padding: 5px 15px; color: #808080; text-decoration: none; }
#menu_container ul li a:hover { background-color: #333; color: #808080; }
#menu_container ul li ul { display: none; position: absolute; top: 25px; left: 0; z-index: 150; border: 1px solid #ddd; }
#menu_container ul li ul li { width: 310px; float: none; }
#menu_container ul li ul li a { background-color: #fff; }
It depends on your layout and page structure. It might be as simple as assigning #menu_container a fixed-width and automatic margins:
#menu_container { width: 640px; margin: 0 auto; padding: 1px 0; border-bottom: 1px solid #FFF; }
/* Depending on your layout, you may also need to assign a full-width and/or relative positioning to a parent/container/wrapper element */
You could set the #menu_container element to center by adding
margin:0px auto;
In order for that to work, you will also have to set a width for the container.
I'm stuck on a problem with the drop down menu on this site http://www.leithonthefringe.com/ (hover over performer information to see problem).
Basically a large gap appears between the main menu and the first item in the drop down, it affects FF/IE/Chrome.
Any thoughts greatly appreciated!
CSS is as follows:
#menu-main-nav { margin: 0px; padding: 0px; }
#menu-main-nav li { float: left; list-style: none; height: 40px; font-size: 20px; }
#menu-main-nav li a { display: block; background: #333333; padding: 12px 24px 8px 24px; text-decoration: none; border-right: 1px solid #444444; color: #EAFFED; white-space: nowrap; }
#menu-main-nav li a:hover { background: #222222; }
#menu-main-nav li ul { margin: 0px; padding: 0px; height: 40px; position: absolute; visibility: hidden; border-top: 1px solid white; z-index: +1 }
#menu-main-nav li ul li { float: none; display: inline; }
#menu-main-nav li ul li a { width: auto; background: #750000; color: #FFFFFF; border-right: none; }
#menu-main-nav li ul li a:hover { background: #8d0101; }
//Update
The problem seems to be cufon rendering a white space that doesn't seem to exist as cufon text - any thoughts on why that would happen also appreciated.
The solution turned out to be to render cufon on #main-menu-nav a rather than #main-menu-nav...
Theres a cufon in the way.
<cufon class="cufon cufon-canvas" alt=" " style="width: 4px; height: 20px; "><canvas width="14" height="22" style="width: 14px; height: 22px; top: -2px; left: 0px; "></canvas><cufontext> </cufontext></cufon>
the issue is padding, specifically in #menu-main-nav li a The padding-top value needs to be 0.
I'm on Chrome/Firefox. I've read several tutorials and questions here too on this topic.
I have a UL containing LI. I set the LIs to "display: inline;", but they won't. They're still vertical.
What am I doing wrong?
Thx.
Here's my css:
.menu{
width: 100%;
padding: 0px;
margin: 0px;
outline: 1px solid grey;
background-color: #f6f6f6;
font-size:100%;
}
.menu ul{
float: left;
list-style: none;
margin: 0px;
padding: 0px;
background-color: #f6f6f6;
}
.menu li ul{
display: none;
height: auto;
padding: 0px;
margin: 0;
background-color: #f6f6f6;
outline: 1px solid gray;
position: absolute;
z-index: 200;
left: 20px;
top: 30%;
}
.menu li:hover ul{
display: block;
}
.menu li:hover{
background-color: #005ea2;
}
.menu li{
display: inline;
padding: 0;
margin: 0;
border-bottom: 1px dotted grey;
}
.menu ul li:last-child{
border: none;
}
.menu a{
display: block;
color: #333333;
text-decoration: none;
margin: 0px;
margin-left: 5px;
}
.menu a:hover{
color: white;
background-color: #005ea2;
}
.menu .menu_header{
color: #333333;
}
.menu .menu_header a:hover{
color: white;
}
The <li> elements need to have float:left
first of all you might consider adding the relevant HTML to your answer, to help answerers understand your situation better.
I can spot several strange things that might be related to your problem.
First, the li ul selector are not very useful: it's more likely that you meant the opposite, ul li.
Second, I see that on hover you have something changing to display: block. This is a very
strange behavior to have on hover, are you sure?
Third, I see that you have a { display: block }. This does not play nicely if its container is display: inline so you might want to switch to display: inline-block for the container (which is what I would suggest for an horizontal menu anyway)