I am trying to put a line-height to properly align all menu items in a wordpress menu. My problem is that it works with menus that do not have an image or description, if it does have a image or description it does not align vertically with the line-height property.
Here's what I have for the menu items working:
.menu-dropdown a.level1 > span, .menu-dropdown span.level1 > span {
height: 50px;
line-height: 50px;
padding: 0 10px;
}
Now when I use Firebuf to try and fix the problem, there is a class showing a little diferent, which is "level1 parent". Even with Firebug I cannot fix this. I´m working on localhost, so can't give a link for the problem, but if it's necessary I'll put it online.
Here´s the link, you can see the problem in main menu at the top:
http://ricardo.dyndns-at-work.com:8888/yootheme/
Related
The content of my webpage is going behind the side menu I have positioned to the left.I want the menu to be fixed however whenever I do so the content hides behind the menu to the left. Any help would be much appreciated. (Apologies for formatting, new to the site.)
.menu {
padding-top: 150px;
height: 100%;
width: 170px;
background-color: white;
float: left;
display: table;
position: fixed;
}
Fixed elements are no longer within the page flow, they act in the same way as an absolute positioned element. Chris Coyier has a really good explanation about the differences in positioning http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
In order for your body content to stop flowing behind the fixed property, you need to create a container (if one does not exist yet) that all of the body content resides in, except of course the nav/menu bar. You then apply a padding-left to the main body content equal so the width of the fixed element so that the main body content is always padded away from the left of the browser.
Fixed elements don't affect the flow and positioning of elements and position:relative on a parent container has no affect on a fixed element.
I thought Safari had sorted this but it still seems to be an issue (unless I'm doing something obviously wrong).
I have a SVG placed inside an object tag. That is wrapped in a flexible containing DIV (e.g set to be width 50%). On resize, the container height resizes in Firefox, Chrome and Opera as I would expect but on Safari the container stays too high.
Here's an example on Codepen to demonstrate, switch to the full size result or 'editor on side' (button bottom right) to see the effect clearly in Safari: http://codepen.io/benfrain/full/fhyrD
Besides using JS to resize the SVG on load/resize, does anyone know if there is anything else I can do to make Safari behave correctly? Could of sworn I'd figured this out a few weeks back but now I seem to be hitting the issue again.
So, Sérgio Lopez had an answer for this. You can employ the intrinsic ratio for video technique that Thierry Koblentz described here: http://alistapart.com/article/creating-intrinsic-ratios-for-video. More info at this blog post: http://benfra.in/20l
Here is the cut and paste code you need in your CSS:
Surrounding object tag
object {
width: 100%;
display: block;
height: auto;
position: relative;
padding-top: 100%;
}
And this for the SVG inside:
svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
I've been trying to customize one the menu item on the joomla template i've currently use.
Some of the menu I've used before normally display item ID when you view the source code but my template doesn't display any at all. Anyhow I created the css code below hoping this will meet my goal but it didn't work. What I'm trying to accomplish is make the APPLY NOW an item #30 on my administrative main menu panel column turn the background into RED before any hover or any activities. You could view my temp link at getvms.net/home
I really appreciate if you could help me.
Thank you!
code:
#s5_nav li {
display:block;
list-style:none;
position:relative;
float:left;
border-right:solid 1px #B6B5B5;
height:45px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
padding-bottom:0px;
overflow:hidden;
}
#s5_nav li.item#30, {
display:block;
list-style:none;
position:relative;
float:left;
border-right:solid 1px #B6B5B5;
height:45px;
padding-left:10px;
padding-right:10px;
padding-top:9px;
padding-bottom:0px;
overflow:hidden;
background:red;
you are on right direction giving style to one item in a fine way but you have one mistake
#s5_nav li.item#30, {
display:block;
you should remove , at the end of the item#30 and you should use like this
#s5_nav li.item#30{
display:block;
hop it will help you.
The following may work for you if you are using Joomla! 1.6 or 1.7:
You can apply a custom CSS class to a specific menu item through the Menu Manager in Joomla!. Once you have done so, you can apply a style to that class in your style sheet.
To do so, simply open the desired Menu Item in your Menu Manager, and in the right hand column click "Link Type Options" to open that panel. The "Link Style CSS" field allows you to specify the name of a CSS class you would like to be applied to that Menu Item. This will allow you to apply styles to just that single menu item.
try with:
#s5_nav li.item30{
display:block;
list-style:none;
im trying to create a basic profile for someone and am practicing using the 960 grid system.
I've since got the hang of using grids enough to position most elements, however the menu seems a little off to me, the right side seems to be bigger then the left, even though ive centered the menu itself and its at 100% width.
Does anybody have any ideas on why it is playing up?
Site url is http://digitalgenesis.com.au/sites/alice
css is http://digitalgenesis.com.au/sites/alice/css/main.css
Reduce the ".nav a:hover"-s padding. I think this is the problem.
Try the CSS like this:
.nav{margin-top: 20px;background:black; color:white; padding-top:10px; padding-bottom:10px;text-align:center; }
.nav li{display:inline; }
.nav a:hover{background:white; color:black; padding:10px 0px 10px 0px;}
.nav a{text-decoration:none; color:white; }
.footer{background:black; color:white; margin-top:20px; position:fixed; width:100%; bottom:0px;}
#top{width:100%; background:black; color:white;}
.title{font-size:26px; margin-top:45px; padding-left :10px;}
.wrapper{margin-top:50px;}
.logo{margin-left:0px;}
I have a simple line of text I'm replacing with sIFR for a header on my site. The site is liquid so it scales when the browser window changes width. But when I shrink the browser window down, the alt text (when I turn it on for testing) wraps to another line, but the sIFR text doesn't.
I've seen written elsewhere on the web that people implement in the sifr.js code a preventWrap=false function, but being new to JavaScript I'm not sure where to put it to make it work.
Here's the relevant CSS:
.sIFR-hasFlash h2 {
visibility: hidden;
letter-spacing: 1px;
font-size: 18px;
text-align: center;
line-height: 1.5em;
}
And the relevant JavaScript:
sIFR.replaceElement(named({sSelector: "h2",
sFlashSrc: "flash/h2_font.swf", sBgColor: "#006633",
sColor: "#FFFFFF", sFlashVars: "textalign=center", sWmode: "transparent"}));
Not sure where I would put the preventWrap=false, or if that's even the way to go.
sIFR 3 should fix this.
I had a similar problem, adding position:relative to your CSS might fix it.