I just can't set the height and width of a elements of my navigation.
#header div#snav div a{
width:150px;
height:77px;
}
#header div#snav div a:link{
width:150px;
height:77px;
}
#header div#snav div a:hover{
height:77px;
background:#eff1de;
}
Any ideas what I am doing wrong?
add display: block;
a-tag is an inline element so your height and width are ignored.
#header div#snav div a{
display:block;
width:150px;
height:77px;
}
Anchors will need to be a different display type than their default to take a height.
display:inline-block; or display:block;.
Also check on line-height which might be interesting with this.
Your problem is probably that a elements are display: inline by nature. You can't set the width and height of inline elements.
You would have to set display: block on the a, but that will bring other problems because the links start behaving like block elements. The most common cure to that is giving them float: left so they line up side by side anyway.
From the definition of height:
Applies to: all elements but non-replaced inline elements, table columns, and column groups
An a element is, by default an inline element (and it is non-replaced).
You need to change the display (directly with the display property or indirectly, e.g. with float).
Thanks to RandomUs 1r for this observation:
changing it to display:inline-block; solves that issue. – RandomUs1r May 14 '13 at 21:59
I tried it myself for a top navigation menu bar, as follows:
First style the "li" element as follows:
display: inline-block;
width: 7em;
text-align: center;
Then style the "a"> element as follows:
width: 100%;
Now the navigation links are all equal width with text centered in each link.
Related
I have a problem that I don't understand. Inside parent div I have a link and I want to fill full parent width.
#changePassword {
width:100%;
height:5.28%;
border-bottom:1px solid #a9aaa7;
background:#3c3c3c;
}
#changePassword a {
width:100%;
height:100%;
background:url(iconPassword.png) no-repeat;
color:#FFF;
font-size:1vw;
text-decoration:none;
padding-left:20%;
}
But only fill text inside link. I've test this width a border.
Anchors are inline elements which means, among other things, that they will only be as big as their contents and horizontal padding.
You can change this by changing the display property in CSS. In this case, you would need to set it to block or inline-block.
More information on the display property
Add display:block to a tag class
DEMO
I'm running into a bit of a problem with some code I'm working on. I want the list in the menu to always be vertically centered in relation to the menu div. I've tried various solutions found here but the list always end up at the top of the div. Can it be done? Ideally it must work even if the does not have a fixed height.
and here's the CSS:
you can try converting ul and li elements to display as inline-block elements. And set vertical alignment to middle
ul, li {
display:inline-block;
vertical-align:middle;
}
You can also consider using line-height to achieve this (if the menu is the only thing within the div).
See fiddle here
For example: Add a height of 200px to #menu, and add a line-height of 200px to #menu ul
A common technique is to use the display: table; for the parent and display: table-cell; for the child. Then you can apply vertical-align: middle; to the child.
Here's a code example
You might consider applying display: flex; to #menu.
See fiddle
I have a simple HTML vertical menu, with such a structure:
<div id="menu">
<div class="item">
...
</div>
</div>
I've set the .item div to be rendered as text elements, so they're ordered next to each other:
#menu div.item {
margin: 0px;
padding: 0px;
display: inline;
}
This kinda works:
However, I want to apply a :hover effect on each link, such as vertical black borders will come from sides and connect with the bottom dashed border:
So I did the following:
#menu div.item a{
padding: 5px;
border-width: 0px 1px 0px 1px;
border-color: transparent;
border-style: dashed;
}
#menu div.item a:hover{
border-color: black;
background: #B3D2FF;
}
But the link seems to be bigger than it's parent element. I didn't think this was possible:
What's wrong? Why doesn't the parent DIV stretch to be able to contain whatever's inside?
(not) Working fiddle.
Rest of the CSS:
#menu {
text-align: center;
margin: 0px;
padding:0px;
background-color: #CEE2FF;
border-bottom: 1px dashed #1868FF;
}
Add the following css:
#menu div.item a {
display: inline-block;
}
Before this code, the a tags are not being displayed as blocks and the container doesn't want to be friends with them.
The padding 5px you used on the a tag will be partially applied but only left-right in respect to other sibling inline elements.
You're trying to set padding to inline elements, which is visually not the desired. The padding on inline elements will refer to the textual line, but not in respect to the containing block-level parent.
Remember that padding can be set to block-level elements such as
<div>, <h1>, <p> etc...
One fix is to use some simple math and set line-height to your a
The other is to set your inline anchors as display-block elements,
doing that way your elements will act contextually as inline elements while being allowed to take block-level elements properties.
https://developer.mozilla.org/en-US/docs/Web/CSS/display
http://www.w3.org/TR/CSS2/propidx.html
Also setting just like that an inline any element to be inline-block is not the best choice and is not fully compatible with older browsers.
display-inline for span, a, b, i, s, q, u will work in all browsers,
but generally speaking span is the perfect one to be used in that case cause even if an inline element by properties is similar to div.
https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements
https://developer.mozilla.org/en-US/docs/HTML/Inline_elements
From CSS 2.1 section 10.6.1 Inline, non-replaced elements
The vertical padding, border and margin of an inline, non-replaced box
start at the top and bottom of the content area, and has nothing to do
with the 'line-height'. But only the 'line-height' is used when
calculating the height of the line box.
The height of the block div is the height of the stack of line boxes, which in this case is the height of the one and only line box. Which means that if you want to contain the <a> with padding, you need to set the line-height of the <a> element.
Add to your CSS
#menu div.item a{
line-height:30px;
vertical-align:top;
}
Like this: http://jsfiddle.net/Z63gs/4/
You can try putting overflow:hidden; on your #menu item. http://jsfiddle.net/Z63gs/1/
This will just hide the extra fluff. I think your padding is making the <a> elements larger than you would like.
Elliot's answer is much cleaner than this.
I just did an UL list with 4 LI elements and I did this in CSS:
ul li {
width:200px;/*problem*/
display:inline;
color:white;
background-color:red;
border-radius:5px;
font-family:verdana;
font-size:2em;
box-shadow:0 7px 0 #600;
padding:5px 20px;
margin:15px;
}
The problem is that the width property has no influency with the width of the li element, and if I want to do it larger I have to add padding to the right and left but that is not good because there are different lenghts in each box since some have more letters than others.
Why is that happening?
Thanks,
In order to set block type properties (i.e. width), you'll have to set the display to inline-block on the li element
ul li {
display:inline-block;
}
The selector above will only affect the li element. If you want to style child elements, like a button, you'll also have to set the width property there.
ul li button {
width:200px;
}
fiddle
Since you asked why this is happening - inline elements width is determined by their content so your width css has no effect. Setting the item to display as inline-block or block will make it determine it's width based on your styles rather than the content.
All HTML elements are rendered in one of the following ways:
Block: Takes up the full width available, or a defined width, with a new line before and after. This can be forced using display:block;
Inline: Takes up only as much width as it needs, based on its contents, and does not force new lines. This can be forced using display:inline;
Not displayed: Some tags, like <meta />, <style> and <link> are not visible. This can be forced using display:none;
Inline elements can not have a defined width. Only block element can do this. There is a way to have a block level element to be inline by using display: inline-block. This is much like an emoticon or an image would be displayed in a word document. You can define a width because it is a block, but it will fall inline with the rest of the elements if no width is set. Inline blocks will not respect line-heights, meaning that if an image is inline with text it will adjust the line-height to allow itself to fit inline.
You should use display: inline-block not display: block;
DEMO http://jsfiddle.net/kevinPHPkevin/SyBBu/
ul li {
width:200px;/*problem*/
display:inline-block;
color:white;
background-color:red;
border-radius:5px;
font-family:verdana;
font-size:2em;
box-shadow:0 7px 0 #600;
padding:5px 20px;
margin:15px;
}
I am trying to get a series of <a> tags appear at the base of their parent <li>.
The problem is two fold. If I use position: relative, bottom: 0; has no effect. If I use position: absolute, the <li>'s have overlapping widths.
I can fix the first problem by using the top style, but this is not ideal as the text size is unknown, and the top element measure from the top of both elements (so the base of the element would not hit the base unless I knew the font size).
I can fix the second with defined widths, but this will add unwanted white space on elements with shorter titles.
Here is a JSFiddle of the issue.
Try this bit of CSS:
#main-menu li a{
display: table-cell;
position: relative;
vertical-align: bottom;
height: 111px;
}
jsFiddle of the working style
Add a line-height value to your "#main-menu li a" style and position accordingly, 200px should work.