lchosts Posted September 24, 2011 Share Posted September 24, 2011 In the example below can anyone tell me why my sub list items pick up the li property Also while were on the subject is it possible in the li li area anyway to make a li not expand all the way to the end of whatever container its in http://lchosts.com/ is where im workin on the main menu items. Also on the main menu items im planning on if the page is active and perhaps hovering removing the bottom borders on the main list... that I know how to do... but is there a way without screwing with the padding of its container to lower the bottom of the button so it lines up with the submenu? Thanks #menu-main-menu li {background:#ffffff;text-shadow: #666 0.1em 0.1em 0.3em;border-radius: 20px 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BFF)); /* for Webkit */background: -moz-linear-gradient(top, #FFF, #BFF); /* For Firefox */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFF, endColorstr=’#BFF); /* for IE */-moz-box-shadow: 1px 1px 1px #666;-webkit-box-shadow: 1px 1px 1px #666;box-shadow: 1px 1px 1px #666;}#menu-main-menu li li {background:#ffffff;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: none; -moz-border-radius-topleft: none; -webkit-border-top-left-radius: none;border-bottom-right-radius: none; -moz-border-radius-bottomright: none; -webkit-border-bottom-right-radius: none;border-bottom-left-radius: none!important; -moz-border-radius-bottomleft: none!important; -webkit-border-bottom-left-radius: none!important;} Link to comment Share on other sites More sharing options...
Ingolme Posted September 24, 2011 Share Posted September 24, 2011 The descendent selector selects every single element that is a descendent of another, no matter how many levels down it is. So your #menu-main-menu li selector is targeting all the <li> elements even if they're at a second level of depth. If you only want direct child elements, use the children selector #menu-main-menu>li. If you want the list items not to take up the entire width of the container, you'll have to set their width or max-width property. Another option could be to set a large right margin. To remove a border without messing up measurements, just set the border's color to transparent: element:hover { border-bottom-color: transparent;} Link to comment Share on other sites More sharing options...
lchosts Posted September 24, 2011 Author Share Posted September 24, 2011 ah thank you Im starting to think I jumped into the deep end on learning all this before learning to doggy paddle lol But I'll keep at it eventually Ill learn it all lol Would there be a way to edit ONLY the last line of a dropdown menu? I tried >li li:lastchild { but it dosent seem to work Link to comment Share on other sites More sharing options...
Drycodez Posted September 24, 2011 Share Posted September 24, 2011 It should be: li:Last-child. Link to comment Share on other sites More sharing options...
Ingolme Posted September 24, 2011 Share Posted September 24, 2011 Not for all browser. last-child is from CSS3 and I don't know how well it's supported. If you want to, you can give the last element its own class attribute. It's mostly Internet Explorer 8 and under I worry about. Link to comment Share on other sites More sharing options...
lchosts Posted September 24, 2011 Author Share Posted September 24, 2011 Ya Ill do that.The new problem Im running into with this menu is this: I got the child selector working great, however it isint doing anything for changing the border of a hover #menu-main-menu > li {background:#ffffff;text-shadow: #666 0.1em 0.1em 0.3em;border-radius: 20px 20px; -moz-border-radius: 20px; -webkit-border-radius: 20px;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFF), to(#BFF)); /* for Webkit */background: -moz-linear-gradient(top, #FFF, #BFF); /* For Firefox */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#FFF, endColorstr=’#BFF); /* for IE */-moz-box-shadow: 1px 1px 1px #666;-webkit-box-shadow: 1px 1px 1px #666;box-shadow: 1px 1px 1px #666;margin-right:5px;}#menu-main-menu > li:hover {background:#ffffff;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: 20px 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px;border-bottom-right-radius: 20px 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;border-bottom-left-radius: none; -moz-border-radius-bottomleft: none; -webkit-border-bottom-left-radius: none;background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BFF), to(#FFF)); /* for Webkit */background: -moz-linear-gradient(top, #BFF, #FFF); /* For Firefox */filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=’#BFF, endColorstr=’#FFF); /* for IE */-moz-box-shadow: 1px 1px 1px #000;-webkit-box-shadow: 1px 1px 1px #000;box-shadow: 1px 1px 1px #000;text-shadow: none;} Is there a better way to go about that goal? I have my menu set up to the point now I think you can mostly figure out what Im trying http://lchosts.com/ so far no javascript or images which as far as I understand it is a good thing Link to comment Share on other sites More sharing options...
lchosts Posted September 24, 2011 Author Share Posted September 24, 2011 ya Ive tried about every method possible I think lol but Im sure Im missing somthing Link to comment Share on other sites More sharing options...
dsonesuk Posted September 24, 2011 Share Posted September 24, 2011 Its difficult to know what you require, can you provide images on what you are trying to achieve Link to comment Share on other sites More sharing options...
lchosts Posted September 25, 2011 Author Share Posted September 25, 2011 Dosent look like its suppose to now as I found out IE wasnt supporting a lot so Im editing some of the code... but basically what I cant figure out is simple... my main list I want to be able to change its border settings onhover I have a li border setting and cant get that to c hange. I thought of a:link and a:hover however isint allowing me to change the borders at all either. Link to comment Share on other sites More sharing options...
dsonesuk Posted September 25, 2011 Share Posted September 25, 2011 What! IE not supporting most of css3, gosh! i'm shocked! i just can't believe that, I'm really really just taking the mickey, I thought you knew that, you have to use different hacks for dropshadows rounded corners, and you are not guaranteed to get the same effect when you do either...good all crappy IE you'll gotta laugh, they will get it right one of these years. Link to comment Share on other sites More sharing options...
Ingolme Posted September 25, 2011 Share Posted September 25, 2011 I don't bother much about IE. I think my viewers can live without a round border on a couple of element. The site still looks good, just slightly less than it would if there was support for CSS 3 Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 #page-navigation > li:hover {background:#yellow;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: 20px 20px; -moz-border-radius-topleft: 20px; -webkit-border-top-left-radius: 20px;border-bottom-right-radius: 20px 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;border-bottom-left-radius: none; -moz-border-radius-bottomleft: none; -webkit-border-bottom-left-radius: none;}#page-navigation li li {background:orange;border-top-right-radius: 20px 20px; -moz-border-radius-topright: 20px; -webkit-border-top-right-radius: 20px;border-top-left-radius: none; -moz-border-radius-topleft: none; -webkit-border-top-left-radius: none;border-bottom-right-radius: 20px 20px; -moz-border-radius-bottomright: 20px; -webkit-border-bottom-right-radius: 20px;border-bottom-left-radius: none; -moz-border-radius-bottomleft: none; -webkit-border-bottom-left-radius: none; } so how is the proper way of going about this? Im s till trying to accomplish the same thing lol a button bar that the buttons that are oval till hovered over then just the button on the button bar changes its bottom left border to not be rounded The pullout menu I want to have the buttons be rounded on the right side and no borders on the left so when you open it up it looks like the main button gets extended down if you wanna know what I mean by extended down look at godaddys menus I just wanna do it in my way... with borders and such Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2011 Share Posted September 26, 2011 Well, is it working? You're not going to get it to work for older versions of Internet Explorer. Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 it wont even work in modern versions of anything lol... this is getting frustrating... Im about to scrap this wordpress theme and learn how to make one from scratch lol and see if that fixes it Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2011 Share Posted September 26, 2011 You have a mistake with your background color. Instead of #yellow it should be yellow. Anyways, why not simplify? First of all, the only rules you have to put in the :hover state are the things that change, so don't bother declaring all the borders all over again. /* This rule condenses all the code you had for the li elements into one selector */#page-navigation li {border-radius: 20px;-moz-border-radius: 20px;-webkit-border-radius: 20px} /* Just change the bottom left corner *//* I believe border-radius can't be "none", it must be a number */#page-navigation > li:hover { background:yellow; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0;} /* Change the background and bottom left corner */#page-navigation li li { background:orange; border-bottom-left-radius: 0; -moz-border-radius-bottomleft: 0; -webkit-border-bottom-left-radius: 0;} Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 that nearly worked.... my god css can get complicated when you start throwing selectors lol this was the only change I made and it turned on... for IE 9 also... which even IE9 taking anything is amazing lol... fkn ie #page-navigation ul > li:hover { after that it worked like a charm, now I just gotta mess with its positioning and coloring, and shadows and I should be golden.... well sorta next I need to get shadows and a gradient but since IE are... well IE Im guessin its best to go with a image for the gradient instead of using css.... which sucks cause Im trying to cut down image usage by as much as possible for loading times Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2011 Share Posted September 26, 2011 Gradients don't take any loading time at all, if you use a GIF image. You can store gradients in really tiny images by making it 1 pixel wide and saving as GIF. There's absolutely no quality loss if the gradient is less than 256 pixels long. If it's more, the quality loss is still very hard to notice. Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 ok cool, ya Ill use gifs then... ty Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 Oh btw if you get a chance could you check http://lchosts.com/comparisons/ see if you think everything is kosher.... I did it all with divs cause ppl say thats the way to go if your just worrying about layout... This chart was close to being 'tabular' in my mind but I dunno... Anyway the ? marks have a onhover tooltip and if you pass over it fast with the mouse it dosent go away... do you know a workaround for that? Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2011 Share Posted September 26, 2011 Whoa! Put a table there. That is tabular data. Putting divs there is the wrong way to go. Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 ok... damn I was impressed with the hover highlighting too lol Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2011 Share Posted September 26, 2011 You can highlight table rows with the hover pseudo-class too. It's simple: .mytable tr:hover { background-color: [color];} or .mytable tr:hover td { background-color: [color];} Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 ah cool thanks again I have the buttons done I think if you wanna check em out and see if you see anything I can improve. Only gripe I have now is operas shadows dont work as nice as chrome or firefox... but then again neither does IE Link to comment Share on other sites More sharing options...
Ingolme Posted September 26, 2011 Share Posted September 26, 2011 The buttons look good. Of course, there's always the option of CSS image sprites for the buttons. It would require having all the buttons the same width, though, but it would solve the radius and shadow problems for all browsers. Link to comment Share on other sites More sharing options...
lchosts Posted September 26, 2011 Author Share Posted September 26, 2011 Ya I may do that after I get the rest of the site done... Sprites have very good backward compatibility? Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.