I'm trying to reverse engineer the menu on this web page (this is just a personal project, not trying to steal their work).
http://clapat.ro/themes/eleven/color/
However, I can't seem to get the transition effect to work. When I add the border-top on, it's pushing the content of the down instead of staying nicely in-line like in the example.
Also, the border seems to "blind" upwards, but when I do it, it blinds downwards.
Any help would be greatly appreciated!
This is causing the problem:
.nav > li > a {
display: block;
}
which is coming from bootstrap.css If you remove that bit of CSS it works correctly.
You can override that style in index2.php by adding display: inline;:
.navbar a, .navbar a:active, .navbar a:visited {
color: #7f7f7f;
padding-top: 35px;
height: 90px;
text-transform: uppercase;
font-weight: bold;
font-size: 14px;
padding-bottom: 45px;
display: inline; /* added this line */
}
Related
I'm learning CSS and I'm trying to copycat a simple nav bar from this website.
I want a black background to appear when hovering over an item so I did this:
nav a:hover {
background: black;
}
but the background is only covering the text. I want to it to cover the entire element like in the original site.
And here's the anchor tags CSS if you need it:
nav a {
text-decoration: none;
text-transform: uppercase;
font-family: sans-serif;
font-weight: bold;
font-size: 16px;
color: white;
float: left;
padding-right: 2em;
margin-top: 1.5em;
}
I coded the same as on your example website, hope it helps: http://jsfiddle.net/yL7yj4xL/1/ (You have to remove padding-right and replace it for just padding)
I'm assuming you have the nav elements in a <ul><li></li></ul> structure.
in that case, change the nav a:hover to nav li:hover
EDIT:
Made this fiddle off of your pen: https://jsfiddle.net/djgsgqp5/
Your nav ul and li elements were getting no height. If you hover on those elements in the devtools youl see they only have a width.
The style in the fiddle is much more stable hopefully does what you need.
Hope that helps!
While working on a responsive design, I noticed that everything is responsive except for my unordered list. When I resize the browser, the list doesn't move or stay centered in its DIV. I've tried a bunch of things all day but simply can't figure it out. For context, #sitecontent is the container holding everything, #sitecontent .leftsidebar contains an image and the unordered list, and #sitecontent .leftsidebar ul is the unordered list. Can someone check it out and tell me what's wrong? Please visit my site at http://www.tommaxwell.me and view the source.
Try this CSS:
#sitecontent .leftsidebar ul {
position: relative;
top: -5px;
list-style-type: none;
font-family: 'Patua One', cursive;
padding-left: 10px;
}
#sitecontent .leftsidebar ul li {
margin-bottom: 3%;
clear: both;
border-bottom: 1px solid #E5E5E5;
font-family: helvetica;
text-align: center;
}
My browser is adding some padding to the list, which is a pretty common thing for browsers to do. You might consider using a reset (meyer, yui), or just setting explicit padding/margin on the ul and li's.
I guess I was overcomplicating the whole thing, and in the process forgetting the whole point of responsive designs in the first place. Adding padding/margin around the list is absolutely acceptable to use in the case, as I'll use media queries at breakpoints. Don't know why I was making things so complicated in my head!
Hi update your css with mine actually i have given the horizontal padding to your .leftsidebar ul parent div and made some changes in its list-items and its working fine now.. see the attached image for your reference :-
CSS for till IPad
#sitecontent .leftsidebar ul {
padding: 0 25%;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
#sitecontent .leftsidebar ul li {
border-bottom: 1px solid #E5E5E5;
display: block;
font-family: helvetica;
line-height: 25px;
margin: 2px;
}
And for iphone you will have to write the css :-
image reference for iphone :-
CSS for till IPhone
#sitecontent .leftsidebar ul {
margin-top: 10%;
margin-bottom:20%;
position: relative;
}
I'm using a standard asp.net menu in an asp.net 4.0 web application. To clarify, it's a standard web application, it is not any version of the MVC applications available.
This is the problem I'm having.
It's a fairly simple setup really. I have css overing the various states of the menu, :link, :visited, :hover and :active.
As you would suspect, there are visible differences between these states. In addition, I have some javascript running which highlights the link of the current page, which is another fairly normal activity. Nothing mysterious or obcure so far.
The problem comes when people start clicking around on the menu. Lets say you are on the home page. The first menu item is highlighted. Lets say now - for whatever reason only a user can come up with - you click and drag one of the menuitems. It doesn't have to be far, it can be only a millimetre or two. The expected behaviour is that the drag will negate the click, the page will stay where it is and the click-dragged menuitemw ill return to its former state.
What actually happens is the drag negates the click, the page stays where it is and the click-dragged menuitem seems to retain the :active style if it exists, or the :hover style if the :active style isn't there.
Replication:
It would appear this could be a bug in the Asp.Net menu though.
To try to replicate the problem outside my project, I created a bog standard Asp.NET Web Application project using the template in VS2010.
I changed one line in the Site.css - specifically, I changed the :active style in div.menu ul li a:active to color: red;
Then I fired the application up, clicked the Home menu item and dragged it a couple of millimetres.
Sure enough, when I let go of the mousebutton, the menu item stuck with the :active style.
Testing
I originally found the problem in IE8, however it is still there in IE9 as well as in Firefox/Aurora.
Chrome and Safari however, revert the menu item back to its intended state, mostly. They both leave a glowy effect around the edges of the element. I haven't tested it in Opera.
....Profit?
I've scoured the net looking for a solution to this and just cannot find one. In fact, it's very tough to find a reference to the problem, the closest I came was on one of Sitepoint's reference pages, where it mentions something similar as a bug in IE7.
http://reference.sitepoint.com/css/pseudoclass-hover
Anyone have any ideas?
Code
Here is the code in the Site.Master - I've renamed menu items to protect the culpable:
<div class="topnav">
<asp:menu id="topnav" runat="server" orientation="Horizontal" renderingmode="List" skiplinktext="" maximumdynamicdisplaylevels="1" viewstatemode="Enabled" >
<items>
<asp:menuitem navigateurl="~/Default.aspx" text="Home" value="home"></asp:menuitem>
<asp:menuitem navigateurl="~/Overview.aspx" text="Overview" value="overview"></asp:menuitem>
<asp:menuitem navigateurl="~/Benefits.aspx" text="Benefits" value="benefits"></asp:menuitem>
<asp:menuitem navigateurl="~/Hardware.aspx" text="Hardware" value="hardware"></asp:menuitem>
<asp:menuitem navigateurl="~/SDK.aspx" text="Develop" value="SDK"></asp:menuitem>
</items>
</asp:menu>
</div>
While I'm at it, I'll also post the CSS which applies to this menu.
.right .topnavcont
{
width: 767px;
background-color: #dddddd !important;
height: 22px;
}
.topnav #topnav li
{
float: left;
}
.topnav
{
background-color: #ddd;
line-height: 22px;
float: right;
margin-right: 11px;
background: url(../img/shadow.gif) repeat-y top right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #777;
text-align: center;
}
.topnav li
{
width: 109px;
}
.topnav a:link, .topnav a:visited
{
color: #777;
display: block;
background-image: url(../img/bg_n-s.gif);
background-repeat: repeat-x;
text-decoration: none;
visibility: visible;
}
.topnav a:hover
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif);
display: block;
visibility: visible;
}
.topnav a:active
{
background-image: url(../img/bg_a-s.gif);
display: block;
color: #fff;
visibility: visible;
}
.topnav .current
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif) !important;
}
And last but not least, the javascript I have running on the page to assist with this menu.
$(function ()
{
var pathname = (window.location.pathname.match(/[^\/]+$/)[0]);
$('.topnav ul li a').each(function ()
{
if ($(this).attr('href') == pathname)
{
$(this).addClass('current');
}
});
});
After tearing my hair out and considering a career in basket weaving, I think I have managed to come up with a half baked solution to this.
The secret lies in the Asp.Net Menu control's complete failure to deal properly with css pseudo classes.
In my code above, you could see I had defined an a:active pseudoclass, which was where the problem lay.
Asp.Net doesn't want you to use pseudo classes, it wants you to use the properties exposed in the web control at design time. So, instead of just sticking with the age old :link:visited:hover:active pseudoclasses, you are instead supposed to set the property staticselectedstyle-cssclass.
Not necessarily a bad thing, although it does seem a little verbose and counterintuitive.
The thing to remember though is to ensure a :active pseudo class targetting the element isn't preceding the staticselectedstyle-cssclass code, because for some reason, the browsers seem to only pick up bits and pieces from each class, getting things all wrong in the meantime.
So now, my css for the topnav looks like this:
.topnav
{
background-color: #ddd;
/*margin-top: 1px;*/
line-height: 22px;
float: right;
margin-right: 11px;
background: url(../img/shadow.gif) repeat-y top right;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #777;
text-align: center;
}
.topnav #topnav li
{
float: left;
}
.right .topnavcont
{
width: 767px;
background-color: #dddddd !important;
height: 22px;
}
.topnav li
{
width: 109px;
}
.topnav a:link, .topnav a:visited
{
color: #777;
display: block;
background-image: url(../img/bg_n-s.gif);
background-repeat: repeat-x;
text-decoration: none;
visibility: visible;
}
.topnav a:hover
{
color: #fff !important;
background-image: url(../img/bg_h-s.gif);
display: block;
visibility: visible;
}
topnav .staticmenuitemselected
{
color: #777;
display: block;
background-image: url(../img/bg_n-s.gif);
background-repeat: repeat-x;
text-decoration: none;
visibility: visible;
}
I have not yet completely finished experimenting with the :active pseudoclass though, since I do want the act of clicking a button on the menu to give me a warm fuzzy glow when it does that flashy clicky thing.
Thanks for reading/hope this helps someone.
I have an item that when hovering in IE7 is causing the item below to shift slightly.
You can see the item in question here: http://andovertowncouncil.customstudio.co.uk/
In the right sidebar each item has an H2 heading. When you hover over this in IE7 the item below shifts down by 2/3 pixels. If you then hover over something else, like the button, this lower item returns to its original position.
I've tried to be very specific with my hover effect:
.right-item h2 a:hover {
margin-bottom: 5px;
border-bottom: none;
padding-bottom: 0;
text-decoration: none;
line-height: 30px;
}
But without success.
I'd be grateful for any suggestions on how to solve this one?
Thanks in advance,
Tom
Can't tell why you're adding the following rules on hover, but they are what is causing your content shifts:
.right-item h2 a:hover {
border-bottom: medium none;
line-height: 30px;
margin-bottom: 5px;
padding-bottom: 0;
text-decoration: none;
}
a:hover {
border-bottom: medium none;
}
If removed everything looks good in all browsers.
You're adding margin-bottom on hover.
Try removing this and see if it fixes your issue.
I made a new website and my problem is that the menu is ok in FF and other browsers, but not in IE.
The problem is, it wont list the list elements, no hover , no color, and not inline.
here is the code
nav {
margin-top: 15px;
}
nav ul {
position: relative;
left: 297px;
}
nav li {
float: left;
padding: 0 20px;
font-size: 12px;
line-height: 65px;
background: url(images/line.png) no-repeat right 10px;
height: 72px;
text-transform: uppercase;
}
nav li a {
color: #656464;
text-decoration: none;
display: block;
}
nav li:hover {
background: url(images/hover.png) repeat-x 0 35px;
color: #242424;
}
could please someone could give me a hint?
nav is an HTML5 element; old IEs will not recognize it and thus won't apply your styles.
To make IE recognize HTML5 markup, place the HTML5 shiv on your page, then declare a rule for nav and any other HTML5 elements you use, giving them a display: block style, just above the CSS that you have now.
<nav> is fine to use on a page, but you will run into problems with it when you try and style it as many browsers simply skip the tag if they don't understand it.
Wrap the <nav> tag in a wrapper div and style that instead, and strip away any styling from the semantic tags so they are naked.