Im doing this web with Wordpress and one theme but i have a problem with a transition to the submenus.
If you can check the "QUÉ HACEMOS" submenu, you will see that when i try to click on an element of submenú if imposible by the margin top, do you understand ?
If i delete the 38px margin top of sub-menu class no problem, but I need that the submenú start and header border but i have this problem that i cant fix, please help.
Thanks a lot.
Find the following definitions in your CSS and edit respectively
.main-nav > li > a {
margin: 0px;
padding: 37px 25px;
}
li:not(.dt-mega-menu) .sub-nav {
width: 280px;
margin-top: 1px;
background: #043349;
}
Related
Basic css question here.
Every time I press "Check all", the button populates with the names from a list (which is fine).
The issue is: The button width itself expands and gets bigger. I want to keep it fixed. Furthermore, how can I set a limit to the number of list items it can show? So for example, if there are a lot of items, after "test 5", a "..." should appear.
By the way: this is all in my custom.css, .btn-default is actually from bootstrap, but I wanted to change some things in my multi select-class. I changed caret margin because the caret was right beside the text, I wanted it to be to the VERY right, maybe that's what's messing everything up??
custom.css :
.sv-manage-multiselect-dropdown {
.btn-default {
background-image: none;
border: 1px solid #ADA9A9;
padding: 6px 8px 1px 8px ;
}
.btn .caret {
margin-left: 160px;
margin-bottom:5px;
}
}
Html:
<td class="col-xs-2">
<am-multiselect class="sv-manage-multiselect-dropdown"
ng-model="Mylist.names"
options="Names.name for link in Mylist"
multiple="true"
ms-selected="{{Mylist.names}}"
</am-multiselect>
</td>
Before:
After:
Have you tried using max-width in your css?
max-width: 40px;
For example.
Hope this helps!
I looked in angular-multiselect/src/multiselect.tmpl.html, adding this css should work, 10px is just for the example, put width and height of the checkmark, like this <i> will fill same place even if it's void:
.sv-manage-multiselect-dropdown {
ul.dropdown-menu > li > i{
display: inline-block;
min-width: 10px;
min-height: 10px;
}
}
In this site http://rgdev.realtyguard.com/ In "Find your dream home!" section I am having problem with dropdown which is cut down when I click on it.
I would like to see the div above the main div.
Find out the following attachment
Please help.
Thanks.
There is a padding and margin on ul.chosen-results which means that the items dont reach the edge. To remove this all you have to do is add this to your css:
.chosen-results {
padding: 0;
margin: 0;
}
You can set margin-right: 0 to:
#ihf-main-container ul,
#ihf-main-container ol {
margin-top: 0;
margin-bottom: 10px;
margin-right: 0;/*add margin right 0*/
}
Site: http://stagingsite16.info/
Screenshot below:
Problem:
As you see on the screenshot, there is a gap at the bottom of the page. (I applied red background so that it can be seen immediately.)
I tried applying this code:
html {
margin: 0;
padding: 0;
overflow: hidden;
}
but still it doesn't solve my issue. Any help is really appreciated! :)
You have to place the div of the footer outside all the other divs , and then add:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 0px;
margin-bottom: 0px;
}
you had this before:
div#builder-module-537dadf9ae69e-background-wrapper
{
background: #2c2c2c;
color: #fff !important;
padding-top: 20px;
}
But you have to move the div outside the other divs!!
I've used this in a user style sheet locally and it seems to fix the problem:
.builder-container-outer-wrapper {
margin-bottom: 0px;
}
div#builder-module-537dadf9ae69e-background-wrapper.builder-module-background-wrapper.builder-module-footer-background-wrapper.builder-module-6-background-wrapper.builder-module-footer-1-background-wrapper.builder-module-bottom-background-wrapper.builder-module-last-background-wrapper.builder-module-footer-last-background-wrapper.builder-module-after-widget-bar-background-wrapper.default-module-style-background-wrapper {
margin-bottom: 0px;
padding-bottom: 1.5em;
}
Another thing to consider: CSS applies the style which is most specific to the element. The html { ... } element is the one for the whole page (including the tag), so it will be the least specific rule for the element you want to apply your style to. It is likely that a more specific style (such as div.builder-container-outer-wrapper) is applying the margin somewhere else in your CSS, and you'll have to fix it there. (See http://css-tricks.com/specifics-on-css-specificity/ for an explanation of how the specificity rules are applied.)
Anyway, hope that helps.
.builder-container-outer-wrapper {
margin-bottom: 0;
width: 100%;
}
This is the container which has the margin-bottom.
I am working on one website so i have given CSS div hover effect on shopping cart link in the top menu...
Once you will add one product in the cart than hover it in the top menu on shopping cart link that hover div is not working properly when i hover that its come and sudden disappear not getting the exact bug....
So pls try to find out the bug.....
I am talking about this bug once u will see attached image...
Here is the website link :- http://www.aurikjewels.com/index.php/
Thanks in Advance
hover is not working as expected and dis-appears as you move out of the header-items because of the below property,
.block-cart-header #header-items
{
padding:15px;
}
if you give padding-top:0px; and add margin-top: -10px this issue will not occur.
Add margin-top: -10px; to header-items div
By simply moving the cart like so, into the button-show :
<span class="button-show">Shopping Cart
- <div id="header-items">
All cart informations
</div><span class="price">Rs. 37,212.00</span>
</span>
And adding a height to your button-show :
.block-cart-header .button-show {
background: url(../images/shopping_bag.png) no-repeat right center;
color: #FFFFFF;
float: right;
font-size: 12px;
margin: 5px 14px 0 0;
padding-right: 20px;
position: relative;
height: 24px;
display: inline-block;
}
this works for me !
The problem was .button-show do not have enough height to hold the event-hover.
Once the cursor moves away to gap between .button-show and #header-items, the hover dies.
and #header-items fades.
To overcome this problem, you have to do few things like
Add padding-bottom: 10px; to the class="button-show" as inline style
The line will look like <span class="button-show" style="padding-bottom: 10px;">
Add background of .block-cart-header .button-show as url(../images/shopping_bag.png) no-repeat right 1px
Hi all i have sorted out the issue....
I have removed the
.block-cart-header .actions { display:none !important; }
And now its working fine...
Thanks for all for your great support... :-)
I am trying to look at this page in Firebug:
http://128.48.204.195:3000/
What I am trying to do is make the top-right area with login/signup be all the way to the right, but I am not sure how to do it. I tried to I surround that stuff with its own div called site_login but it didn't seem to do the trick.
Any idea how to put that stuff on top right further to the right so it looks a little more proportional and symmetrical?
Here is what my css looks like:
.banner .site_login {
height: 20px;
position: absolute;
float:right;
right: 0.5em;
top: 0.5em;
color: #fff;
}
.banner .site_login a
{
color: #fff;
text-decoration: underline;
}
.banner .site_login a:hover
{
color: #ff0;
}
Thank you!
Looks like you accidentally commented out the closing div tag </div>
Get that back in there (un-comment it), then position it absolutely (you'll always want it in the same place):
.site_login{position:absolute;width:300px;text-align:right;padding:10px;}
.banner{position:relative}
As Faust pointed out, you forgot your closing div tag </div>. Also, I added a float:right and it seems to work the way you are asking for. Check it out.