CSS positioning works with chrome but not other browsers?

CSS positioning works with chrome but not other browsers? - javascript

The items on my website are positioned correctly when viewed in Google Chrome, as they should be left to the store box and stay inside the dark gray container. But in IE/Mozilla/Other browsers, it drops the items far down.
body {
font-family: Arial, "Free Sans";
margin: 0;
padding: 0;
}
#main {
background: #0099cc;
margin-top: 0;
padding: 2px 0 4px 0;
text-align: center;
}
#main a {
color: #ffffff;
text-decoration: none;
font-size: 12px;
font-weight: bold;
font-family: Arial;
}
#main a:hover {
text-decoration: underline;
}
#item_container {
width: 200px;
margin-left:10px;
margin-top: -360px;
height:400px;
margin-bottom: 10px;
}
.item {
background: #fff;
float: left;
padding: 5px;
margin: 5px;
cursor: move;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.5);
box-shadow: 0 1px 2px rgba(0,0,0,.5);
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
z-index: 5;
}
.title, .price {
display: block;
text-align: center;
font-size: 14px;
letter-spacing: -1px;
font-weight: bold;
cursor: move;
}
.title {
color: #333;
}
.price {
color: #0099cc;
margin-top: 5px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
}
.icart, .icart label {
cursor: e-resize;
}
.divrm {
text-align: right;
}
.remove {
text-decoration: none;
cursor: pointer;
font-weight: bold;
font-size: 20px;
position: relative;
top: -7px;
}
.remove:hover {
color: #999;
}
.clear {
clear: both;
}
#cart_container {
margin-top:0px;
margin-left:260px;
width: 565px;
}
#cart_title span {
border: 8px solid #666;
border-bottom-width: 0;
background: #333;
display: block;
float: left;
color: #fff;
font-size: 11px;
font-weight: bold;
padding: 5px 10px;
-webkit-border-radius: .5em .5em 0 0;
-moz-border-radius: .5em .5em 0 0;
border-radius: .5em .5em 0 0;
}
#cart_toolbar {
overflow: hidden;
border: 8px solid #666;
height: 290px;
z-index: -2;
width: 565px;
-webkit-border-radius: 0 .5em 0 0;
-moz-border-radius: 0 .5em 0 0;
border-radius: 0 .5em 0 0;
background: #ffffff;
}
#cart_items {
height: 100%;
width: 100%;
position: relative;
padding: 0 0 0 2px;
z-index: 0;
cursor: e-resize;
border-width: 0 2px;
}
.back {
background: #e9e9e9;
}
#navigate {
width: 545px;
margin: 0 auto;
border: 8px solid #666;
border-top-width: 0;
-webkit-border-radius: 0 0 .5em .5em;
-moz-border-radius: 0 0 .5em .5em;
border-radius: 0 0 .5em .5em;
padding: 10px;
font-size: 14px;
background: #333;
font-weight: bold;
}
#nav_left {
float: left;
}
#nav_left a {
padding: 4px 8px;
background: #fff;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
text-decoration: none;
color:#0099cc;
}
#nav_left a:hover {
background: #666;
color: #fff;
}
#nav_right {
float: right;
}
.sptext {
background: #ffffff;
padding: 4px 8px;
margin-left: 8px;
-webkit-border-radius: .5em;
-moz-border-radius: .5em;
border-radius: .5em;
color: #666;
}
.count {
color: #0099cc;
}
.drop-active {
background: #ffff99;
}
.drop-hover {
background: #ffff66;
}

Add float:left to #item_container.
#item_container {
float:left;
width: 200px;
margin-left:10px;
margin-top: -360px;
height:400px;
margin-bottom: 10px;
}

Related

Can I make slideToggle() overlap a div rather than move it?

I have a website that I am making with a friend and there is a problem where, when a dropdown tab is being slideToggle()'d with jquery, it moves the html div below it, and I just want it to overlap it, is there an easy way to do it?
Here is my html code:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.2.0.min.js"
integrity="sha256-JAW99MJVpJBGcbzEuXk4Az05s/XyDdBomFqNlM3ic+I="
crossorigin="anonymous"></script>
<script type='text/javascript' src='script.js'></script>
<link rel='stylesheet' type='text/css' href='style.css'/>
<link href="https://fonts.googleapis.com/css?family=Annie+Use+Your+Telescope|Architects+Daughter|Coda|Indie+Flower|Shadows+Into+Light|Special+Elite" rel="stylesheet">
<title>ALFEX Inc.</title>
</head>
<body>
<div class='content'>
<div class='header'>
<h1>ALFEX INCORPORATED</h1>
<ul class='tabsbar'>
<a class='link' href='alfex.html'><li class='tab'>Home</li></a>
<div class='link'><li class='tab' id='gam'>Gags & Memes</li></div>
<div class='link'><li class='tab' id='crew'>The Crew</li></div>
<a class='link' href='alfex-codex.html'><li class='tab'>The Codex</li></a>
<a class='link' href='alfex-minigames.html'><li class='tab'>Minigames</li></a>
</ul>
</div>
<div class='panel-gam'>
<ul class='panel-list'>
<a class='p-link' href='alfex-gagsandmemes-doggo.html'><li class='p-tab'>Doggo Memes</li></a>
<a class='p-link' href='alfex-gagsandmemes-dad.html'><li class='p-tab'>Dad Jokes</li></a>
<a class='p-link' href='alfex-gagsandmemes-pun.html'><li class='p-tab'>Puns</li></a>
</ul>
</div>
<div class='panel-crew'>
<ul class='panel-list'>
<a class='p-link' href='alfex-alfie.html'><li class='p-tab'>Alfie</li></a>
<a class='p-link' href='alfex-alex.html'><li class='p-tab'>Alex</li></a>
</ul>
</div>
<div class='main'>
<h2>Welcome to the Alfex Inc. website</h2>
<h3>for all your cousin needs xD.</h3>
<div class='olexparent'>
<iframe class='olexvideo' width="560" height="315" src="https://www.youtube.com/embed/aa6IGzjY_kI?list=PLsCWhnzJYhqRCjHKprzyP7vQBJexv6OOZ" frameborder="0" allowfullscreen align="right"></iframe>
</div>
<p class="intro"></p>
</div>
</div>
</body>
</html>
Here is my JavaScript Code:
$(document).ready(function() {
$('.content').hide();
$('.content').fadeIn(800);
$('#gam').click(function() {
$('.panel-crew').slideUp(0);
$('.panel-gam').slideToggle();
});
$('#crew').click(function() {
$('.panel-gam').slideUp(0);
$('.panel-crew').slideToggle();
});
});
If needed, here is my CSS:
/* * {
border-style: solid;
border-width: 0.5px;
border-color: #fff;
box-sizing: border-box;
} */
body {
margin: 0px;
padding: 0px;
background-image: url('http://images.naldzgraphics.net/2012/08/4-lined.jpg');
background-repeat: repeat-y;
background-size: 100%;
}
.tabsbar {
list-style-type: none;
margin: 0px;
padding: 0px;
background-color: #525c68;
}
.tab {
padding: 18px 0px 18px 0px;
float: left;
max-width: 20%;
min-width: 20%;
display: block;
text-align: center;
background-color: #525c68;
color: #5dbace;
}
.header {
display: block;
background-color: #525c68;
}
.link{
text-decoration: none;
background-color: #525c68;
color: #7bcadb;
font-family: 'Special Elite', 'Coda', sans-serif;
}
h1 {
color: #ffffff;
font-family: sans-serif;
font-size: 550%;
display: block;
background-color: #525c68;
margin: 0px;
text-align: center;
padding: 10px;
}
p {
font-family: 'Annie Use Your Telescope', 'Indie Flower', 'Shadows Into Light', 'Architects Daughter', cursive;
font-size: 24px;
}
h2 {
font-size: 30px;
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
border-bottom-style: solid;
border-bottom-width: 1px;
padding-bottom: 10px;
}
.main {
background-color: #d8d8d8;
max-width: 80%;
margin: 0px 10% 180px 10%;
padding: 80px 80px 100px 80px;
}
h3, .minigames-subheading, .minigames-subheading2, .alfie-subheading {
opacity: 0.5;
padding: 5px 0px 0px 0px;
position: relative;
bottom: 20px;
font-style: italic;
font-family: 'Coda', sans-serif;
margin-right: 50%;
font-size: 26px;
}
.olexvideo {
max-width: 100%;
position: relative;
bottom: 59px;
max-width: 52%;
}
.panel-gam {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 20%;
}
.panel-crew {
text-decoration: none;
background-color: #525c68;
border-radius: 0px 0px 10px 10px;
width: 20%;
display: none;
padding-top: 0px;
position: relative;
left: 40%;
}
.p-link {
text-decoration: none;
color: #ffffff;
font-family: 'Special Elite', 'Coda', sans-serif;
padding: 0px 20px 20px 20px;
}
.panel-list {
padding: 0px 40px 10px 40px;
list-style-type: none;
}
a.p-link:hover {
color: #d8d8d8;
}
h4 {
font-family: 'Special Elite', 'Annie Use Your Telescope', cursive;
padding: 0px;
font-size: 20px;
border-bottom-style: solid;
border-bottom-color: #737373;
border-bottom-width: 2px;
padding-bottom: 5px;
}
.rockpaperscissors {
border-style: solid;
border-width: 5px;
border-radius: 10px;
margin: 20px 0px 10px 0px;
padding: 20px 20px 60px 20px;
background: #a6a6a6;
border-color: #a6a6a6;
min-height: 300px;
}
button {
border-style: outset;
border-color: #4f5864;
background-color: #525c68;
color: #7bcadb;
padding: 40px;
border-radius: 5px;
font-family: 'Special Elite', 'Coda', sans-serif;
width: 33%;
font-size: 28px;
}
button:hover {
border-style: inset;
border-color: #73c6d9;
background-color: #7bcadb;
color: #ffffff;
}
.result {
font-family: 'Special Elite', 'Coda', sans-serif;
font-size: 50px;
}
.reset {
position: relative;
top: 20px;
width: 100%;
}
li.tab:hover {
background-color: #7bcadb;
color: #ffffff;
}
.specialised-memes {
border: none;
padding: 20px 5px 20px 5px;
font-family:
width: 100%;
height: 1000px;
overflow: scroll;
}
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: #f5f5f5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
background: #ccc;
}
::-webkit-scrollbar-thumb:hover {
background: #999;
}
.page-feed {
position: relative;
bottom: 1000px;
max-width: 45%;
overflow: scroll;
}
img {
width: 100%;
padding: 20px 0px 20px 0px;
}
.left-side {
width: 520px;
}
.fb-picture {
position: relative;
bottom: 393px;
background-color: #a6a6a6;
border-radius: 10px;
}
.embed {
border-radius: 50px;
padding: 50px;
background-color: #a6a6a6;
width: 50%;
}
.intro {
margin-left: 20px;
}

How to make dropdown menu

I find this dropdown menu on internet.The problem is dropdown is always open and it doesnt work.When i paste all default code from http://codepen.io/Jeplaa/pen/IzAvx
it doesn't work.Please can you help me.How i can make when user click button it show dropdown menu and stay until user click on button again.
I include 2 scripts
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="assets/js/menu.js"></script>
Also the the code of dropdown menu:
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Replace this line:
$( ".cog, .admin-text" ).on( "click", function()
With this line:
$( ".admin-panel" ).on( "click", function()
... and it will work.
You can check it on Codepen: http://codepen.io/catalin586/pen/LRbELV
You may also want to add a display none by default to your menu:
.menu {display: none;}

you use in JQ
$( ".cog, .admin-text" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
.cog and .admin-text do not exist in your HTML . i guess you want your .menu to appear ( fadeIn ) after you click the .arrow or on the text with class ".user_text"
also you say that the .menu always appears, ofcourse that happens if you don't hide it. in this example i've hidden it by setting {display:none} in CSS
see code below
let me know if this is what you want.
$(".down,.user_text").click(function(){
$(".menu").fadeToggle( "fast" );
})
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
.menu { display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics
Settings
Logout
</div>
</div>
</div>

.down & .user_text
Try it:
$( ".down, .user_text" ).on( "click", function() {
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img">
<b class="user_text">Curtis Jackson</b>
</div>
<span class="down">
<img src="http://i.imgur.com/bLXw2RL.png">
</span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

Remove the .cog and change .admin-text to .admin-panel
$( ".cog, .admin-text" ).on( "click", function()
to
$( ".admin-panel" ).on( "click", function()
Hope it helps!
$( ".admin-panel" ).on( "click", function()
{
$( ".menu" ).stop().fadeToggle( "fast" );
});
/*MENU CSS------------*/
.top {
background-color:#F8F8F8;
width:100%;
height:60px;
-webkit-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
-moz-box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
box-shadow: inset 0px -200px 8px -200px rgba(178,176,176,1);
}
.profile_img {
max-width: 28px;
max-height: 32px;
margin-top:5px;
}
.content
{
position: relative;
top: 5px;
width: 250px;
margin-left:30px;
}
.user_text {
display:inline-block;
margin-left:20px;
vertical-align:20%;
font-family: "Open Sans", sans-serif;
font-size: 15px;
}
.admin-panel
{
background: #F8F8F8;
width: 240px;
height: 40px;
color: #888;
border: none;
border-radius: 3px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
line-height: 41px;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
margin-bottom: 7px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
}
.down
{
position: absolute;
top: 0;
right: 0;
padding: 10px 14px 0 0;
border: none;
color: #888888;
font-size: 20px;
}
.down:hover { color: #555555; }
.user_text { cursor: pointer; }
.menu a
{
display: block;
background: #F8F8F8;
width: 240px;
height: 40px;
padding: 0 0 0 10px;
font: bold 13px Helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
color: #000000;
color: rgba( 0, 0, 0, 0.4 );
line-height: 40px;
box-shadow: 0 1px 1px rgba( 0, 0, 0, 0.2 );
font-family: "Open Sans", sans-serif;
font-size: 13px;
}
.menu a:nth-child( 2 )
{
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.menu a:last-child
{
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.menu a:hover { color: #555555; }
.menu a:hover > .octicon { color: #555555; }
.arrow
{
width: 0;
height: 0;
margin-left: 15px;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 9px solid #F8F8F8;
}
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:300">
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<div class="top">
<div class="content">
<div class="admin-panel"><img src="http://i.imgur.com/wmyOI5f.jpg" class="profile_img"><b class="user_text">Curtis Jackson</b></div> <span class="down"><img src="http://i.imgur.com/bLXw2RL.png"></span>
<div class="menu">
<div class="arrow"></div>
Edit User
Worker Statistics</span>
Settings</span>
Logout
</div>
</div>
</div>

You are not having any elements with classes either cog or admin-text. You are using onclick on these. The codePen example which you have provided contains an element with admin-text class

you can use fadeIn and fadeOut in jquery
see the documentation in jquery

Customize toggle button in Bootstrap using only CSS?

I have a demo that uses the toggle dropdown button of bootstrap. I've customized the bootstrap.css but not boostrap.js. Can I use toggle without boostrap.js?
Demo
Here is the snippet:
$(document).ready(function() {
$('#firstvalue').addClass('user-click');
$('#usr').val("(" + $("#firstTag").text() + ")");
$('#demolist li a').on('click', function() {
$('.user-click').removeClass('user-click');
$(this).find('.user-check').addClass('user-click');
$('#usr').val("(" + $(this).text() + ")");
});
});
.user-check {
cursor: pointer;
display: block;
height: 16px;
margin: 0px 0px 0px 0px;
outline: 0 none;
padding: 8px 5px 0px 0px;
position: relative;
top: 1px;
width: 16px;
z-index: 1;
float: left;
}
.user-click:before {
bottom: 10px;
content: "\2713";
display: block;
position: relative;
right: 0px;
transform: rotate(15deg);
transition: all 1s ease-out 0s;
width: 14px;
font-size: 15px;
color: #444444;
}
.btnAlpha-inverse {
color: #fff;
height: 20px;
width: 20px;
background-color: #444444;
border-color: #444444;
/*set the color you want here*/
}
.btnAlpha-inverse:hover,
.btnAlpha-inverse:focus,
.btnAlpha-inverse:active,
.btnAlpha-inverse.active,
.btnAlpha-inverse.disabled,
.btnAlpha-inverse[disabled] {
color: #ffffff;
background-color: #444444;
*background-color: #444444;
}
.btnAlpha-small {
padding: 2px 10px;
font-size: 11.9px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus,
.dropdown-submenu:hover>a,
.dropdown-submenu:focus>a {
text-decoration: none;
color: #444444;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f5f5f5), to(#f5f5f5));
background-image: -webkit-linear-gradient(top, #f5f5f5, #f5f5f5);
background-image: -o-linear-gradient(top, #f5f5f5, #f5f5f5);
/* background-image: linear-gradient(to bottom, #0088cc, #0077b3); */
background-repeat: repeat-x;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff0088cc', endColorstr='#ff0077b3', GradientType=0);
}
.btnAlpha-groupAlpha-lg>.btnAlpha,
.btnAlpha-lg {
padding: 10px 16px;
font-size: 18px;
line-height: 1.3333333;
border-radius: 6px
}
.btnAlpha-groupAlpha-sm>.btnAlpha,
.btnAlpha-sm {
padding: 5px 10px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-groupAlpha-xs>.btnAlpha,
.btnAlpha-xs {
padding: 1px 5px;
font-size: 12px;
line-height: 1.5;
border-radius: 3px
}
.btnAlpha-block {
display: block;
width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha>.btnAlpha {
position: relative;
float: left
}
.btnAlpha-groupAlpha-vertical>.btnAlpha.active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:active,
.btnAlpha-groupAlpha-vertical>.btnAlpha:focus,
.btnAlpha-groupAlpha-vertical>.btnAlpha:hover,
.btnAlpha-groupAlpha>.btnAlpha.active,
.btnAlpha-groupAlpha>.btnAlpha:active,
.btnAlpha-groupAlpha>.btnAlpha:focus,
.btnAlpha-groupAlpha>.btnAlpha:hover {
z-index: 2
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha .btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-left: -1px
}
.btnAlpha-toolbar {
margin-left: -5px
}
.btnAlpha-toolbar .btnAlpha,
.btnAlpha-toolbar .btnAlpha-groupAlpha,
.btnAlpha-toolbar .input-group {
float: left
}
.btnAlpha-toolbar>.btnAlpha,
.btnAlpha-toolbar>.btnAlpha-groupAlpha,
.btnAlpha-toolbar>.input-group {
margin-left: 5px
}
.btnAlpha-groupAlpha>.btnAlpha:not(:first-child):not(:last-child):not(.dropdown-toggle) {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child {
margin-left: 0
}
.btnAlpha-groupAlpha>.btnAlpha:first-child:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha:last-child:not(:first-child),
.btnAlpha-groupAlpha>.dropdown-toggle:not(:first-child) {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha {
float: left
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.btnAlpha-groupAlpha>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha .dropdown-toggle:active,
.btnAlpha-groupAlpha.open .dropdown-toggle {
outline: 0
}
.btnAlpha-groupAlpha>.btnAlpha+.dropdown-toggle {
padding-right: 8px;
padding-left: 8px
}
.btnAlpha-groupAlpha>.btnAlpha-lg+.dropdown-toggle {
padding-right: 12px;
padding-left: 12px
}
.btnAlpha-groupAlpha.open .dropdown-toggle {
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125)
}
.btnAlpha-groupAlpha.open .dropdown-toggle.btnAlpha-link {
-webkit-box-shadow: none;
box-shadow: none
}
.btnAlpha .caret {
margin-left: 0
}
.btnAlpha-lg .caret {
border-width: 5px 5px 0;
border-bottom-width: 0
}
.dropup .btnAlpha-lg .caret {
border-width: 0 5px 5px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
display: block;
float: none;
width: 100%;
max-width: 100%
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha>.btnAlpha {
float: none
}
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha+.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha+.btnAlpha-groupAlpha {
margin-top: -1px;
margin-left: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:not(:first-child):not(:last-child) {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:first-child:not(:last-child) {
border-top-right-radius: 4px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha:last-child:not(:first-child) {
border-top-left-radius: 0;
border-top-right-radius: 0;
border-bottom-left-radius: 4px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:not(:first-child):not(:last-child)>.btnAlpha {
border-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.btnAlpha:last-child,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:first-child:not(:last-child)>.dropdown-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:last-child:not(:first-child)>.btnAlpha:first-child {
border-top-left-radius: 0;
border-top-right-radius: 0
}
.btnAlpha-groupAlpha-justified {
display: table;
width: 100%;
table-layout: fixed;
border-collapse: separate
}
.btnAlpha-groupAlpha-justified>.btnAlpha,
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha {
display: table-cell;
float: none;
width: 1%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .btnAlpha {
width: 100%
}
.btnAlpha-groupAlpha-justified>.btnAlpha-groupAlpha .dropdown-menu {
left: auto
}
[data-toggle=buttons]>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha input[type=radio],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=checkbox],
[data-toggle=buttons]>.btnAlpha-groupAlpha>.btnAlpha input[type=radio] {
position: absolute;
clip: rect(0, 0, 0, 0);
pointer-events: none
}
.btnAlpha-groupAlpha,
.btnAlpha-groupAlpha-vertical {
position: relative;
display: inline-block;
vertical-align: middle
}
.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:first-child>.dropdown-toggle,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha:not(:last-child)>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha:not(:last-child):not(.dropdown-toggle) {
border-top-right-radius: 0;
border-bottom-right-radius: 0
}
.input-group-addon:first-child {
border-right: 0
}
.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha:not(:first-child)>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha:not(:first-child),
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha>.btnAlpha,
.input-group-btnAlpha:last-child>.dropdown-toggle {
border-top-left-radius: 0;
border-bottom-left-radius: 0
}
.input-group-addon:last-child {
border-left: 0
}
.input-group-btnAlpha {
position: relative;
font-size: 0;
white-space: nowrap
}
.input-group-btnAlpha>.btnAlpha {
position: relative
}
.input-group-btnAlpha>.btnAlpha+.btnAlpha {
margin-left: -1px
}
.input-group-btnAlpha>.btnAlpha:active,
.input-group-btnAlpha>.btnAlpha:focus,
.input-group-btnAlpha>.btnAlpha:hover {
z-index: 2
}
.input-group-btnAlpha:first-child>.btnAlpha,
.input-group-btnAlpha:first-child>.btnAlpha-groupAlpha {
margin-right: -1px
}
.input-group-btnAlpha:last-child>.btnAlpha,
.input-group-btnAlpha:last-child>.btnAlpha-groupAlpha {
z-index: 2;
margin-left: -1px
}
.btnAlpha-groupAlpha .btnAlpha+.btnAlpha {
margin-left: -1px
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:before,
.btnAlpha-toolbar:after,
.btnAlpha-toolbar:before,
.clearfix:after,
.clearfix:before,
.container-fluid:after,
.container-fluid:before,
.container:after,
.container:before,
.dl-horizontal dd:after,
.dl-horizontal dd:before,
.form-horizontal .form-group:after,
.form-horizontal .form-group:before,
.modal-footer:after,
.modal-footer:before,
.nav:after,
.nav:before,
.navbar-collapse:after,
.navbar-collapse:before,
.navbar-header:after,
.navbar-header:before,
.navbar:after,
.navbar:before,
.pager:after,
.pager:before,
.panel-body:after,
.panel-body:before,
.row:after,
.row:before {
display: table;
content: " "
}
.btnAlpha-groupAlpha-vertical>.btnAlpha-groupAlpha:after,
.btnAlpha-toolbar:after,
.clearfix:after,
.container-fluid:after,
.container:after,
.dl-horizontal dd:after,
.form-horizontal .form-group:after,
.modal-footer:after,
.nav:after,
.navbar-collapse:after,
.navbar-header:after,
.navbar:after,
.pager:after,
.panel-body:after,
.row:after {
clear: both
}
.btnAlpha-groupAlpha-xs>.btnAlpha .badge,
.btnAlpha-xs .badge {
top: 0;
padding: 1px 5px
}
a.badge:focus,
a.badge:hover {
color: #fff;
text-decoration: none;
cursor: pointer
}
.open>.dropdown-menu {
display: block;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 160px;
padding: 5px 0;
margin: 2px 0 0;
font-size: 14px;
text-align: left;
list-style: none;
background-color: #fff;
-webkit-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid #ccc;
border: 1px solid rgba(0, 0, 0, .15);
border-radius: 4px;
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.42857143;
color: #333;
background-color: #fff;
}
.dropdown-header {
display: block;
padding: 3px 20px;
font-size: 12px;
line-height: 1.42857143;
color: #444444;
white-space: nowrap;
font-weight: bold;
}
.ul {
margin-top: 0;
margin-bottom: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.dropdown-menu>li>a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
text-decoration: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background-color: transparent;
}
.list-unstyled {
padding-left: 0;
list-style: none
}
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none
}
.list-inline>li {
display: inline-block;
padding-right: 5px;
padding-left: 5px
}
<div class="dropdown btnAlpha-groupAlpha">
<button class="btnAlpha btnAlpha-small btnAlpha-inverse dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
V
</button>
<ul class="dropdown-menu" id="demolist">
<li class="dropdown-header">Search in:</li>
<li>
<a href="#" id="firstTag">
<div class="user-check" id="firstvalue"></div>Korean</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Chinese</a>
</li>
<li>
<a href="#">
<div class="user-check"></div>Japanese</a>
</li>
</ul>
<input type="text" class="form-control" id="usr">
</div>

JQuery.TextnTags plugin not working

I am trying to implement a Facebook and Twitter like status posting textbox in which you can tag your friends or pages. After a 12 hour research on Google, I found this http://daniel-zahariev.github.io/jquery-textntags/. It's exactly what I wanted. But when I tried to implement it on JSFiddle, it didn't worked. Am I missing something? This is my fiddle code:
$('textarea.tagged_text').textntags({
onDataRequest: function(mode, query, triggerChar, callback) {
var data = [{
id: 1,
name: 'Daniel Zahariev',
'img': 'http://example.com/img1.jpg',
'type': 'contact'
}, {
id: 2,
name: 'Daniel Radcliffe',
'img': 'http://example.com/img2.jpg',
'type': 'contact'
}, {
id: 3,
name: 'Daniel Nathans',
'img': 'http://example.com/img3.jpg',
'type': 'contact'
}];
query = query.toLowerCase();
var found = _.filter(data, function(item) {
return item.name.toLowerCase().indexOf(query) > -1;
});
callback.call(this, found);
}
});
.textntags-wrapper {
position: relative;
background: #fff;
}
.textntags-wrapper textarea {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
display: block;
height: 18px;
padding: 9px;
margin: 0;
border: 1px solid #dcdcdc;
border-radius: 3px;
overflow: hidden;
background: transparent;
outline: 0;
resize: none;
font-family: Arial;
font-size: 13px;
line-height: 17px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#-moz-document url-prefix() {
.textntags-wrapper textarea {
padding: 9px 8px;
}
}
.textntags-wrapper .textntags-tag-list {
display: none;
background: #fff;
border: 1px solid #b2b2b2;
position: absolute;
left: 0;
right: 0;
z-index: 10000;
margin-top: -2px;
border-radius: 5px;
border-top-right-radius: 0;
border-top-left-radius: 0;
-webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438);
-moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.148438);
}
.textntags-wrapper .textntags-tag-list ul {
margin: 0;
padding: 0;
}
.textntags-wrapper .textntags-tag-list li {
background-color: #fff;
padding: 0 5px;
margin: 0;
width: auto;
border-bottom: 1px solid #eee;
height: 26px;
line-height: 26px;
overflow: hidden;
cursor: pointer;
list-style: none;
white-space: nowrap;
}
.textntags-wrapper .textntags-tag-list li:last-child {
border-radius: 5px;
}
.textntags-wrapper .textntags-tag-list li > img,
.textntags-wrapper .textntags-tag-list li > div.icon {
width: 16px;
height: 16px;
float: left;
margin-top: 5px;
margin-right: 5px;
-moz-background-origin: 3px;
border-radius: 3px;
}
.textntags-wrapper .textntags-tag-list li em {
font-weight: bold;
font-style: none;
}
.textntags-wrapper .textntags-tag-list li:hover,
.textntags-wrapper .textntags-tag-list li.active {
background-color: #f2f2f2;
}
.textntags-wrapper .textntags-tag-list li b {
background: #ffff99;
font-weight: normal;
}
.textntags-wrapper .textntags-beautifier {
position: relative;
padding: 10px;
color: #fff;
white-space: pre-wrap;
word-wrap: break-word;
}
.textntags-wrapper .textntags-beautifier > div {
color: #fff;
white-space: pre-wrap;
width: 100%;
font-family: Arial;
font-size: 13px;
line-height: 17px;
min-height: 17px;
}
.textntags-wrapper .textntags-beautifier > div > strong {
font-weight: normal;
background: #d8dfea;
line-height: 16px;
}
.textntags-wrapper .textntags-beautifier > div > strong > span {
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://daniel-zahariev.github.io/jquery-textntags/jquery-textntags.js"></script>
<textarea class='tagged_text'></textarea>

I was able to get it working here: http://jsfiddle.net/6205ef8j/1/
There are two problems:
The extension depends on underscore.js so I added that without issue.
The extension depends on $.browser which has been deprecated. So I hardcoded $.browser to be true for webkit like so:
$.browser = {webkit: true}
You will need to use a shim to add back $.browser or use an old version of jQuery.

How do I get a div to move with window resize without pushing other divs out of the way?

I've spent a long time trying to get this working.
I have a section called "RightExtra" and a div inside it called "RightExtraContent". I'm trying to make it so that these two divs can move freely when the window is resized up to a certain point, without affecting the position of any other divs.
Here is a visual explanation of what I mean:
http://i.imgur.com/A3qBGsj.png
And here is the fiddle: http://jsfiddle.net/c21nzs13/1/
I've tried a bunch of different code combinations and still no success.
* {
padding: 0;
margin: 0;
}
html {
background: #1e1e1e;
/*Back Colors 1*/
}
body {
background-color: #1e1e1e;
/*background:url('https://snap-photos.s3.amazonaws.com/img-thumbs/960w/4657039731.jpg');*/
}
a {
color: #FFFFFF;
text-decoration: none;
}
a:active,
a:hover {
text-decoration: underline;
}
.nofancy a {
text-decoration: none;
}
/*These nofancies don't work*/
.nofancy a:hover {
text-decoration: none;
}
/*These nofancies don't work*/
#heady {
text-align: center;
width: 100%;
height: 75px;
background-color: #1e1e1e;
/*Back Colors 2*/
font-family: Tahoma;
font-size: 16px;
color: #000000;
position: relative;
margin-bottom: 30px;
}
#wrapper {
text-align: center;
width: 1000px;
height: 100%;
margin-left: auto;
margin-right: auto;
/*background-color:#1e1e1e; Back Colors 3*/
font-family: Tahoma;
font-size: 16px;
position: relative;
}
#RightExtra {
background-color: none;
width: 500px;
float: right;
margin-left: auto;
margin-right: auto;
position: relative;
}
#RightExtraContent {
font-family: Tahoma;
font-size: 16px;
height: 800px;
width: 300px;
color: white;
background-color: #343434;
text-align: center;
border-radius: 30px;
position: fixed;
float: right;
}
#followfoot {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 180px;
background-color: none;
text-align: center;
/*display:none;*/
}
#mag {
background-color: #739FE0;
border-color: #739FE0;
border-style: solid;
border-width: 2px;
border-radius: 20px;
line-height: 10px;
text-align: center;
margin-left: 8px;
cursor: pointer;
}
#feety {
text-align: center;
width: 100%;
height: 0px;
//100px background-color:darkslateblue;
/*Back Colors 4*/
font-family: Tahoma;
font-size: 16px;
color: white;
position: fixed;
//Changing this to relative makes followfoot disappear when you scroll long enough.
}
.UpCenter {
/*background-color:#1e1e1e; Back Colors 5*/
padding-top: 30px;
margin-bottom: 50px;
height: 90px;
}
.SignUp {
background-color: #ccc;
border-width: 1px;
border-color: #ccc;
border-radius: 10px;
width: 75px;
padding: 0px 0px;
margin-left: 30px;
text-align: center;
float: right;
}
/* clearfix */
/**
* For modern browsers
* 1. The space content is one way to avoid an Opera bug when the
* contenteditable attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements
* that are clearfixed.
* 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements.
*/
.cf:before,
.cf:after {
content: " ";
/* 1 */
display: table;
/* 2 */
}
.cf:after {
clear: both;
}
.cf {
* zoom: 1;
}
ul.navbar {
border-style: solid;
border-width: 1px;
border-color: #739FE0;
width: 100px;
/*Widthchanger1*/
border-radius: 4px;
margin-left: 0px;
margin-right: 0px;
font-size: 14px;
height: 33px;
}
ul.navbar li a.ActiveListItem {
color: white;
!important;
background-color: #222 !important;
padding: 7.5px 0px !important;
font-weight: normal !important;
margin-left: 0px;
/*Widthchanger2, got the activeitem centered with list text this way*/
margin-right: 0px;
border-radius: 4px;
height: 18px;
width: 100px;
/*kinda messes with width of text*/
margin-bottom: 1px;
}
ul.navbar li {
position: relative;
width: 100px;
/*Changes width of actual list*/
}
ul.navbar li a {
display: block;
color: white;
padding: 10px 5px;
text-decoration: none;
transition: all .1s ease-in;
}
ul.navbar li a:hover,
ul.navbar li:hover > a {
/*background:black; */
background: #739FE0;
color: #FFFFFF;
/*font-weight:600;*/
/*border-bottom-color:#FFFFFF;
border-bottom-style:solid;*/
/*border-color:#FFFFFF;
border-style:solid;
border-width:1px; */
}
ul.navbar li ul {
margin-top: 0px;
/*Controls space from listdropdown to listchooser*/
position: absolute;
background: #222;
font-size: 14px;
/* min-width: 200px; */
display: none;
z-index: 99;
box-shadow: inset 0 0px 3px rgba(0, 0, 0, .6), 0 5px 10px rgba(0, 0, 0, .6);
}
ol,
ul {
list-style: outside none none;
}
.hidden {
display: none;
}
/*Lister*/
form {} .lister input {
width: 235px;
/*width of todo input box*/
height: 33px;
padding-left: 10px;
padding-right: 10px;
border-width: 1px;
border-style: solid;
border-color: #739FE0;
float: left;
margin-bottom: 20px;
font-size: 14px;
font-family: "Tahoma";
background-color: #222;
color: white;
}
.lister input:focus {
outline: none;
border-color: #739FE0;
/*ccc*/
box-shadow: 0px 0px 7px 0px #739FE0;
}
.lister ul {
/*list-style: square inside;*/
padding: 10px 0px 55px 0px;
/* padding for outside area of list*/
/* This is what's visible when not in use Used to be 10*/
/*height:50px;*/
/*background: #0f705d; DarkerOutsideColor*/
background: none;
/*width: 100%;*/
font-family: "Tahoma";
}
.active {
text-align: center;
}
.inactive {
display: none;
}
.lister li {
font-size: 14px;
/*font size of list items*/
/*font-weight: 600;*/
color: #181818;
/*Font Color d5faf3*/
display: inline-block;
/*This makes the items side-by-side and not columns*/
padding: 9px;
margin-bottom: 5px;
/*SEPARATE*/
/* float:left; Interferes with text-align of Active*/
}
.lister li:nth-child(odd) {
background: #343434;
/*LighterInside Color,Odd*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
/*opacity:0.6;
filter:alpha(opacity=60);*/
}
.lister li:nth-child(even) {
background: #343434;
/*LighterInside Color,Even*/
border-color: #ccc;
border-width: 1px;
border-radius: 5px;
border-style: solid;
box-shadow: 0px 0px 10px 0px #000000;
color: #ccc;
}
.lister li > a {
/*float: right;*/
text-decoration: none;
color: white;
font-weight: bold;
/*transition: all .2s ease-in-out;*/
/*position:relative;*/
margin-top: 2px;
display: inline-block;
}
.lister li > a:hover {
/*font-size: 105%;*/
/*color: #c0392b;*/
color: #000000;
}
.lister li > span {
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
max-width: 379px;
}
/*Clearable*/
.clearable {
/*background: #fff; */
/*background:url(../images/splusgreen.png); */
background-repeat: no-repeat;
background-size: 10px 10px;
background-position: right 5px center;
/* -15*/
transition: background 0.4s;
}
.clearable.x {
/*background-position: right 5px center;*/
}
.clearable.onX {
cursor: pointer;
}
<section id="heady">
<div style="width:1000px;margin-left:auto;margin-right:auto;">
<div style="text-align: left;padding:25px 0px;display:inline-block;float:left;font-size:18px;"><b>Calories</b>
</div>
<div style="text-align: right;padding:25px 00px;display:inline-block;float:right;">
<!--Home | --> Sign In | Sign Up
</div>
</div>
</section>
<section id="RightExtra">
<div id="RightExtraContent">Yes hello....!</div>
</section>
<section id="wrapper">
<br>
<br>
<div class="UpCenter">
<div style="vertical-align:top;display:inline-block;">
<ul class="navbar cf">
<li> Category
<ul></ul>
</li>
</ul>
</div>
<div class="lister" style="display:inline-block;vertical-align:top;padding:0px 0px 0px 10px;">
<form action="">
<input type="text" class="clearable" placeholder="Add your meals here..." autocomplete="off">
</form>
</div>
<div id="mag" style="display:inline-block;vertical-align:top;">
<img src="images/magCircy.png" width="33px" height="33px" onClick="changeHeight(this,event);"></img>
</div>
</div>
</div>
</section>
<section id="followfoot"></section>

In order to achieve this, I increased the width of the wrapper and moved the new div into it.

Develop Reference

JavaScript is the programming language of the Web.

CSS positioning works with chrome but not other browsers? - javascript

Add float:left to #item_container. #item_container { float:left; width: 200px; margin-left:10px; margin-top: -360px; height:400px; margin-bottom: 10px; }

Related

Can I make slideToggle() overlap a div rather than move it?

How to make dropdown menu

Customize toggle button in Bootstrap using only CSS?

JQuery.TextnTags plugin not working

How do I get a div to move with window resize without pushing other divs out of the way?

Categories

Resources