Im trying to create a menu where all links have a background associated with it, and displayed in an inline format. I want the widths of these elements all to be the same, but I have having a hard time trying to figure out how to do this, as the width seems to be based on the text length, padding does not seem to help with this issue as the text length varies. Any help would be greatly appreciated. Example JSFiddle:Here
Example:
HTML
<div id="menuLink">Fuzz</div>
<div id="menuLink">FuzzBuzz</div>
CSS:
#menuLink{
background:#cccccc;
display:inline;
width:200px;
height:50px;
}
inline elements are not affected by width statements.
Just make them inline-block.
.menuLink{
background:#ff0000;
display:inline-block;
width:200px;
height:50px;
}
<div class="menuLink">Fuzz</div>
<div class="menuLink">FuzzBuzz</div>
JSfiddle Demo
Note: You can't re-use IDs on the same page so I converted those to a class.
You may achieve the same thing by changing your html structure to the most adopted practice of using ul li for navigations.
<ul>
<li>Fuzz</li>
<li>FuzzBuzz</li>
</ul>
Same styling is still valid:
ul li{
display:inline-block;
width: 200px;
background-color:red;
height:50px;}
Related
I have bootstrap navbar and i want the links in the top of the list item
<li>
<a class="menuLinks" href="http://news.bootswatch.com">Blog</a>
</li>
CSS:
.menuLinks {
vertical-align:top;
}
I tried this too:
.menuLinks {
position:absolute;
top:0;
}
and it didn't work too.
How can I do that?
Try to add this properties:
display:table-cell;
height:40px;
vertical-align: top;
Need more information to know what you want to do. If its positioning the element, you can change that in your css with margins etc. Or if you want it above other elements then you need to move the html code above those elements. If you display more of the code it might make it easier to help you.
I'm using third party libraries like Kendo which output various types of HTML elements when they render.
So you might end up with a scenario such as this:
<ul>
<li>
<label>label text</label>
<div>muli select widget</div>
<span>date selector</span>
</li>
</ul>
NB! Assume I don't have control over the HTML rendered from these widgets/third party tools.
The problem is vertical alignment for the scenario above. I've created a JSFiddle which shows how the label doesn't vertically align properly. See here:
http://jsfiddle.net/tMJFF/
How would I get all three these elements to vertically align perfectly?
Use inline-block property on all elements
label,
.div-input,
.span-input{
display: inline-block;
vertical-align: middle;
}
http://jsfiddle.net/6vQ4Q/
You mentioned Kendo, so I'd recommend using whatever selectors they have decorating the ul and do something like :
ul.kendo-selector-class-of-choice li * {
vertical-align: middle;
display : inline; /* for lte IE7 only */
}
Since you aren't in control of the elements being created, this could change with different implementations/version updates of the decorating client side library (in this case Kendo). The * covers that and although arguably a hungry selector its scope is limited by the .kendo-selector-class
The below works in Chrome and IE10, but jsfiddle a bit tricky to browser test for IE8 since it doesn't render properly itself... but if you do test further you'd find you'll have to use something like display:inline if you're going down to the lovely land of IE7-.
http://jsfiddle.net/tMJFF/11/
Simply add vertical-align:middle;
Here is referenced Fiddle
label {
vertical-align:middle;
line-height:20px;
border:1px solid blue;
}
.div-input {
vertical-align:middle;
border:1px solid black;
margin-right:20px;
display:inline-block;
height:20px;
width:100px;
box-model:collapse-box
}
.span-input {
vertical-align:middle;
border:1px solid black;
display:inline-block;
height:20px;
width:100px;
}
label {
line-height:20px;
border:1px solid blue;
vertical-align:top;
}
vertical align all elements in li to middle.
ul li *{
vertical-align:middle;
}
vertical-align css property aligning your tags vertically so simply use :
label,div,span{
vertical-align :middle
}
DEMO
I'm trying to get li elements in a ul to have equal width, and fit on one line, with CSS, without knowing how many lis there are when the CSSis made (i.e. dynamically generated HTML).
W3Schools has a navigation bar example, but it's fixed-width, and if you add another li rather scaling to fit, the whole layout gets thrown off.
This is their example:
CSS:
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#7A991A;
}
HTML:
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Ideally, I would be able to add another li and the menu would still display great.
Even thought I hate this solution... if you really need it to work with just HTML/CSS and auto-update width, a table would do the trick.
Otherwise I would recommend just having some simple JS updates the widths for you. If you are adding the extra options via JS it would be easy to toss this in.
EDIT: Actually, depending on your targeted browsers. You could use the display: table stuff but it is limited to IE8+.
DEMO
You will have to do this with javascript I guess...
you could use javascript to get the window width and the number of list items. If you have these you can assign a fixed width using javascript.
I'm new to the html & css design. I have following design of css-
span.menu a:link, span.menu a:visited
{
display:block;
font-weight:bold;
color:#0000CC;
background-color:#E8EEFD;
text-align:center;
padding:4px;
text-decoration:none;
width:70px;
padding:5px;
border:5px solid gray;
margin:0px;
}
I want to place three link by using tag which should be shown in the following manner-
Calls Customers Venders
and i want to treat them as menu for this they should be placed in horizontal manner. But when i'm running my css design then they placed in the vertical manner like -
calls
customers
vendors
how to do this?
thanks.
Try using display:inline-block if you want to be able to set the width and have them inline.
This won't work with Internet Explorer 6, an alternative would be using float:left. However, this can have complications as the elements will be removed from the normal flow and if there is no other content in the parent element then its height would be reduced to 0. This could be overcome by adding overflow:auto to the parent
Instead of display: block use float: left.
add the css properties float:left
I have this code :
<a class="botton_menu" href="#">first</a>
<a class="botton_menu" href="#">second</a>
<a class="botton_menu" href="#">third</a>
a.botton_menu
{
padding:0 14px 0 7px;
font-family:Arial;
font-weight:bold;
font-size:50px;
line-height:45px;
background-color:#FF0000;
color:#781a77;
margin-bottom:3px;
height:46px;
letter-spacing: -3px;
text-decoration:none;
display:block;
}
and I'd like to have that red background color as long as the text, not until the screen size (display:block).
How can I do this?
The display:block; is what it causing it to stretch out like that.
Solutions:
Change from display:block; to display:inline-block; (or even use the default, display:inline; what's the reason for you setting it to block in the first place?)
Use float:left;.
Manually set the width property.
Obviously the third option only works if you know what width you want. The other two solutions will cause the elements to be positioned next to each other, rather than stacked. In both cases, you'll need to tell the next element to drop onto the next line.
With display:inline-block; or display:inline;, this can be acheived with a line feed; either a hard-coded <br> tag, or in CSS, using the :after selector, and adding a line feed there. With float:left;, you'd need to add use clear:both;.
You have to create an element in the a element: jsfiddle
<a><span>foo</span></a>
If you insist on having your a elements display:block you need to have them float:left and then clear them. Then the background/element will be as long as the content.
use display:inline-block; and put <br/> between tags, this will solve your problem.