This is the misaligned output of the code below.
.recipes-mobile-menu {
display:block;
width:350px;
margin: 0 0 0 12px;
}
.recipes-mobile-menu a:link, .recipes-mobile-menu a:visited, .recipes-mobile-menu a:active {
display:inline-block;
background: #002b76;
width:19%;
height:80px;
text-align:center;
color:#fff;
font-size:0.85em;
padding:10px 4px;
margin:0;
white-space:normal;
text-transform:capitalize;
}
.recipes-mobile-menu a:hover, .recipes-mobile-menu a.on {
background:#da2b28;
}
<div class="recipes-mobile-menu">
Extra<br>kick<br>Eats
Louisiana<br>Recipes
Family<br>Favorites
Asian<br>recipes
Winning<br>Wing<br>Recipes
</div>
This fiddle also shows the misalignment. http://jsfiddle.net/muzfuq7t/
My confusion is coming from fact that the vertical alignment seems to change only if I use developer console to change length of text inside the links.
Changing width, height, padding, and margin does not correct the vertical alignment.
What is happening there and how do I correct it?
This is what vertical-align is for :)
vertical-align: top;
Add this to your inline-block elements!
You can use vertical-align:top; to align vertically inline-block elements.
or alternatively you could also use float:left; and add margin:2px;.
DEMO http://jsfiddle.net/muzfuq7t/4/
Related
I need this input field to prepend a # before the hex colour code, like so, as well as horizontally center both the div and the span containers:
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
When I try with the following css:
html, body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
border: none;
background-color:#444;
text-align:center;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
I achieve limited success, in that the hash is at the start and the span and input seem to be centered. The problem occurs when I attempt to set the width of the div, and though the width is set, it snaps back to the left.
So, how can I center the div and the span, while also being able to change the div's width?
Here's a fiddle with the code.
Just specify margin: 0 auto for your div.
html body{
margin:0;
padding:0;
font-size:22px;
color:#fff
}
#color_wrapper{
width:300px;
border: none;
background-color:#444444;
text-align:center;
margin:0 auto;
}
span, input {
border: none;
}
input{
outline:none;
width:85px;
background-color:transparent;
font-size:inherit;
color:inherit;
display:inherit;
}
<div id="color_wrapper">
<span>#<input type="text" value="ffffff"></span>
</div>
Hope it helps :)
Try this
span,input
{
align:center;
}
Hope it helps :-)
I´m trying to put a border-bottom to my ul li a menu element that appears when menu item is clicked.
I already have this effect working, but my border-bottom appears a bit down and its like behind my nav menu.
Can someone give me a little help understanding what is happening?
My Html:
<nav id="menu">
<ul>
<li>Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
My CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
// this boder is behind the menu!
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
My jsfiddle:
http://jsfiddle.net/mibb/Y4HKF/
It's because you set the display:block for your a, so the border will be around the box (which has height set to 46px). Looks like you explicitly set padding-bottom to 0 and then it still should work (the bottom border should be close to the link text?) but not really, because you also set the line-height to be equal to the height (both are 46px), so the text is centered vertically and give a space between the baseline and the border-bottom.
To solve this problem, simply remove the line display: block; in your css for the a tag. You don't need that at all, removing will solve your problem:
#menu ul li a {
text-decoration:none;
color:#ccc;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
Just add the box-sizing:
#menu ul li.active a {
box-sizing: border-box;
}
you set the border to an anchor. an anchor will just take the space of whatever element its in/around,
so setting border to an anchor is like setting it to the <li> itself.
you should wrap your text in the anchor with a span, that takes the space of the text and set the border to the span.
here is an example:
http://jsfiddle.net/TheBanana/Y4HKF/5/
I'm not sure your JSFiddle represents your problem accurately, but I'll suggest a solution based on that anyway.
Your JSFiddle example doesn't show a border on "li.active a" at all (if you remove the green background on the ul element, you'll see that there is no border present.) The reason, at least in the JSFiddle example, is that the comment "// this boder is behind the menu!" was not recognized as a CSS comment, thus preventing the code following it from working. I actually could swear I've seen this work fine in some environments, but it definitely wasn't working in this case.
See this thread on Stack Overflow: Is it bad practice to comment out single lines of CSS with //?
Besides that, your code seems to work just fine (I assume your JavaScript works, so I added class="active" to one of your li tags.)
In the following code, the black border is showing just below the bottom of the ul. If you want to change where it shows up, you should only have to change the height of the a element.
The HTML:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav id="menu">
<ul>
<li class="active">Home</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
The CSS:
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
background:green;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
height:46px;
line-height:46px;
font-family:'arial';
font-weight:300;
display:inline-block;
position:relative;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
/* this boder is behind the menu! */
#menu ul li.active a
{
color:#fff;
border-bottom:1px solid #000;
}
The JSFiddle:
http://jsfiddle.net/mibb/Y4HKF/
I am making a vertical list of links, but I don't want just plain text, I want a background. I have added this, and have set "padding-right" and added 25px. After this, I noticed that the sizes are different depending on text.
I realize that I could just edit it in HTML, but I also want it to change depending on if its being hovered or not.
Also, I tried setting the width, but that did not work.
Thanks in advance.
HTML
<ul id="sidelinksleft">
<li>Quick Start</li>
<li>Tag Helper</li>
<li>HTML</li>
<li>CSS</li>
<li>Photoshop</li>
</ul>
CSS
#sidelinksleft{
width:90%;
margin-left:auto;
margin-right:auto;;
height:25px;
position:relative;
clear: right;
float:left;
}
#sidelinksleft li{
position:relative;
top:2px;
padding-right:20px;
list-style-type: none;
}
#sidelinksleft li a{
color:#777777;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B2FF99;
height:17px;
position:relative;
border:1px solid black;
padding-right:25px;
}
#sidelinksleft li a:hover{
color:#a3a3a3;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
#sidelinksleft li a:active{
color:#00B2EE;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
}
If you remove width:90% from #sidelinksleft and then add the following they will end up as the same size:
jsFiddle
#sidelinksleft li a {
width:100%;
display:block;
margin-bottom:2px;
}
So what this is doing is expanding all a elements out to fill 100% of its parent which in turn is width of the largest child.
FYI You need to apply it to the a element (not just li) if you want the entire area to trigger the link.
Currently, your background color and padding are specified for your a elements, which vary in size depending on their contents because they're inline. This is also why you can't change the width on the anchors - they're inline instead of block.
You'd probably be better off moving your background color and border styles to the li elements, and adding a little margin and width to spread them out. Example:
#sidelinksleft li a { /* remove border and bg declarations */ }
#sidelinksleft li {
background-color:#B2FF99;
border:1px solid black;
margin: 5px;
width: 40%;
}
I'm using a content management system and I have setup the client with a class to make there own buttons by selecting text and applying the class. Now the client wants all the buttons to right align which is easy with a "float:right;" but it appears overlap any content below the button so I was wondering if anyone knows the fix or a better approach to this problem, keeping in mind its within a CMS which just applies a class to a p or span.
.LinkButtons {
display: inline-block;
*display: inline;
padding:5px 10px 5px 10px;
background-color:#00649c;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:12px;
float:right;
}
.LinkButtons:hover, .linkbuttons:hover {background-color:#00718b; cursor:pointer; text-decoration:none;}
.LinkButtons a, .linkbuttons a {color:#fff; text-decoration:none;}
.LinkButtons a:hover, .linkbuttons a:hover {color:#fff; text-decoration:none;}
<p>Text above</p>
<p class="LinkButtons">MORE INFO</p>
<p>Text below gets the button overlapping due to the float floating over top</p>
Ok i've got what you mean.try this jsfiddle. You want the inline block element to clear all space on its left. This can be achieved by adding following rule to your CSS
.LinkButtons + p {
clear: right;
}
This sets all <p> elements, that are next sibling of the said button, to not allow anything on their right. Of course you can modify this rule to accommodate other elements that you expect to appear after the button. Or you can do
.LinkButtons + * {
clear: right;
}
for all :)
Update
Using this technique will not allow multiple buttons on same, use following if you want to put multiple buttons on same line.
/* Replace */
.LinkButtons + * {
clear: right;
}
/* With */
.LinkButtons+:not(.LinkButtons){
clear: right;
}
The rule only clears the right for elements that are no buttons themselves.
jsfiddle
Take a look at this jsFiddle here:
http://jsfiddle.net/a8qqU/
I made a wrapping div that had the inline button as a child. I then used the text-align property and set it to "right" to align the button to the right.
CSS:
.LinkButtons {
display: inline-block;
*display: inline;
padding:5px 10px 5px 10px;
background-color:#00649c;
color:#fff;
text-decoration:none;
font-weight:bold;
font-size:12px;
}
.align-right {
text-align:right;
}
.LinkButtons:hover, .linkbuttons:hover {
background-color:#00718b;
cursor:pointer;
text-decoration:none;
}
.LinkButtons a, .linkbuttons a {
color:#fff;
text-decoration:none;
}
.LinkButtons a:hover, .linkbuttons a:hover {
color:#fff;
text-decoration:none;
}
HTML:
<p>Text above</p>
<div class="align-right"><p class="LinkButtons">MORE INFO</p></div>
<p>Text below gets the button over top</p>
I need to have a single <li> element which has two buttons inside of it as follows:
<li>
The title
</li>
With a layout of the button similar to the following:
____________
|_________|__|
The background would span the entire button, the <a> tag on the left would be filled with text, the one on the right with an alpha transparent button to overlay the background of the <li> element. This is the CSS I've got.
#left ul#main-menu li.li-add a {
display:block;
padding:4px 6px 6px 6px;
text-decoration:none;
color:#fff;
font-size:12px;
margin:0;
}
#left ul#main-menu li.li-add {
height:25px;
margin:0;
padding:0;
background: url('button_back.gif') no-repeat;
}
#left ul#main-menu li.li-add a.left {
width:106px;
float:left;
padding:5px 6px 6px 6px;
}
#left ul#main-menu li.li-add a.left:hover {
background: url('button_back_hover.gif') no-repeat;
}
#left ul#main-menu li.li-add a.right {
float:left;
text-align:center;
font-size:16px;
padding:4px 0 0 0;
margin:0;
height:21px;
width:27px;
font-weight:bold;
}
#left ul#main-menu li.li-add a.right:hover {
background: url('button_back_hover.gif') no-repeat center right;
}
I'm doing a similar thing with all the other list items, except they don't have the "add" button on the right hand side. The problem I'm having is that a two pixel gap is being introduced pushing the other <li> elements down. I'm not sure what I'm doing wrong really. I can do margin-bottom:-2px but all that does is make an area of 2 pixels which isn't clickable in the element below.
EDIT
It was the float actually.
#left ul#main-menu li.li-add a.right {
float:left;
text-align:center;
font-size:16px;
padding:4px 0 0 0;
margin:0;
height:21px;
width:27px;
font-weight:bold;
}
float:left shouldn't have been in there, for some reason doing this causes an extra gap to be created. shrug.
I think your li problem is a red herring. I was able to have the list layout nice and tight by adding:
height: 14px; /* Add to '#left ul#main-menu li.li-add a.left' */
You never specified a height for the left a tag, it's auto height was taller than the 25px specified for the .right a tag. You are setting a height on the li tags, but they are inline elements, not block elements as you've made the a tags. Only block elements can have specified heights. Hope this helps.
Good luck!