I have a menu and I want the last menu item to be a red button. I want it to look like this (and if possible with no gap on top between menu and the blue line)
but is like this:
My problem is that when I change the top padding/margin I can not align the text of this item with the rest of the menu items.
This is the code I'm using:
.fusion-main-menu .fusion-last-menu-item a{
background:#FE6C59;
color: #FFFFFF;
text-align:center;
display: block;
margin-bottom: 10px;
padding-right:5px;
padding-left:5px;
vertical-align: middle;
height:60px;
}
I keep experimenting with margins,paddings and height but can't get it to the form I want it. Could you help me? The site is: tfs-sl.com
Inside the link there is a span element. Put your styling on that one:
.fusion-main-menu .fusion-last-menu-item a span {
background:#FE6C59;
color: #FFFFFF;
padding:4px;
}
Related
I'm working on a Wordpress site and am not fully following the html and css given to me.
I have a rule that says when a menu item is hovered, make the background of the line item orange and the nested anchor text white:
.dropdown > ul li:hover, .dropdown ul li.current_page_item {
background-color: rgba(255,165,0,0.4);
Then:
.dropdown ul li a, .dropdown ul a { // because there are nested drop down menus
display: block;}
The first rule works the second does not. Using the inspect element feature I notice that when I apply this rule it becomes scored out. When I apply the rule outline: solid 1px to see the nested anchor, it is indeed smaller than the parent line item when my goal is to make it match the size.
Here is the nav: http://jsfiddle.net/hfnjgjxf/
Notice that when you hover over the menu items the text only changes to white when you hover over the center (the inner a tag). The inner a tag should be the same size as the parent so that when hovered, the text turns to white, on any part of the line item.
Hope I'm talking sense. If you view the fiddle you'll see what I mean.
Since the list items don't have explicit width and/or height, we can't change the size of anchor tags properly to fill entire space of each list.
However, you could simply achieve that by adding the padding on anchor tags instead of the list items:
EXAMPLE HERE
.dropdown ul li {
/* padding: 7px 10px; */ /* Remove this declaration */
border: none;
border-right:2px solid lightblue;
background-color: transparent;
}
.dropdown ul li a {
display: block;
padding: 7px 10px; /* Add this instead */
}
It would not be required in this situation to make the anchor element the same size as its parent, but just to apply the effect to the anchor, based on the hover of the parent li. You can achieve that by changing the selector to match the li hover rather than the a hover.
.dropdown > ul li:hover > a {
color: white;
}
http://jsfiddle.net/hfnjgjxf/2/
I'm working on a psd to html and I have an image like so:
So meaning I have a tag with Image. My problem now is how can I design the link in there? Do I need to have a <br /> after the text or what?
<ul id="steps-nav">
<li>
<img src="img/building-details.png" alt="Building Details"/>
STEP 1: ENTER YOUR BUILDING DETAILS
</li>
<li>
<img src="img/electricity-details.png" alt="Electricity Details"/>
<a href="#">STEP 2: ENTER YOUR
ELECTRICITY DETAILS</a>
</li>
</ul>
Here's my CSS:
#steps-container{
background-color:#0a0806;
opacity: 0.7;
margin-top: 43px;
border-bottom: solid 10px #abd038;
}
#steps-container .steps{
width:960px;
margin:auto;
height:50px;
}
#steps-container .steps ul li{
float:left;
}
#steps-container .steps ul li a{
text-decoration: none;
color:#ffffff;
border:solid 1px;
}
#steps-container .steps ul li a:after{
content:"\A"; white-space:pre;
}
Problem 1: You want the image to be clickable with the link.
Solution: Wrap the a anchor around the image and the text, not just the text.
Problem 2: You want the text to be on multiple lines next to it.
Solutions:
a. You could go in the general direction you were trying, directly attaching the image and putting text next to it.
b. You could set the image as a background with padding. The image itself would not be accessible via the alt attribute, but the label does provide that extra information.
http://jsfiddle.net/D4vyM/
This will make the list items in the same line:
#steps-nav li {
display: inline-block;
}
Make the anchor fill up the box created by the list item and make space for the image:
.some-step {
padding-left: 50px;
display:block;
width: 100%;
height: 100%;
}
And we will add styling to the text being focused on, which is also brought to the new line:
.step-focus {
font-weight: bold;
display: block;
}
Use the display property to specifies the type of box used for an element. A simple example of how to make a new line without using br in css.
Example :
a {
display: block;
}
Put <a> tag inside <div> tag. Should do the trick. <div> tags are acceptable inside the li
If you can't use div then use:
a:after { content:"\A"; white-space:pre; }
EDIT
Just use <br /> tag.
How can you set a link inside of a li element to where its background is longer that the actual text and they are all even with one another?
CSS
.popoutsidebar li { margin-bottom: 20px; padding: 5px; }
.popoutsidebar li a { background-color: #E5E5E5; color: #B94A48; padding: 10px; border-radius: 5px; }
.popoutsidebar li a:hover { background-color: #B94A48; color: #FFFFFF; text-decoration: none; }
<a>nchor tags are inline by default. Try something like this:
.popoutsidebar li a { display:block }
The display property lets you define how a certain HTML element should be displayed.
display: block means that the element is displayed as a block, as paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
display: inline means that the element is displayed inline, inside the current block on the same line. Only when it's between two blocks
does the element form an 'anonymous block', that however has the
smallest possible width.
http://quirksmode.org/css/css2/display.html
I am currently working on the following Wordpress site:
http://2013.whitehallrow.com/
It's obvious that the horizontal menu items are not styled properly. I want the "Media" link to fit on the right side of the navbar; how do I go about changing the width of each item so that they will all fit?
I also want the menu items to be centered, so that the margins on each side are equal. My knowledge of the existing Wordpress theme's CSS is sketchy; could anyone give me some guidance?
This is a little "dirty", because it is specific for your menu and for names that have been included in it. But maybe is useful:
.main-navigation li {
margin: 0 30px 0 0;
position: relative;
}
/* For the distance of the first element */
main-navigation li:first-child {
margin-left: 50px;
}
/* For nulling the distance of the first child element */
.menu-item-type-post_type li:first-child {
margin-left: 0;
}
Of course you can do that.
Look in menu css file and find .your_menu_name li a section. Here look for padding and just adjust size.
For ex. if is padding-left:30px; replace 30 with 10 and see you working menu.
You can customize to by adding hover condition like background-color:#CCCCCC;
You can select each menu item by using CSS3 pseudo class :nth-child(N), refer this. Eg.:
.nav-menu li:nth-child(3) {
display: block;
width: 300px; /*Your individual menu-item width here*/
}
To align your menu to center you have to change your css in style.css (line no: 1460) to following
.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
border-bottom: 1px solid #8293FF;
border-top: 1px solid #8293FF;
display: table;
text-align: center;
width: 100%;
}
Variations on this question have been asked many times. Vertical centering with CSS is a challenge.
I have a particular scenario, dealing with a list displayed horizontally. The markup is like this:
<ul id='ul1' class='c'>
<li><a href='javascript:void(0)'>Fribble Fromme</a></li>
<li><a href='javascript:void(0)'>Fobble</a></li>
<li><a href='javascript:void(0)'>Foo Fickle Pickle</a></li>
</ul>
The style is like this:
ul.c {
height:52px;
text-align:center;
}
ul li a {
float:left;
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
line-height:1em;
width:100px;
}
ul li a:hover {
background: #CCC;
}
ul li {
height:52px;
display:inline-block;
}
The resulting list looks like this:
But I want all the boxes to be the same height, and I want the text to be vertically centered in each box. I can set the box-height by adding a height style for the A elements. The result looks like this:
...which is close to what I want, but the vertical-centering isn't happening.
I can set line-height for the text, as suggested in this post, to do the vertical centering. I can even pick different values of line-height for different A elements, if I know which of the elements will get multiple lines of text. But I don't know which ones will require multiple lines.
How can I get it to center when some of the A elements have text that wraps?
Old question, but the answer can now be updated with Flexbox.
a {
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
You could use display:table, etc. along with vertical-align:middle
ul.c {
text-align:center;
display:table;
}
ul li {
float:left;
}
ul li a {
text-decoration:none;
border: 1px solid Maroon;
padding:2px 12px;
background:#FFEF8A;
width:100px;
height:52px;
display:table-cell;
vertical-align:middle;
}
ul li a:hover {
background: #CCC;
}
Example: http://jsfiddle.net/kf52n/2/
I could not figure a way to do this in CSS. I found that I could do what I needed with Javascript, setting the padding-top and padding-bottom to appropriate values at runtime. The technique is to measure the "natural" height of the A element, then set the padding so that the A element is vertically centered.
here is the necessary js code:
function setHeightIntelligently(ulElement) {
var items, L1, i, anchor, availableHeight = ulElement.clientHeight,
naturalHeight, pad;
items = ulElement.children;
for(i=0, L1 = items.length;i<L1;i++){
if (items[i].tagName.toUpperCase() == 'LI') {
anchor = items[i].children[0];
naturalHeight = anchor.clientHeight;
pad = (availableHeight - naturalHeight)/2;
anchor.style.paddingTop= pad+'px';
anchor.style.paddingBottom= pad+'px';
}
}
}
function init() {
var element = document.getElementById('ul1');
setHeightIntelligently(element);
}
In the CSS, one must not explicitly set height or padding for the A elements. Doing that would cause the "natural" height to not be what we need it to be.
The result is like this:
To see it in action, go here.
in the css you have set the height and line-height to the same. Then you will get a rectangular box.
But still you are seeing space in the bottom the reason is due to padding
adding two values in padding adds top and bottom padding
padding: top bottom;
since it is 2 and 12 you are seeing huge space.
try this
height: 52px;
line-height:52px;
padding: 6px 6px; // here you have to tweak and see the output
vertical-align:center;
let me know it is working
line-height:250%; worked for me