I have a menu item that which I've created using display:table-cell; to ensure that the menu tabs "lengthen" when the user expands the screen. However I need to complete the right side of the tabs to finish the rounded corner at the top. I have a separate tabRight.png which consists of a slice of the right side of the tab. I need to place this right before each "tab opening". I have exhausted everything I know and the closing doors method I found online isn't working for this case. The right side should have a transparent corner so I don't think I can put it over the existing grey background.
The code is:
CSS:
#nav ul{
display:table;
width:100%;
border-spacing: 10px;
margin:0;
padding:0;
}
#nav li{
width:20%;
display:table-cell;
background: url('tab.png') no-repeat;
color:#000;
text-align:center;
height:31px;
}
#nav a{
display:block;
text-decoration:none;
color:black;
}
p{
padding:0px;
margin:0px;
}
HTML:
<div id="nav">
<ul>
<li>
<a href="http://www.google.com">
<div>
<img src="address.png"/>
<p>Deadlines</p>
</div>
</a>
</li>
<li>About</li>
<li>Address</li>
<li>Phone</li>
</ul>
</div>
EDIT:
I have tried the after method and I get the transparent portion overlapping the left background, so as the background shows through the transparency which what I was afraid of.
EDIT 2:
I set the position of the tabRight.png to -10px (10px is the width) and that pushed the edge to the right so the transparency problem no longer occurs.
Thanks guys for your help!
If you can use CSS :after pseudo selector class, then adding position:relative; to your li and the new rule:
#nav li:after {
width:5px;
content:"";
position:absolute;
height:100%;
top:0;
right:0;
}
will add an element on the right of all the list items.
Demo here (with some borders added for clarity)
2 options:
Create a class for the tabRight image.
.tab-right {
width: 5px;
height: 31px;
background: transparent url('tabRight.png') left top no-repeat;
display: inline-block;
zoom: 1; /* for IE7 */
*display: inline; /* for IE6 */
}
Then create a new <li> element:
<li class="tab-right"></li>
Use the :after pseudo-element.
#nav li:after {
content: "";
width: 5px;
height: 31px;
float: left;
background: transparent url('tabRight.png') left top no-repeat;
}
Adjust the width and height to the actual pixel dimensions for your image.
Just add another span inside your LI, set it's margin-right to a negative enough number to accomodate the corner. Set it's with and height accordingly and background the corner image.
I am suggesting this method as it makes scripting any menu functions simpler since all li's will be a menu item
Related
I'm working on some custom styling of a Wordpress site and there's a particular DIV that I'd like to make clickable rather than using the content that is in it. Due to the page-builder the site is using, I'm finding it difficult and before I go and create an entire bit of custom HTML content, I want to know if I can modify the module via CSS or JS so that the site owner can still modify content.
Eg.
.container {
width: 100%;
height:400px;
}
.container .module-content {
display: block;
height:150px;
bottom:0;
position: absolute;
width:100%;
overflow:hidden;
transition: ease .5s;
color:white;
text-align:center;
}
.container:hover .module-content {
display: block;
height:250px;
overflow:visible;
}
.container .module-content .module-title {
display: block;
font-size:30px;
height:100px;
padding:50px 25px 0;
margin:0;
background: -moz-linear-gradient(top, rgba(66,114,184,0) 0%, rgba(66,114,184,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(66,114,184,0) 0%,rgba(66,114,184,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#004272b8', endColorstr='#4272b8',GradientType=0 ); /* IE6-9 */
}
.container .module-content .module-title a {
color:white;
text-decoration:none;
}
.container .module-content .module-description {
background-color:#4272b8;
height: 50px;
padding:25px;
margin:0;
color: white;
}
<div class="container"><!-- this is a 600x400 pixel box with an image for a background -->
<div class="module-content"><!-- this is a 100px height div positioned absolutely and at the bottom with overflow hidden, when the container is hovered, the overflow becomes visible and height is 150px -->
<div class="module-title"><h2>About</h2></div><!-- this heading is the current link and is always visible -->
<div class="module-description"><p>text</p></div><!-- this text is only visible when the container is hovered -->
</div>
</div>
As you'll see in the image below, I can only edit the heading text (with or without link), paragraph text and the container background.
The positioning of the content is done by CSS overrides.
I thought maybe I could just make the H2 <a href></a> a block so it covered the whole container, but it stuffs up the positioning of the "About" text (it moves it to the top, and I want it to appear at the bottom).
So I thought maybe I could use a psuedo like ::before or ::after with content to make the container DIV a clickable link...
Is this possible? If not, how else could I achieve what I'm after?
Is this possible?
If I'm not wrong you cannot give a links for pseudo classes
If not, how else could I achieve what I'm after?
For me the easy way (but maybe not the best) will be making the area for h2 link bigger like here:
https://jsfiddle.net/9j516L2g/6/
.clickable-area {
display: inline-block;
position: relative;
z-index: 1;
padding-bottom: 20px;
margin-bottom: -20px;
}
display: inline-block is for setting margins
position has to be relative
z-index is for keeping clickable area on top (remember about it if you are using somewhere other z-indexes)
Padding increases the area that can be clicked
Negative margin is something that helps to not destroy surronding text
Example above will give 20px more at clickable area - you can do the same with left and right, so maybe it will be good solution for you.
Let me know if it's ok for you.
A common way to replace a standard input is display:none the input, and then add a background-image to the label.
CSS:
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
background: url('../images/checkbox_unchecked.png') left center no-repeat;
background-size: 25px;
}
input[type="checkbox"]:checked+label {
background: url('../images/checkbox_checked.png') left center no-repeat;
background-size: 25px;
}
The problem: The HTML is broken afterwards. When i want to change the direction of the elements, I have to change it inside the CSS (background: right).
How can I change the image/style of an input field without make it display:none first, and then change the background image? It has to work in Android 2.3.
EDIT: JSFiddle.
The simple fix for your rtl issue (assuming that is the main problem here, based on your JSFiddle demo), is to also style on the dir attribute when set to "rtl":
.styles[dir="rtl"] input[type="radio"]+label {
background-position: right; /* Set the background position to the right. */
padding-left: 0; /* Reset the left padding on the label. */
padding-right: 35px; /* Give the label some right padding. */
}
JSFiddle demo.
Everything I've used above should work on Android 2.3 according to Can I Use....
You can some css that acts on the rtl attribute:
.styles[dir="rtl"] input[type="radio"]+label {
padding: 0 35px 0 0;
background-position: right center;
}
Here's your demo on jsfiddle: http://jsfiddle.net/ab0xwfcs/2/
I'm not sure about the support of this method, but you could also use the CSS :before instead of setting background positions for each direction.
.styles input[type="radio"] {
display: none;
}
.styles input[type="radio"]+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:red;
}
.styles input[type="radio"]:checked+label:before {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
}
Demo on jsfiddle
You can also use this method on the input itself, without setting it's display to none.
(This will create an extra element, that will hide the default one under.)
input[type="radio"]:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:gray;
}
input[type="radio"]:checked:after {
content:"";
display:inline-block;
width:25px;
height:25px;
background:pink;
position:relative;
}
I'm a newbie; need some help! I created a left-aligned navigation menu with a slide-out submenu. I'm happy with everything except for the sub-menu's height. How can I make the entire slide-out menu (the opaque one) go to 100% height of the entire screen? Want it to look like this: http://perezweddings.com/blog/
Here's my jsfiddle: http://jsfiddle.net/alh3168/hE6Sv/10/
Do I need to change something in here?:
div.menu ul.second li a {
width: 150px;
bottom: auto;
min-height: 100%;
background-color: #B2CC7F;
color: #00293E;
text-decoration: none;
display: block;
padding: 7px 10px 0 0;
text-align: left;
cursor: pointer;
cursor: hand;
background: #000;
background-color:rgba(0,180,180,0.3);
padding-left:20px;
font-family: Neou-Bold;
src: url('Neou-Bold.otf');
font-size:10px;
letter-spacing:1.6px ;
}
Right now the color is on the sub-menu anchors. We need to move that to the parent ul.second element, and then add CSS to make that element fixed and span from the top to the bottom.
div.menu ul.second {
background-color:rgba(0,180,180,0.3);
top:0;
position: fixed;
bottom:0;
}
Once that has been done, we need to update the anchor style to set the background color of sub-menu items to transparent by default since the background color is coming from the parent element.
div.menu ul.second li a {
background-color:transparent;
}
You'll probably want to add some padding to the div.menu ul.second element as well and there are some other things you may want to adjust, but you can quickly add this CSS to the bottom of your fiddle to see it working.
I have my drop down menu directly above the slideshow. Because of this, the sub-menus get hidden behind the slideshow when I hover over the menu. I would like the sub-menus to appear over the slideshow.
Slideshow Code
var o=String.fromCharCode(60);var c=String.fromCharCode(62)
document.write(o+'iframe sr'+'c="http://slideful.com/vid.htm" frameborder="0" sty'+'le="border:0px;padding:0px;margin:0px;width:900px;height:563px;" allowtransparency="true"'+c+o+'/iframe'+c)
Dropdown Code
.tab {
font-family: arial, verdana, san-serif;
font-size: 14px;
}
.asd {
text-decoration: none;
font-family: arial, verdana, san-serif;
font-size: 13px;
color:#4234ff;
}
/*****remove the list style****/
#nav {
margin:0;
padding:0;
list-style:none;
}
/*****LI display inline *****/
#nav li {
float:left;
display:block;
width:100px;
background:#1E5B91;
position:relative;
z-index:500;
margin:0 1px;
}
/*****parent menu*****/
#nav li a {
display:block;
padding:8px 5px 0 5px;
font-weight:700;
height:23px;
text-decoration:none;
color:#ffffff;
text-align:center;
color:#ffeecc;
}
#nav li a:hover {
color:#470020;
}
#nav a.selected { /* style for default selected value */
color:#4234ff;
}
#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
}
#nav ul li {
width:100px;
float:left;
border-top:1px solid #fff;
}
#nav ul a { /* display block will make the link fill the whole area of LI */
display:block;
height:15px;
padding: 8px 5px;
color:#ff7777;
}
#nav ul a:hover {
text-decoration:underline;
padding-left:15px;
}
Dropdown jQuery
$(document).ready(function () {
$('#nav li').hover(function () {
$('ul', this).slideDown(350); //show its submenu
}, function () {
$('ul', this).slideUp(350); //hide its submenu
});
});
Dropdown HTML
<input type=hidden name=arav value="1*#*#*2">
<ul id='nav'>
<li><a href='#'>SHOP</a>
<ul>
<li style='background-color:#b0c4de;'><a href=http://link.com>Womens</a></li>
<li style='background-color:#bebebe;'><a href=http://link.com>Mens</a></li>
</ul>
</li>
</ul>
</input
I would like my submenus that are shown when you hover over the "Shop" button to show up over the slideshow that is below it. They hide under it.
#nav ul { /* submenu */
position:absolute;
left:0;
display:none;
margin:0 0 0 -1px;
padding:0;
list-style:none;
z-index:9999;
}
#nav ul li {
width:100px;
float:left;
z-index:9999;
border-top:1px solid #fff;
}
Using z-index you can achieve this.
You will want to wrap your iframe and give that container a z-index value of 1 and the navigation container should have a z-index value of 2.
You will also need to set the position property value to relative for both of these containers.
#nav {position: relative; z-index: 2;}
#iframeContainerName {position: relative; z-index: 1;}
Also, you may want to look into other ways of implementing the slideshow. Using document.write has potential issues: Why is document.write considered a "bad practice"?
I'm not sure how this would work if you're viewing your slideshow as in your code above (I'm not very familiar with Javascript or how this would work with iframes).
However, I came here also searching for answers, so I will post my solution in the case that it may help anyone who finds this page as I did.
I had the same issue, although my slideshow code looked like this.
<ul class="bjqs">
<li><img src="kjdsajkdhsja.png"></li>
</ul>
I found that changing the z-index to all the elements relating to the slideshow to lower than the drop down elements would not work - until I made my images background images in divs, as so:
<ul class="bjqs">
<li><div style="background-image:url(kjdsajkdhsja.png);width:200px;height:75px;"></div></li>
</ul>
Crummy workaround, but it did me fine for the project I was on.
For showing dropdown menu over slide show
write the code in css where you have written dropdown menu code
.dropdown_menu { visibility: visible; z-index: 100; }
it will work
Hi i have this a div called "nav" that contains divs with a class "thumbs". Im trying to create a table of contents like div that can be scrolled to display further thumbnails.
this is my CSS so far: (note that each thumbs are position:absolute and is left: positioned accordingly)
#nav {
position:absolute;
width:768px;
height:214px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
overflow:auto;
}
.thumbs {
position:absolute;
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
I want it to be scrollable so that if the thumbnails exceed 768px (width of nav) it can be scrolled to the left to view more.
Thanks
edit: I forgot to mention that I am doing this in PhoneGap. It will be a mobile app. thanks!
Remove position: absolute; and add float: left; from your thumbs class. That should do it.
UPDATE
If the number of thumbs are known in advance, the inner div's width can be set via CSS. Otherwise, it can be set onload or whenever a thumb is added/removed via JS.
$('#div').css('width', ($('.thumbs').length * $('.thumbs:first').outerWidth(true)) + 'px');
You can achieve this with the combination with max-width, display:inline-block & white-space.
Like this:
#nav_outer {
position:absolute;
bottom:0px;
background:gray;
overflow:auto;
}
#nav {
height:214px;
max-width: 300px;
bottom:0px;
/*-webkit-transform:translateY(214px);*/
background:gray;
white-space:nowrap;
}
.thumbs {
white-space:normal;
display:inline-block;
*display:inline; /*IE7*/
*zoom:1; /*IE7*/
width:80px;
height:100px;
margin:10px 10px 10px 10px;
background:white;
}
http://jsfiddle.net/xzcDD/3/
In my example when the .thumbs less than the width of 300px then there is no scroll