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!
Related
Hi so I am working on creating a wordpress template from an existing static website.
However I can't seem to get the CSS for the menu to work correctly.
I need a style that is applied to the menu to be applied to all of the li and not have to code each one individually.
The problem is I want to add a background-color to each item (making them look like buttons). If you look at the site again, it puts a huge box rather than putting a small background-color to each item. I hope that makes sense.
You can see the site here: http://lawrences.work/
First, remove your width:149px; on #menu-menu.
Second, on #menu-menu li, remove all margins, and try apply this code
# menu-menu li {
background-color: #FFC0CB;
display: inline;
padding: 10px 20px;
}
Alright, so I've checked it out and it appears to be that the div#logo is causing your menu to be vertically stretched.
I'm not entirely sure as to why since I didn't scan all the CSS or couldn't find anything related to it directly.
Either way I do have an explanation for what actually happened anyways.
So this div.menu-menu-container in your HTML is lexically positioned just below the div#logo - if you inspect element on them you should see highlighting overlap when hovering between the two.
An element that is float: left basically has no height. It is sort-of removed from the document flow unless the div below it has clear: both or the parent has overflow: hidden - both which have their own nasty side-effects.
Anyway, this div#logo caused your div.menu-menu-container to stretch vertically because the div#logo was floated and your div.menu-menu-container wasn't causing it to be quirky.
To fix this I added one property to div.menu-menu-container which should not harm your layout in any way except for keeping these floated elements out of your way.
the property clear: both allows you to clear a float so that the document flow after it turns back to normal. This shrunk your menu down to the size it's supposed to be in the position it's supposed to be in.
EDIT (18-11-2015)
I actually had a choice of using clear: both or float: left - both fix the issue since all floated elements do think about each other, just not about the non-floated elements as much.
clear: both however is the nicest solution in this case because it doesn't change the behaviour of that element specifically whereas floating it does.
Also, the snippet you're going to need for your code to work:
.menu-menu-container {
clear: both; // or float: left; for that matter
}
For more reading on MDN / css-tricks
float
clear
css-tricks on float
Hope this helps you understand your issue, if you need more information I'll see it in the comments!
Good luck
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
I am having problems with the text input in firefox, it has some margins and I can;t get rid of them, maybe that space is not a margin?(it is outside the border of the input so it looks like a margin).
In the image above the width of the input is set to 100%,,margin and padding is 0, also i tried setting -moz-box-sizing: border-box;
I would like some resources or an explanation to make me understand what is that space and how can I get rid of it?
Thanks.
Edit1:
Here is my current test page
https://www.designersbookshop.com/support/test.html
also i made a copy in ...test_2.html (i will try the suggestions on the test.html),
Check the inputs on left side.
Edit2:
My Firefox version is 10.0.2
Here is how an input element looks like in firebug, it is clear that a margin or something similar is painted outside the border(or i am stupid but I want to learn)
in the image above the border of the input is the small line(1px) visible on left and right of the input.
Edit3 I figure it out, is the border, I am on Ubuntu but I has similar on Mac,so it is the theme engine that adds that white border?
You're using OSX right? I think what you are referring to is the focus highlighting. It's only seen on the active element, right?
Normally that is controlled by
input:focus {
outline: none;
}
Some people use it to remove the rectangle around links as well. which is a bad practice since it reduces usability as users can't visually see what is the active link. (think of keyboard users.)
FYI: here is a screenshot of your test page (from Edit1) in Firefox 10 under Windows: http://img210.imageshack.us/img210/1764/inputform.png
As it always has been with input fields in HTML - their appearance is often dictated by the OS or browser. Very hard to get a consistent appearance.
May be it is outline or border
Try
input {
padding:0;
margin: 0;
border: none;
outline: none;
}
Update: I cannot duplicate your problem on my system. This is what i see
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.