I'm trying to edit the revolution slider plugin on my wordpress site. My images (slides) are not left aligned in the slider div. I found out where I can fix it using Firebug, and I know how to enter it into the custom css on wordpress, but but don't know the exact syntax to designate the proper div/id/class etc.
Video:
http://youtu.be/oyYrKAAAe80
Page in Question:
http://www.billyjacksdesign.com/design-work/the-living-logo/#htbanchor
I made the background of the slider red so the area I'm talking about is obvious, if you look at the other two sliders, you'll see that same area is white, but the div's shadow continues to the left margin--this misalignment is what I'm trying to remove.
Thanks for any help.
Adding the following to your stylesheet should work:
.rev_slider ul {
margin-left: 0;
}
Since the ul tag has a margin-left of 15px, but it doesn't have a class/id, you will need to go up a level which has a class rev_slider. Since the ul is in that class you can used .rev_slider ul
Related
So we're using Cherry Frameworks (ugh) with Wordpress. The third-level navigation is getting cut off. I've tried manipulating the CSS to fix the issue to no avail. There's no option in the framework.
The problem resides in the Services menu. Resize your screen smaller to view the issue.
My solution is to push the third-level nav to the left side instead of the right side. Thoughts on how to do this?
http://dev.torontofamilytherapist.com/
So using chrome's inspect element, I was able to figure out what needed to be changed:
#topnav li .sub-menu .sub-menu {
left: 100%;
margin: -10px 0 0 2px;
}
changed to:
#topnav li .sub-menu .sub-menu {
left: -100%;
margin: -12px 0 0 2px;
width: 100%;
}
The result:
As you can see the items are appearing on the left, but you'll need to do some css tweaks to get them to look juuuust right.
Here's how you can troubleshoot CSS issues like this using chrome's developer tools:
Right click over the offending element, in this case: we are looking at "Services", then select "Inspect Element":
You should now be inspecting the current CSS like so:
Now since these items are appearing when you hover, you'll have to 'force' a hover state.
This is where the fun begins. You'll have to make sure you find the right elements to force the hover on. I actually had a little struggle with this, so I ended up adding the force hover state to many other elements until it finally appeared (the green menu)
Repeated the same process to get the third tier menu.
Now you right click on the actual menu and select "inspect element" again - this time since the menus are FORCED HOVER, the item will stay selected when move the mouse away and you can finally see the actual CSS.
It was actually harder than it needed to be, as the theme really has some counter-intuitive settings to show these menus (why not just on hover?? it really felt like on multiple items hover..)
I have been given a design to implement that requires a horizontal menu like this:
http://i.stack.imgur.com/jccZD.jpg
The tabs should have an active / hover colour and javascript is ok. Should work on ie8+
Usual Section > ul > li > a HTML structure.
I have done a bit of looking around and cannot find any examples. Is it possible / sensible or should I tell designer to go back to the drawing board.
Cheers
As Hashem recommended, you can use CSS Triangle. You posted a codepen but noted that the text was outside the "border" of the < li > element. In the past, I've overcome this by making the padding on the left / right side equal to that of the border and use no top/bottom padding. That causes the text to fit within the < li >.
padding:0 50px 0 30px;
Sorry, I am a brand-new user so I was not able to comment hence a new "answer" to the existing thread. Hope this helps!
This problem is only showing up in IE7. Other browsers and IE8 and above work fine.
I am using a sprite map with an ul for my side navigation. There is a fly-out submenu for one of the li elements which also uses a sprite map with an ul for downloading various PDFs.
If you look at the image that I've attached, the submenu is appearing in the correct location, but it's pushing down everything below it. (The word "Music" should appear directly below the word "Menu".)
I have tried various fixes using a display: inline; element and position: static; element, but my attempts have failed. Would really appreciate some help on this. The website address is: http://www.graysonmain.com/
You could use a fixed height, height: 58px and display: inline-block for li#nav_02.
Have you looked into overlays with CSS? I'm very new to this so I, personally, can't give you a concrete answer, but it might be possible to set the positioning of the submenus and toggle the visibility with an onClick() command.
http://jsfiddle.net/gUckp/
In the above demo, I'd like to show an orange round image BELOW the center of menu item when it is hovered.
However I am not able to show all the image. The bottom is cut.
How can I do it with CSS?
Thanks in advance.
When using display:inline; on the li items, the height attribute you've given is ignored. Put the :hover on the li items istead of the a tags and it works. The height and line-height you've used becomes superfluous.
Updated jsfiddle
Your a tag needs a block specification.
See: http://jsfiddle.net/gUckp/16/.
Note the line display: inline-block; for the #nav a class.
The reason for the image not displaying correctly in your sample is because it was being placed outside of the a tag rendered block size.
EDIT
Firebug helps tremendously in resolving these types of issues. It allows you to inspect elements etc. I'd suggest adding it to your development toolkit.
background: #01291e url(http://demo.chevereto.com/images/hoverorang.png) no-repeat 50%;
See the updated jsfiddle.
Edit: O sorry, that's not what you asked for. Will try again... ;)
Edit 2: Hereby the correct one.
Edit 3: Or this one with a nicer focusrect size. Enjoy!
I have been trying to add another button to my navigation bar at http://hawaiiislandpreservationsociety.org/ ,but the layout messes up. What do I need to tweak to get it inline with the rest of the buttons?
Much Appreciated,
Azeem
#header ul
change the width to 802px;
(then download Firebug)
adding 2px (making it 802px) to the #header ul makes it display correctly for me in firefox.
You mean the problem that "Blog" ends up on its own line? It seems like #go_learn has a padding defined which, combined with the width definition of 200px, ends up making the element actually 202px wide.