I have created a custom drop-down element, which is listed on this page:
http://jsfiddle.net/spryno724/2snUH/3/
Click on the drop-down menu in the "Result" secion, and you will see the problem. By rolling over the choices in the expanded drop-down list, you notice the roll-over indicators don't stretch to the available width.
While still maintaining the width of the menu when it was collapsed, how can I stretch the background color of each menu item? I'd also like each of the menu items to remain on their own line. A couple of adjustments that I made the CSS caused some of the list items to wrap their own text.
Thank you for your time.
Use negative margins with width: auto instead of width: 100% for items:
UL.dropdown.open LI {
margin: 0 -23px 0 -10px;
padding-right: 23px;
padding-left: 10px;
position: relative;
width: auto;
}
See http://jsfiddle.net/2snUH/4/ .
Or get rid of horizontal padding for UL (and specify horizontal padding for LI instead), and then you will not need negative margins for LI items.
To fix the width of the li elements use:
ul.dropdown.open {
padding: 5px 0;
}
ul.dropdown.open li {
display: block;
padding: 5px;
text-wrap: none;
width: 100%;
box-sizing: border-box;
}
Related
My problem is that Firefox is adding 2px to the height of the anchors in my nav. I'm controlling the height by adding padding to the anchors that are nested inside a list.
It's throwing my nav height off and things aren't lining up.
When I inspect the elements, the heights are:
FF: 20px
IE: 18.4px
Chrome: 18px
How do I make sure the heights are the same? I'm adding padding to the anchors so that the whole button is clickable instead of just of the words. Any ideas?
ul, li{
padding: 0;
}
li{
width: 33%;
text-align: center;
display: inline-block;
}
a{
text-decoration: none;
padding: 15px 0;
background-color: bisque;
display: block;
}
a:hover {
background-color: #bbb;
}
<ul>
<li>Link 1</li><li>Link 2</li><li>Link 3</li>
</ul>
Not sure why it's giving a different height, but to fix it I specified the height of the li and it seems to work. Wish I knew why it has a different height in the first place though.
HELLO KIND SIRS AND MADAMS,
http://www.statis-online.com For the homepage root catalog,
The product name overlaps the product price (When name is long).
-I would like to know how to make the product name and price not overlap!
(Step by Step Instructions Preferred. Not extremely code friendly)
Either through changing size of words?
or
Placement of price?
Other suggestions are welcome!
Thanks!
In the file style.css you have:
.products-grid .product-name a {
display: block;
color: #222;
height: 44px;
font-size: 13px;
font-weight: bold;
}
You need to remove the height property as the links are set to display as blocks, so the item wont get bigger than the set 44px height and it's overflowing to the next element.
This will fix the name issue, but will make the item boxes holding the products with different heights.
To fix this remove the set height for the price box and set height and position: relative for .item-bottom.
Then you can set the price box and and "add to cart" button to be positioned absolute and set them to be at the bottom of .item-bottom.
So you'll have:
.products-grid .item-bottom {
padding: 10px;
height: 155px;
background: url(../images/griditem-bottom.gif) repeat-x left top;
position: relative;
}
.products-grid .product-name a {
display: block;
color: #222;
/* height: 44px; */
font-size: 13px;
font-weight: bold;
}
.products-grid .price-box {
margin: 5px 0;
/* height: 58px; */
position: absolute;
bottom: 40px;
}
.products-grid .actions {
height: 26px;
position: absolute;
bottom: 10px;
}
I have a header strip with a shadow effect and contains navigation links; when you hover over them, a sub-menu appears.
See test page here
How can I make the sub-menu appear on a layer BEHIND the header strip? I need the header's box shadow to cast on top of the sub-menu.
Currently the sub-menu ( .main-navigation li ul ) has a z-index lower than the header strip ( .site-header ) but this is having no effect. I've tried giving it a negative z-index but this puts it behind the content (therefore hidden) and the links no longer work - I've read this is a common problem so I'd like to avoid using a negative z-index.
Hope you can help.
Z-index might not be the solution in this case, due to the stacking context of elements. Without re-ordering your html, you might try this trick using box-shadow on a pseudo-element attached to your sub-menu. For example:
.main-navigation li ul { display: none; position: absolute; top: 100%; margin: 0; overflow: hidden; }
.main-navigation li ul:before { content: ""; display: block; width: 160%; height: 10px; margin-left: -30%; box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.2); }
Check this DEMO. Note that this is only one possible solution, as there are likely other ways to achieve the same effect.
The text content should already naturally appear behind the shadow of the header since it is an adjacent sibling element, ordered after the header in the html. (I added a background image to the content div in the demo to show this.)
Have seen that this piece of code could solve my problems but I don't know how or where to apply it to make it work correctly
JScrollPane.setVerticalScrollBarPolicy(VERTICAL_SCROLLBAR_NEVER);
If your aim is to hide the vertical scroll bar then use the following CSS property...
overflow-y: hidden;
In your CSS (RRD.css), you have...
.scroll-pane
{
width: 100%;
height: 670px;
overflow: hidden;
}
Try changing it to...
.scroll-pane
{
width: 100%;
height: 670px;
overflow-y: hidden;
}
More changes
And in your includes/jquery.jscrollpane.css change...
.jspPane
{
position: absolute;
width: 9660px;
}
to...
.jspPane
{
position: absolute;
width: 5880px;
}
This will remove the extended scrolling that is happening. And make sure your content-holder width is 5880px to match the jspPane scrolling ...
<div id="content-holder" style="width:5880px;">
The vertical scrollbar will not appear as long the content-holder div width is not less than the width of the content inside it. Think all your images in the content-holder div adds up to 5680px + you need to add the padding you apply as well.
Quick question. Please see the example at http://www.urbanelementz.ca/ ...
The Image & Border I'm referring to is located on the top left of the main content area and has white text wrapping beside and below it.
Here's the URL to the image I'm talking about:
http://www.urbanelementz.ca/css/images/uelementz-index-colorefx1.png
I made the dotted border thicker and white so you can see what I'm talking about. I have a top margin and right margin set on the image so the text isn't right up against the image. How can I make the border go right up against (sit flush) with the image instead of around the image + the set margins. Without using padding as well if possible. I want to keep my margins set. Is there a way to fix this?
Thanks very much!
Add/edit CSS with:
img#colorfx1 {
padding: 0px;
margin-right: 10px;
}
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Change padding to margin, and it looks good.
I think you intended to write margin in the first place.
I see this style applied:
img#colorfx1 {
border-collapse: collapse;
border-color: #FFFFFF;
border-style: dotted;
border-width: 3px;
float: left;
padding: 2px 5px 0 1px;
vertical-align: top;
}
Removing the padding fixed it for me...
Get rid of the padding on the image. Set padding to 0:
img#colorfx1 { padding: 0; }
From what I see you don't have margin set to that image. You do have padding set to it though.
Once you remove padding and use margin instead it should be fine.
I think if you set your css like this
img#colorfx1 {
padding: 0px;
margin: 0px 5px 0px 5px;
border: #FFFFFF dotted 3px;
float: left;
}
you can use pandding such as :
<img src="test.png" width="80" height="74" border="2" style="border-style:dotted; padding-left:5px">
this will appear same as what u want, here is some stuff also :
link
regards...
I have a meta-answer: yes, padding was your problem. You might be able to avoid asking this sort of question in the future if you start using a) Chrome's "Inspect Element" context menu command, or b) Firebug for Firefox, which is more or less the same thing. Look at the element's calculated style and you can see exactly what property makes your element behave the way it does.