the button are wrapped in a inline-block, but I want to make it align to right. when I do float: right, part of it disappeared
html:
<div class="card answer" id="answer4" href="#answer4">
<div class="btn-text-inline">
React Generated HTML
</div>
</div>
css:
.btn-text-inline {display: inline-block;}

before adding float:right
after float:right
I would advice to add a custom background-color css property to every single element on your website to actually be able to see how much space does each of the elements take. Maybe the buttons are hidden behind another element. In this case, probably behind 'add comment' element
If you know how to use developer tools in your browser, you can achieve the same by opening developer tools and hovering over the elements of interest.
Related
I'm wondering if the following is possible. Have a <button> enclosed in a <div> which is enclosed in a parent <div>. On hover of the child <div> have a dropdown info panel that displays information like email and phone number. I've been working on this for a while (see my fiddle link below), but I can't get the drop down to appear anywhere outside of the parent <div> and moreover, the drop should appear directly below the button as opposed to on top of the button itself.
The button name is "Contact"
https://jsfiddle.net/wtj51d2f/5/
Your .navbar class overflow:hidden is preventing from content going beyond, I just try removing that value, and adding some top: 50px on your .drop-content class, and it is showing good.
The .drop-content has to be a child of the .dropdown element in order to be directly manipulated by it in CSS. You can use JavaScript or jQuery to accomplish this effect, or refactor the page so that .drop-content stays within the .dropdown div.
This is what the jQuery might look like:
$('.dropdown').mouseover(function(){
$('.drop-content').show();
});
I have a link wrapped around two divs which are animated on :hover. In Firefox the link works fine and jumps to the right anchor. But in Safari and Chrome the links only work if the first of the two divs inside the < a>-element is clicked.
<li>
<a href="#work" class="inaktiv">
<div class="work1">a</div>
<div class="work2">b</div>
</a>
</li>
Here is a working jsFiddle: http://jsfiddle.net/26HgM/6/
Could anyone tell me why it is not working properly? Thank you!
The problem is you're rotating the <a> so it's facing backwards which webkit is interpreting as no longer being a link that can be interacted with.
One thing you could do is instead of rotating the link itself, add a container div inside the link and rotate that.
http://jsfiddle.net/26HgM/6/
The problem is that <a> is an inline element, while <div> is a block-level element. Inline elements cannot contain block-level elements according to the HTML standard, but browsers try to do it anyway--so we get buggy implementations. You will have to:
put the links inside the divs, and have two links, or
make the container a div and make it clickable with Javascript
Here's more on block-level vs inline: http://webdesign.about.com/od/htmltags/qt/block_vs_inline_elements.htm
On my wordpress built site, with a Responsive theme child theme, there is a div which contains widgets.
The widgets and their content are showing fine, but the "wrapping" div is not showing what I have styled via css. If I use firebug, I can see that the div is appearing up at the same spot as another div "featured", but is obviously behind it. Well, I need it to be below.
The site is http://thelawcompany.com.au.
The problem div is <div id="widgets" class="home-widgets">. I want the background and top-border that I have declared in CSS to appear behind the widgets. Also, there is a massive gap below the widgets that I can't seem to get rid of.
It because the #featured element is floated.
A solution is to float the widgets also by adding the class grid
Demo: Problem, Solution
<div id="widgets" class="home-widgets grid">
This is what I am trying to describe as my problem, you can see the white content box just kind of stops:
Link to image as I cant put images on here yet:
http://imageshack.us/photo/my-images/534/43094999.png/
The image loaded for that background apparently isn't long enough, and I am not sure how to repeat it down so it all flows.
Here is a peak at my css if that helps in solving the problem:
http://pastebin.com/RwcAPjS5
You need to clear floats after the list of boxes. You could do this with an extra element, or by adding the clear CSS property to the next sibling element (note that this stops some margins working).
.clearfix {
clear:both
}
Then in your HTML (the ul is just a guess as I haven't seen your HTML):
<ul class="float-boxes">
<li>...</li>
</ul>
<div class="clearfix"></div>
There's a good article on floats here, which touches on why this happens.
I havee been looking at the source and stylesheet for the following address to work out how you can make a ... be "surrounded" by a broken horizontal rule. At the page http://www.joindiaspora.com/ there is a navigation menu having an example of it. In the html source there is used no tag so I am thinking it must be done using the styling, but I can not work out how to do it. Ideas ?
Yes, it's with CSS, not an HR. There's a border-bottom on the #header DIV, and the #floating_nav is simply positioned over it. That nav contains a SPAN with a solid white background which covers the middle part of the border.