So, I'm making this context menus, which looks great in all major browsers, even IE plays nice, right down until IE7.
I don't know why it has that weird spacing and was hoping someone could enlighten me.
Here's a JSFiddle
CSS
/* CSS Document */
*{
zoom: 1;
}
.context-menu-container{
border: 1px solid #828790;
padding: 2px;
width: 100px;
background-color: #f1f1f1;
font-family: 'MS Sans Serif', Geneva, sans-serif;
font-size: 12px;
position: relative;
margin-left: 5px;
margin-top: 5px;
}
.context-menu{
list-style-type: none;
padding: 0px;
margin: 0px;
display: block;
position: relative;
}
.context-menu li{
position: relative;
height: 20px;
border: 1px solid transparent;
border-radius: 2px;
margin: 0px;
}
.context-menu li.separator{
height: 2px;
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
padding: 2px;
margin-left: 26px;
}
.context-menu li.separator:hover{
border: 0;
background: url(http://img843.imageshack.us/img843/2599/horizontalseparator.png) repeat-x center;
}
.context-menu li:hover{
border: 1px solid #afd0f7;
background: url(http://img860.imageshack.us/img860/3511/contextmenuhover.png) repeat-x;
}
.context-menu li.disabled, .context-menu li.disabled a{
color: #8b8b8b;
}
.context-menu li.disabled:hover{
border: 1px solid #d5d4d4;
background: url(http://img823.imageshack.us/img823/31/contextmenudisabled.png) repeat-x;
}
.context-menu li a{
line-height: 20px;
height: 20px;
text-decoration: none;
color: black;
display: block;
cursor: default;
padding-left: 30px;
position: relative;
}
.context-menu a.delete{
background: url(http://img268.imageshack.us/img268/9831/deleteqb.png) no-repeat 2px center;
}
.context-menu .vertical-separator{
width: 2px;
height: 100%;
position: absolute;
left: 25px;
background: url(http://img836.imageshack.us/img836/6873/verticalseparator.png) repeat-y;
margin: 0px;
padding: 0px;
margin-bottom: 10px;
}
.context-menu div.label{
margin-left: 25px;
padding-left: 5px;
float:left;
}
HTML
<div class='context-menu-container'>
<ul class='context-menu'>
<div class='vertical-separator'></div>
<li><a class='delete' href="#">Action</a></li>
<li class='separator'></li>
<li class='disabled'>Action</li>
<li>Action</li>
<li>Action</li>
</ul>
</div>
You need this, unsurprisingly because of an IE7 bug:
.context-menu li.separator {
font-size: 0;
line-height: 0;
}
http://jsfiddle.net/thirtydot/XLRWT/17/
Also, having a <div> as a child of a <ul> is invalid HTML. It may work in browsers, but it's still invalid.
Related
I'm having a little positioning error and I'm sure it's a simple fix, but after trying lots of different combinations of margin and padding, I can't get it perfect. The problem is I can't seem to get my drop-up menu (footer-nav ul ul) to move down 10px when it appears by hovering over #info. If I remove the margin from the css under #info, it drops the footer-nav ul ul down 10px where I need it, but it removes the 10px margin between the black box (streaks-content) and the footer-nav. Anyone know how to fix this? I appreciate it so so much! I don't know what I would do without you geniuses!
Here is the JS Fiddle: https://jsfiddle.net/fe2zk4L8/19/
Here is the html:
<header id="header">
<div id="nav">
<ul>
<li id="projects">PROJECTS
<ul>
<li id="one"> ONE </li>
<li id="two"> TWO </li>
<li id="three"> THREE </li>
<li id="four"> FOUR </li>
</ul>
</li>
</ul>
</div>
</header>
<div id="color">
<div id="streaks-content">
</div>
</div>
<footer id="footer">
<div id="footer-nav">
<ul>
<li id="info">INFO
<ul>
<li id="twitter">
TWITTER
</li>
<li id="instagram">
INSTAGRAM
</li>
<li id="email">
EMAIL
</li>
</ul>
</li>
</ul>
</div>
</footer>
Here is the css:
a {
text-decoration: none;
color: inherit;
display: block;
}
#header {
width: 100%;
position: fixed;
background-color: #FFFFFF;
margin: 0px;
padding: 0px;
top: 0;
left: 0;
text-align: center;
z-index: 10;
}
#nav {
width: 100%;
background-color: #FFFFFF;
}
#projects {
display: inline-block;
padding-bottom: 10px;
}
#nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 10px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
}
#nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#nav ul li:hover>ul {
display: block;
position: absolute;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#one {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#one:hover {
background-color: black;
color: white;
}
#two {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#two:hover {
background-color: black;
color: white;
}
#three {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#three:hover {
background-color: black;
color: white;
}
#four {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#four:hover {
background-color: black;
color: white;
}
#footer {
width: 100%;
background-color: white;
position: fixed;
margin: 0px;
bottom: 0;
left: 0;
text-align: center;
z-index: 11;
}
#footer-nav {
width: 100%;
}
#info {
display: inline-block;
padding-top: 10px;
}
#footer-nav ul {
font-family: Arial;
font-size: 15px;
font-weight: bold;
color: #000000;
list-style-type: none;
text-align: center;
margin: auto;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
}
#footer-nav ul ul {
width: 300px;
list-style-type: none;
font-weight: normal;
display: none;
}
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
}
#twitter {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#twitter:hover {
background-color: black;
color: white;
}
#email {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#email:hover {
background-color: black;
color: white;
}
#instagram {
padding-top: 10px;
padding-bottom: 10px;
border: 1px solid black;
color: #000000;
background-color: white;
}
#instagram:hover {
background-color: black;
color: white;
}
#color {
width: 100%;
align-content: center;
}
#streaks-content {
background-color: black;
width: 300px;
height: 1000px;
display: block;
margin: 0 auto;
}
Please add to the following CSS selector #footer-nav ul li:hover>ul that rule padding-bottom: 0;
so, in total you should have:
#footer-nav ul li:hover>ul {
display: block;
position: absolute;
bottom: 100%;
text-align: center;
margin: 0 auto;
left: 0;
right: 0;
padding-bottom: 0;
}
The problem is that the elements are not appearing next to each other as I want them to.
all three elements are already on float left and in the right order but they are still not lining up in the right way.
(so probably, the problem is that some elements are position:absolute or relative while they don't need to. The problem is: you can't change that without disrupting the drop-up menu of #Timer. That)
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
float: right;
position: relative;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
position: absolute;
width: 100px;
height: 100px;
float: left
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
float: left;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
position: Relative;
margin-top: -14px;
width: 80px;
}
#timer:hover {
color: white;
background: #027fed;
}
li {
background-color: #eee;
font-size: inherit;
width: 150px;
position: relative;
float: left;
bottom: 31px;
left: 0;
display: block;
font-size: 12px;
text-decoration: none;
font-family: tahoma;
color: black;
width: 50px;
height: auto;
border: 1px solid #;
border-width: 1px 1px 0 0;
background: #eee;
background-color: rgb(238, 238, 238);
padding-left: 10px;
line-height: 38px;
border-radius: 2px;
height: auto;
line-height: 1em;
padding: 5px 10px;
width: 129px;
margin-bottom: 1px;
margin-left: 431px;
}
li:hover {
cursor: pointer;
background-color: #027fed;
color: white
}
.list {
display: none;
list-style-type: none;
position: absolute !important;
}
.keuze:hover .list {
display: block
}
.messages_compose {
padding: 10px;
margin-bottom: auto;
}
.messages_textarea_container {
display: inline-block;
width: 400px;
margin-left: 10px;
}
.messages_textarea {
border: 3px solid lightgray;
margin-top: 0;
margin-bottom: 10px;
padding: 5px;
width: 400px;
height: 40px;
resize: none;
float: left;
border-radius: 2px;
position: absolute;
}
.button {
border: none;
font-size: 12px;
padding: 12px 12px;
height: 40px text-align: center;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
<script>
document.getElementById("jaar").onclick = function() {
jaar()
};
document.getElementById("maand").onclick = function() {
maand()
};
document.getElementById("week").onclick = function() {
week()
};
document.getElementById("dag").onclick = function() {
dag()
};
</script>
<script src="../scripten.js"></script>
</div>
If you want them side by side (if width allows), to make things simpler, make sure they are inline elements.
textarea and button are inline elements by default and unsorted-list are block element by default
Inline Elements
Block Elements
So basically, all you need is to change your ul to display: inline-block;
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
green_button {
background-color: #027fed;
color: white;
border-radius: 2px;
cursor: pointer;
}
.green_button:active {
background-color: #eee;
color: black;
}
.keuze {
display: inline-block; /* added */
width: 100px;
list-style: none;
}
.keuze li {
width: 100%;
}
#timer {
color: black;
background: #eee;
border: none;
padding-left: 10px;
font-size: 12px;
border-radius: 2px;
padding: 12px 12px;
cursor: pointer;
list-style-type: none;
width: 80px;
}
<div class="messages_compose">
<div class="vraag">CV</div>
<div class="messages_textarea_container">
<textarea class="messages_textarea"></textarea>
<button class="button green_button">Stuur</button>
<ul class="keuze">
<button id="timer">1 Jaar</button>
<div class="list">
<li id="jaar">jaar</li>
<li id="maand">maand</li>
<li id="week">week</li>
<li id="dag">dag</li>
</div>
</ul>
</div>
</div>
In addition, I have removed all your float and position from your css which I think as #Temani Afif says, you were just trying fix the issue by adding more to it.
I also have added followings just to make it tidier which is irrelevant to your issue. (That is to remove the default margin, padding and vertical align from all html elements to make it tidier and avoid unexpected behavior of different browsers)
* {
padding: 0;
margin: 0;
vertical-align: text-top;
}
I'm trying to implement a popup at the bottom right corner of my web in WordPress.
The popup is working properly, but I have 2 lines of text, a message and a button. Everything was okay since I wanted to put a margin-top in the button because the button was covering the text.
Here you can see the HTML code and the CSS.
#corner-slider {
position: fixed;
z-index: 10000;
overflow: hidden;
border-radius: 15px;
color: white;
padding: 10px;
margin-bottom: 60px;
height: 120px;
width: 369px;
border: 1px solid #2d93f1;
background: #2d93f1;
}
#corner-slider.hidden {
display: none;
}
#corner-slider .close {
position: absolute;
cursor: pointer;
font-size: 16px;
display: inline-block;
z-index: 1002;
right: 24px;
top: 10px;
}
.popup-button {
padding: 8px 30px;
background-color: #ffffff;
border-color: #ffffff;
border-radius: 45px;
margin-top: 240px;
}
<div id="corner-slider">
Do you want to stay here?
<br />
<a target="_blank" href="#" class="popup-button">Click me!</a>
</div>
So, why is margin-top not working? What can I do?
Thanks.
The anchor element <a> is an inline element. Change its display type to inline-block or block:
#corner-slider {
position: fixed;
z-index: 10000;
overflow: hidden;
border-radius: 15px;
color: white;
padding: 10px;
margin-bottom: 60px;
height: 120px;
width: 369px;
border: 1px solid #2d93f1;
background: #2d93f1;
}
#corner-slider.hidden {
display: none;
}
#corner-slider .close {
position: absolute;
cursor: pointer;
font-size: 16px;
display: inline-block;
z-index: 1002;
right: 24px;
top: 10px;
}
.popup-button {
padding: 8px 30px;
background-color: #ffffff;
border-color: #ffffff;
border-radius: 45px;
display: inline-block;
margin-top: 1em;
}
<div id="corner-slider">
Do you want to stay here?
<br />
<a target="_blank" href="#" class="popup-button">Click me!</a>
</div>
button is not stable, just add disply:inline-block or float:left
#corner-slider {
position: fixed;
z-index: 10000;
overflow: hidden;
border-radius: 15px;
color: white;
padding: 10px;
margin-bottom: 60px;
height: 120px;
width: 369px;
border: 1px solid #2d93f1;
background: #2d93f1;
}
#corner-slider.hidden {
display: none;
}
#corner-slider .close {
position: absolute;
cursor: pointer;
font-size: 16px;
display: inline-block;
z-index: 1002;
right: 24px;
top: 10px;
}
.popup-button {
padding: 8px 30px;
background-color: #ffffff;
border-color: #ffffff;
border-radius: 45px;
margin-top: 10px;
display: inline-block; /* newly added */
}
<div id="corner-slider">
Do you want to stay here?
<br />
<a target="_blank" href="#" class="popup-button">Click me!</a>
</div>
i made some changes in your code just have a look in the below code, just place the text in the div and add a css of margin-bottom:15px;
<style>
#corner-slider {
position:fixed;
z-index:10000;
overflow:hidden;
border-radius: 15px;
color: white;
padding: 10px;
margin-bottom: 60px;
height: 120px;
width:369px;
border:1px solid #2d93f1;
background:#2d93f1;
}
#corner-slider.hidden{
display:none;
}
#corner-slider .close{
position:absolute;
cursor:pointer;
font-size:16px;
display:inline-block;
z-index:1002;
right:24px;
top:10px;
}
.popup-button {
padding: 8px 30px;
background-color: #ffffff;
border-color: #ffffff;
border-radius: 45px;
margin-top: 240px;
}
/*--------------- new css ----------*/
.small-area
{
margin-bottom: 15px;
}
</style>
<div id="corner-slider">
<div class="small-area">Do you want to stay here?</div>
<a target="_blank" href="#" class="popup-button">Click me!</a>
</div>
My drop down menu in mobile view hides behind my banner. I can't seem to fix it. I have added the z-index, and I've gone as high as 999 and still no difference.
this is the test page
Here is HTML:
<li class="dropdown">
<a class="dropdown-toggle provinces-btn" data-toggle="dropdown">Select Province<span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Alberta</li>
<li>British Columbia</li>
<li>Manitoba</li>
<li>New Brunswick</li>
<li>Newfoundland and Labrador</li>
<li>Nova Scotia</li>
<li>Nunavut</li>
<li>Ontario</li>
<li>Prince Edward Island</li>
<li>Quebec</li>
<li>Saskatchewan</li>
</ul>
</li>
Here is CSS:
.dropdown-menu {
left: 40% !important;
margin-left: -30px;
z-index: 50;
}
#media screen and (max-width: 768px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
#media screen and (max-width: 604px) {
.provinces-btn {
width: 100%;
margin-top: 1px;
margin-left: 15px;
border-radius: 12px;
background-color: #3498db;
border-color: rgba(0,0,0,0.3);
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
color: #FFF !important;
display: inline-block;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 12px;
padding: 10px 30px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
border: 1px solid rgba(0,0,0,0.3);
border-bottom-width: 3px;
text-decoration: none;
z-index: 60;
}
.provinces-btn:hover, .provinces-btnActive {
color: #FFEE00 !important;
background: #1975D1;
font-weight: 900;
}
.provinces-btn ul{
margin: 0 auto;
}
}
Other CSS with z-index that I'm not sure if it is affecting it:
nav {
padding: 0;
position:relative;
z-index:10;
height: 0;
}
.showMenu {
display: block;
background: url() no-repeat center;
background-size: 48px 48px;
height: 80px;
right: 0;
top: 0;
text-indent: -999999px;
font-size: 0;
position: absolute;
z-index:11;
border-left: 1px solid #DDDDDD;
}
the problem isnt z-index problem the real problem is your header, just change
header {
width: 100%;
height: auto;
background: #FFFFFF;
overflow: auto;
overflow-y: hidden;
overflow-x: hidden;
margin-bottom: 2%;
}
To
header {
width: 100%;
height: auto;
background: #FFFFFF;
margin-bottom: 2%;
}
Z-Index only works on positioned elements, try adding this to your .dropdown-menu:
position: relative;
Don't make the overflow hidden. If it is set to hidden, it will not allow your new divs (inside the parent element where overflow:hidden) to pop up or overlap other divs.
I have a slight problem with my code trying to get on the navbar, each section to have an equal amount of space and not have space according to how many characters they have in the title. For example, MAP should have as much as ABOUT.
Here is what it looks like now:
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 95%;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>
You could try this: fiddle
.wrap ul {
width:100%;
padding: 0;
}
.wrap li {
display:inline-block;
float: left;
width: 20%;
vertical-align:middle;
}
You just need
.wrap ul {
table-layout:fixed; /* this */
}
.wrap {
width: 90%;
background-image: url(images/navbarbackground.png);
background-repeat: no-repeat;
margin: auto;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.3);
padding: 0px;
font-family: minecrafter;
}
.wrap:after {
content: " ";
clear: both;
display: block;
height: 0;
visibility: hidden;
}
.wrap ul {
display: table;
width: 80%; /* adjusted for demo only */
table-layout:fixed;
}
.wrap li {
display: table-cell;
vertical-align: middle;
}
.wrap li a {
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px 0 6px 0;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}
.wrap h2 {
margin-top: 10px;
margin-bottom: 10px;
text-transform: uppercase;
color: #ffffff;
width: 6em;
text-align: center;
line-height: 1.0;
letter-spacing: .04em;
display: in line-block;
vertical-align: middle;
float: left;
}
.wrap h2 span {
display: block;
letter-spacing: .17em;
}
.navwrap {
margin-top: 0px;
overflow: hidden;
padding-top: 16px;
padding-bottom: 0px;
margin-bottom: 10px;
}
<div class="wrap">
<h2 class="minecrafter">Miners <span>Union</span></h2>
<div class="navwrap">
<ul class="nav">
<li>Home
</li>
<li>Forums
</li>
<li>Donate
</li>
<li>Apply
</li>
<li>Map
</li>
</ul>
</div>
</div>
Or look this way
.nav{
list-style: none;
}
.nav li{
display: inline-block;
min-width: 100px;
}
.nav li a{
text-decoration: none;
background-color: #EEEEEE;
color: #666666;
padding: 6px;
border: 1px solid #CCC;
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: block;
text-align: center;
}