Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
This is the page I am working with: https://books.fcostry.cz/
What I am trying to do is hide the searchbox (.vc-searchbox) on hover of the Books logo on the left upper side (.vc-headerlogo).
.vc-headerlogo:hover .vc-searchbox{ display:none; } is not working and I really don't know why.
I would like to do it using CSS but I am open to any solution. Thanks for any answer.
.vc-headerlogo:hover .vc-searchbox{display:none;}
Means that .vc-searchbox nested in .vc-headerlogo will not be displayed when overing .vc-headerlogo
In your page, this is not the case: .vc-searchbox is not in .vc-headerlogo, but after (they are sibling). In that case, use the CSS sibling selector +
In other words,
.vc-headerlogo:hover+.vc-searchbox{display:none;}
should work better
Since you are open to options, use jQuery
$(document).ready(function(){
$('.vc-headerlogo').hover(function(){
$('.vc-searchbox').hide();
});
});
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I am trying to make a better website for my school. So I have it setout like this:
enter image description here
But the main div doesn't show the scroll bar.
I have hidden the scrollbar in the body element, and set it as visible in the main div element.
However it doesn't show, nor can I scroll down in it.
Any answer to this?
I just used overflow-y: auto and that worked. Thanks #JoeDF
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I was just wondering if there's a quick and easy way to make an <li> bullet show at the top of its content instead of the bottom. This is just a simple <ul> with 4 <li>'s. See picture below for reference.
Screenshot
HTML snippet
I figured it out! I just need to add the d-block bootstrap class to the label to override the default display-inline-block CSS of the label.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
When my site loads the view is correct but if you scroll right there is a gap. All div's have 100% width set and no padding on right... I went through each element to putting display:none trying to single the problamatic element but this didn't help either. A test version of the site is available at www.emma-cooper.co.uk
Take width:100%; out of the #logo CSS definition, and the right and left padding off the
div#hmenu definition (make it padding:0.8em 0;)
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I am trying to create a small description tile on a web page and i realized that bold ( tag) isn't causing the desired effect(or any effect at all) on a particular page. This is the code that I am using, which to my knowledge is correct:
<div class="w48 contentBox contentBoxBlue" style="margin:1%;margin:0 auto;">
<img style="width:25%;margin-bottom:5%;" src="styles/images/piggyWhite.png" />
<p class="tWhite tCenter"><b>Pay Per Hire</b><br>Participate for free and pay per hire</p>
</div>
I tried looking around on stackoverflow but couldn't find any similar posts. Does anyone know what the problem could be?
Thanks in advance people!!
EDIT: This may be caused by any overriding css property.
It's possible that it may be being removed by another CSS rule, for example:
.twhite b { font-weight: normal; }
If you are using chrome, right-click on it and choose "Inspect Element", then see what CSS rules are being applied. That will give you your answer.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I have yet another alignment issue that needs to be solved. I'm no CSS expert, so I need the experts' help. I have tried playing around in Firebug but I couldn't figure it out.
Site where this issue is present: http://bit.ly/13KG6dz
(Using bit.ly because IP addresses are not allowed - don't worry its not a virus)
Note that I CAN change any CSS file being called in this page, but I CANNOT change the HTML code of the page itself, because the HTML code is server generated.
The issue is this:
Shown in red in the picture below:
Anyone know how to fix this ?
You should float it like the rest of fields in the group
#option-231{
float:left;
}
label is basically block element.
use any css display property for desired result.
like
.classNameOfLabel {
display: inline
}