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
Related
I want to restrict child tags width without changing css of child tags
https://jsfiddle.net/iqabb/0vt3qx9m/6/
image is overlapping from parent div (Green). I need to restrict image from overlapping parent div without changing css of image tag.
Please give a solution with Only playing with parent div css ,
so that image remian inside parent div
.block-content{
width:400px;
height:100%;
background:green;
position: relative;
}
Issue resloved using code below
.block-content{
width:400px;
height:100%;
background:green;
overflow: auto;
}
Image can be scrolled so it would not effect UI
I am developing a configuration page for my plugin in WordPress. I created an <ul> element inside a <div> element and placed it on my config page. The problem is, whenever I apply margin-right and width:100% to that div it causes the scroll bar to appear, the width of the list exceeds the total width of the page. As you can see at the bottom of the screenshot.
Here are the only styles I am applying (LESS):
div#pworks-popular-posts-list {
display:block;
margin:20px;
width:100%;
ul {
width:100%;
margin:0;
background-color:white;
li {
display:block;
div {
display:inline-block;
}
}
}
}
This is the HTML structure pulled from Chrome Dev Tools:
Could you please help me with this? Thank you.
First of all you don't need width:100%; because a display:block; div will fill its parent's width by default. But if you want to specify it for some reason (or you plan on making it display:inline-block; or something) you can use calc() function like this: width:calc(100% - 20px);.
What's happening is that you are setting the div's width to be the body's width. After that you are moving it so it causes your div to go even further and that causes an overflow-X.
I wouldn't recommend setting a block element width to 100%. Block elements automatically have 100% width of their parents.
I would set a container div with a padding: 20px; instead.
Set max-width:100% instead width:100%.
It will reduce width according to padding.
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 want to create a header with a few words aligned to the far left of the header div and a few words aligned to the far right. I initially did this by creating spans (.headerLeft and .headerRight) and adjusting the alignment for the portions I wanted aligned. However, this creates problems if I want a background-color for my header div. Is the best practice solution here to simply add a little inline CSS styling, or is there a better way?
My Code (example)
HTML
<div class="header">
<span class="headerLeft">Welcome to .</span>
<span class="headerRight">Login | Register</span>
</div>
CSS
.header {
width:100%
position:fixed;
top:0;
margin-top:0;
background-color:red;
text-color:#C14000;
}
.headerLeft {
float:left;
text-align:left;
}
.headerRight {
float:right;
text-align:right;
}
#header {
overflow: hidden;
}
This code will fix your problem. The height of #header will automatically take the height from the tallest element inside #header.
Another way would be to manually set the height for #header.
You don't need to style sth inline :)
You need to set the overflow attribute for the header class to force it to wrap around the inner spans. see http://jsfiddle.net/PsychegoPro/rnDT8/
You need to clear the floats in order for the div to have actual height.
This can be achieved by using clearfix. What is a clearfix?
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.