If my layout is
BUTTON
TEXT
I'm trying to create room between BUTTON and TEXT. Trying something like
.bottom-gap {
padding-bottom: 150px
}
Only seems to increase the height of the button
Padding is applied to the inside of the element. To add a margin to the bottom of the element, you need to use margin-bottom: 150px. I'm assuming your button is an actual UI <button> element. If not, you need to make sure it's displayed as an inline-block.
Related
This is what I tried.
CSS:
div#Layer3:hover div#Layer3copy
{
display: inline-block;
}
HTML:
<div id="Layer3"><img src="images/Layer3.png">
<div id="Layer3copy"><img src="images/Layer3copy.png"></div>
</div>
I want this div to be hidden and when hover another div it appear, however, its working OK,
But moved a little bit from it actual place,
is there a solution for it?
Alright, first you need to know display,position and pseudo state properties of CSS
in your snippet #Layer3 is wrapping #Layer3copy so we can invoke it on hover state by using direct child selector i.e
#Layer3:hover > #Layer3copy{
/*Do your things here*/
}
working example: https://jsfiddle.net/ishusupah/eupfr101/
In this example as you wanted i am using #Layer3copy display:none and on hover state i am making it display:block.
you can display and position however you want.
You are not hiding/showing any div. What you are actually doing in the code above is when Layer3 div is hovered on, you are changing Layer3copy div style to be inline block - and that's why it is moving. A div is by default a block element - which means it is taking up a full width of a row. When you change it to an inline-block you are "telling" the div to align next to another element if there is enough width in a row, and not take the full width - that's why the div is moving next to the parent div.
You also need to modify your selectors to achieve your requirement.
To actually achieve what you want (hiding and displaying back the Layer3copy without it being moving), use this CSS code:
#Layer3 #Layer3copy{
display: none;
}
#Layer3:hover #Layer3copy{
border: 3px solid red;
display: block;
}
The first selector is giving the default definition when layer3 - the container div is not hovered - in which the child Layer3copy div is not displayed (display:none).
The second selector is saying when layer3 is hovered apply styling to Layer3copy and turn it to display:block - which is the default display for divs (they are block elements) - this it is getting displayed and staying it its initial position without "movement".
Here is a working example with the above code.
I've additionally added a thin red border to the inner div, so you'll see what i mean in a block element - which is taking the entire width of a row.
try using this
#Layer3:hover > #Layer3Copy {
position: absolute;
display: inline-block;
/** Postion of your div **/
}
Try to adjust the position until it is placed wherever you want it to be in.
I think you want to be like a tooltip or something
I'm currently working on a site that requires slideshows, and I'm using the bxSlider script. The way it works right now is the code finds a span id="next_1" and span id="prev_1' and inserts a <a href=''>+</a>. I've got it setup so the span elements are white boxes, and when hovered will go black. The only clickable element is the + inside the span. I'm wondering how to resize the <a> element to fit the entire span element.
Here's my code.
In the CSS you can select the <a> tag and add display: block and padding: 8px and remove those properties from the .button class. Hope it helps you. Thanks.
Is there a way to limit the width of an "a" element? I'm using "a" elements as toggle buttons, but the blank space to the right of the "a" element remains of the pointer cursor style, which I do not want. Here's some code:
HTML:
<a class="ChartLink" id="CapstoneLink"> Global Leadership </a>
CSS:
.ChartLink, a {
padding: 10px;
cursor: pointer; }
All of the white space to the left of the text remains of the pointer cursor. How do I limit the length of the text to just the text?
As you commented, I guess what you need is margin and not padding, because padding is counted inside the element whereas margin is counted outside. Learn CSS Box Model and you will get the concept.
Demo
.ChartLink, a {
margin: 10px;
cursor: pointer;
}
Well, your question explains something different, and your provided markup is different so I assume that you are nesting div element inside a as if it's just a than the white space won't be there as it's an inline element by default.. And since div is a block level element by default you need to make it inline.
Demo
a.ChartLink div {
display: inline;
}
What you are doing
What you want to
Though we are making div element inline here, it would be more preferable to use span instead.
I have a three-column page. Each column is a div with the following styles:
.Row1 {
text-align:center;
display:inline-block;
vertical-align:top;
padding:0.5%;
width:31.5%;
}
The HTML is as follows:
<div class="Row1">
<h2>Header</h2>
<br />
<form>
Form stuff goes here
</form>
</div>
My form consists of nothing more than a text field, a few radio buttons, and a submit button. Problem is, putting the form into the above code will give me a centered form, with the text field, radio buttons, and submit button also aligned in the center.
What I am trying to do is to just center the form itself (as a container), but keep everything aligned to the left.
I have tried wrapping the form in a div that is text-aligned centrally, and the form style set to left align, but that didnt work. The auto margin thing didn't work, either, whether it was on the wrapping div, or on the form, without the wrapping div (that is, an extra div. the Row1 div always remains).
EDIT: http://jsfiddle.net/pJwqe/
text-align is not a property to 'align' divs or forms; instead, as it says, it aligns text.
If you want to center a block-level element, you'll have to use margin. The default way to center a single element with margin is to set it , for example for a top-level container, to margin: 0px auto 0px;.
If you want a lay-out with 3 columns, I'd rather think you'd want something like this.
You can style the margins of your divs by setting margin-left or margin-right, then style the first/last element with advanced selectors (so you don't have a margin-left for your first element, or a margin-right for your last).
As you can see, the forms are now centered, but their content is not. (You need to give your forms a width, else they will fill the containing block by default if they have content).
NB: It might be relevant in the rest of your code, but in this test-case vertical-align does nothing.
Hope this fiddle link will work for you. I have done the following changes in your css
.midAlign form {
border: 1px solid #C2C3C0;
margin: 0 auto;
padding: 10px;
width: 155px;
}
I have a single column table with multiple rows some of which have a-tag links in them, the others just plain text. I can change the height of any cells except the ones that have a-tags in them; they remain unaffected.
#table tr td{
max-height: 20px;
}
This code changes the height of all the cells to 20px except the cells that have a-tags in them. They remain around 30px or so no matter what I do. How can I get the height of those cells to change too?
Define display:block is your <a> tag because <a> an inline element. An inline element did not take width , height ,vertical margin & vertical padding
Try overflow: hidden
If that doesn't work, please post some of your markup or make a jsfiddle :)