Here's link to the code JsFiddle
The problem is when mouse over the <ul> in "service & support" , the <li> below it didn't go down,
Can someone help me fix it????
thanks
Please look at this JsFiddle.
Some alterations in the css of:
#menu li {
height:auto;
float:none;
clear:both;
width:89%;
min-height:60px;
height:auto;
margin-left:5.5%;
border-bottom:thin solid #f8aa5a;
padding-bottom:15px;
This includes the use of height: auto;
as well as using padding instead of margins.
I have created one Fiddle based on your jsFiddle.
I made some change in jquery and css.
Added in your css.
#menu li > ul{
float:left;
width:100%;
}
and made some other changes.
your fault because you put the height of li 53px, and it should be min-height.
#menu li {
border-bottom: thin solid #f8aa5a;
clear: both;
float: none;
margin-bottom: 12px;
margin-left: 5.5%;
min-height: 53px;
width: 89%;
}
#menu ul{
.
.
.
.
top:2px; //instead of 5..
}
I have added some code in your jsFiddle.
http://jsfiddle.net/wayzz/vrf4jxpy/2/
Using animate() I have added margin-bottom so it looks like the whole li is animating down.
You can find comments on where I added or changed the code. :)
Related
I want to create a distance between menu items
This is the CSS code:
.menu-item a img
{
border:none;
box-shadow:none;
vertical-align:middle;
width:auto;
padding-left:20px;
}
This is the site
http://avocat.dac-proiect.ro/wp
I managed to create a distance between elements but when put arrow hover over the menu ... the effect is elsewhere
What should I do to function properly?
Thanks in advance!
Use
#menu-meniu > li{padding-left: 20px}
or
#menu-meniu li.menu-item-object-page{padding-left: 20px}
You can use padding or margin for ul li, in example:
.menu li {
padding-right: 20px;
}
use margin in li .menu-item like
.menu-item {
margin-right: 22px;
}
I got a problem with giving back the child height to its parent.
The code comes from the Magento OnePageCheckOut site and I guess it is an css issue.
Normally the checkout goes from up to down. With using of a modified css code, the progressbar is seperated on top of the page and the content for the current step is shown below. Sadly, the child-element, where the content is shown, is handled as an overflow element. This makes it necessary to set a defined height for its parent element, which means, all steps have the same height and it looks so bad.
Maybe you guys have an idea what I could change in the css files to give the needed height back to the parent-element. I tried to change the display values or played with position, but to be honest, I m not that deep in css to know exactly what am I doing. It was more trail and error.
An image of that problem below:
The code is:
<ol class="opc" id="checkoutSteps">
<li id="opc-billing" class="section allow active">
<div class="step-title"></div>
<div id="checkout-step-billing" class="step a-item"></div>
</li>
<li id="opc-shipping" class="section">
<div class="step-title"></div>
<div id="checkout-step-billing" class="step a-item" style="display:none;"></div>
</li>
</ol>
.opc { position:relative; overflow:hidden; height:970px; padding-top:20px; text-align:center; border:1px solid #BBAFA0;}
.opc li.section { display: inline; }
.opc .step-title,.opc .allow .step-title,.opc .active .step-title { position:relative; text-align:center; border:none; background:none; padding:0; overflow:hidden!important; height:80px; display:inline-block; vertical-align:top; }
.opc .step { padding:30px 20px; position:absolute; border:0; top:100px; left:0; z-index:1; background:#fff; width:605px; height:900px; border-bottom:1px dotted #ccc; border:none; width:643px; text-align:left;}
.opc:first-of-type .active .step{left:0; width: 100%;}
For starters, this is not going to be pretty (It's because of things like this that make me less and less of a fan of Magento). Basically what the current CSS is doing is positioning .step-title relatively and .step absolutely. Absolute positioned elements are out of flow for the document, so what ends up happening is the document renders the .step-title elements as if they were right next to each other, but the .step is out of flow, so it's just kind of hanging out 100px from the top of .opc. In order for the .steps to have their normal dimension, we need to figure out how to get them to not be position: absolute. I took the CSS and made this fiddle:
http://jsfiddle.net/31db2uma/
The first step is to remove the position:absolute and related rules and the height attributes:
http://jsfiddle.net/31db2uma/1/
.opc {
position:relative;
overflow:hidden;
padding-top:20px;
text-align:center;
border:1px solid #BBAFA0;
}
.opc li.section {
display: inline;
}
.opc .step-title,
.opc .allow .step-title,
.opc .active .step-title {
position:relative;
text-align:center;
border:none;
background:none;
padding:0;
overflow:hidden!important;
height:80px;
display:inline-block;
vertical-align:top;
}
.opc .step {
padding:30px 20px;
border:0;
background:#fff;
width:605px;
border-bottom:1px dotted #ccc;
border:none;
width:643px;
text-align:left;
}
.opc:first-of-type .active .step{
left:0;
width: 100%;
margin-top: 80px; /* same as old title height. This is for later when we make the steps `position:absolute` */
}
The trick is then to make sure all the steps stay at the top of the .opc container. For that, we need to take it out of flow and for that we use position:absolute (same bad code, different application). This will cause another major issue to arise. We have no idea where to put the elements. Our best bet would be to give them each 20% width assuming there will always be no more and no less then five steps.
http://jsfiddle.net/31db2uma/2/
#checkoutSteps li .step-title {
width: 20%;
position: absolute;
top: 20px; /* same as padding */
}
#checkoutSteps li:first-child .step-title {
left: 0;
}
#checkoutSteps li:first-child + li .step-title {
left: 20%;
}
#checkoutSteps li:first-child + li + li .step-title {
left: 40%;
}
#checkoutSteps li:first-child + li + li + li .step-title {
left: 60%;
}
#checkoutSteps li:first-child + li + li + li + li .step-title {
left: 80%;
}
This is a pretty thoroughly hacked solution, but I know from experience that Magento sometimes doesn't really give you many options.
What you can do is when user clicks next button, get the height of the next new child container to be shown in jquery and set that height to the parent container. You can use CSS but giving static height can be problematic if content goes down in different screen resolutions. Jquery will help in this
Here is a preview of some coding http://jsfiddle.net/joelupet/9NKzU/.
I would like to see my menu centered. Also, if there is alternative way like add id$class to UL elements structure.
What to do?
There are a number of ways to do this! Here's what I'd recommend.
Change your CSS to the following:
#footer_menu {
text-align: center;
border: 2px solid black;
background-color:red;
}
#footer_menu ul{
width:auto;
overflow:hidden;
display: inline-block;
}
Check this fiddle for an example implementation.
I have the following code:
http://jsbin.com/egiju4
That works a treat on FF and chrome, but shows all the blocks aligned in IE.
I've made loads of changes to it, but can't get it to work at all.
Would anyone please be able to give me some help with it?
Thanks in advance
Add width css rule to encapsulating div.
#block_selector {
padding: 10px;
float: left;
width:400px; /*this*/
}
Add clear:left or clear:both to your "selectable" class to clear the floats on the list items.
Set overflow:auto on the UL elements:
.selectable { list-style-type: none; margin: 0; padding: 0; overflow:auto; }
Update:
I am not sure which versions of IE have problems if you don't additionally define a width on the UL elements, but just to be safe, you can always set width:100%:
.selectable { list-style-type:none; margin:0; padding:0;
overflow:auto; width:100%; }
Add clear: left; rule to .selectable:
.selectable { list-style-type: none; margin: 0; padding: 0; clear:left; }
This will ensure each <ul> clears any floated elements before it.
I am trying to center vertically the text in my menu bar. I have tried editing the HTML and CSS, but had no luck making it work.
The webpage is located at: http://www.xuanyinwen.com/test4.html
The CSS is at: http://www.xuanyinwen.com/css.css
Could anyone give some idea, please! Many thanks!
Instead of giving the anchor elements specific width and height (which is useless anyway, because they are given display: block already), you can give them a padding:
#menu li a {
padding: 1em 0;
}
To your .vertical li a rule, add:
line-height: 4em;
vertical-align: middle;
change .vertical li a to
.vertical li a{
border-color:-moz-use-text-color;
border-right:1px solid;
border-style:none solid solid;
border-width:0 1px 1px;
display:block;
line-height:4em;
padding:0.2em 10px;
text-decoration:none;
width:200px;
text-align:center;}