http://codepen.io/anon/pen/zqQJNM code pen for html and the css
I am trying to force the picture of the items to the top or the middle of the picture of the character I am not really sure how this is done any help? I have tried vertical-align different positions css is my weakest region so any help would be greatly appreciated!
#information{
background-color: CCFFFF;
border: groove;
width:100%;
height: 230px;
}
#summonerBox{
width: : 100px;
background-color: ;
}
#summonerInput{
width:200px;
height: 20px;
background-color: white;
}
.winBg{
background-color: green;
}
.loseBg{
background-color: red;
}
#itemList1{
position: inherit;
display: inline-block;
margin-left: 300px;
list-style-type: none;
vertical-align:top;
}
#itemlist2{
display: inline-block;
margin-left: 300px;
list-style-type: none;
}
#goldEarned{
list-style-type: none;
}
#gameType{
list-style-type: none;
}
#summonerGame{
list-style-type: none;
}
Use positioning for the element which you want to fix to top
//For left align
#itemList1{
position:absolute;
top:0;
left:0;
}
//to fix it with respect to you device screen then just use {position:fixed;} instead.
//For center align first wrap all UL with any Divlike
<div class="wrapper">
<ul>...</ul>
<ul>...</ul>
..
</div>
//CSS..
.wrapper{
position:absolute;
top:0;
left:50%;
right:50%;
width:300px;
margin-left:-150px
}
This will make all <ul> at the center of the screen and it will be responsive.
Try this as a simple solution :
#information{
background-color: #CCFFFF;
border: groove;
width:100%;
height: 230px;
position: relative;
}
#summonerBox{
width: 100px;
background-color: ;
}
#summonerInput{
width: 200px;
height: 20px;
background-color: white;
}
.winBg{
background-color: green;
}
.loseBg{
background-color: red;
}
#itemList1{
margin-left: 100px;
list-style-type: none;
position: absolute;
top: 0;
left: 0;
}
#itemlist2{
margin-left: 100px;
list-style-type: none;
position: absolute;
top: 50px;
left: 0;
}
#goldEarned{
list-style-type: none;
}
#gameType{
list-style-type: none;
}
#summonerGame{
list-style-type: none;
}
Related
I currently have a lack of idea on a css menu that I would like to realize. What I would like to do is that my menu is up and not down but that my TEST is at the top of my list and does not move until I no longer have my mouse on it. I don’t know how to do that right now, and if anyone has any ideas, I take it.Thank you for a good day.
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 413px;
left: 120px;
width: 192px;
height: 68px;
font-size: 20px;
}
.span1:hover {
background-color: #e83737;
position: absolute;
left: 120px;
top: 123px;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
position: absolute;
width: 192px;
top: 190px;
left: 120px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB
Not sure if I got what you're trying to achieve but try to change .span1:hover { to .dropdown:hover .span1 {.
There must be a relative positioned parent for a child absolute block.
Add this to your css:
.dropdown {
position: relative;
}
And the positioning rules for .span1:
top: 0;
left: 0;
Also, some selectors contained extra rules and selectors.
.dropdown {
position: relative;
}
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 0;
left: 0;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
width: 192px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
I made this checkbox menu. I want all divs to line up under and around each other when each box is checked, which some do beautifully, using Bootstrap. However, when you check "Research Methods," the two divs are separated from eachother and don't line up at the top/next to each other. I am wondering why this is? Here is a live demo:
http://dev.wwnorton.com/sandbox/showcase2015/test/OEBPS5/1-ChooseANorton.html
Here is the code:
Javascript:
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych').show():$('#dvIntroPsych').hide();
});
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych1').show():$('#dvIntroPsych1').hide();
});
$('#chkIntroPsych').click(function(){
this.checked?$('#dvIntroPsych2').show():$('#dvIntroPsych2').hide();
});
$('#chkResearch').click(function(){
this.checked?$('#dvResearch').show():$('#dvResearch').hide();
});
$('#chkResearch').click(function(){
this.checked?$('#dvResearch2').show():$('#dvResearch2').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych').show():$('#dvSocPsych').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych2').show():$('#dvSocPsych2').hide();
});
$('#chkSocPsych').click(function(){
this.checked?$('#dvSocPsych3').show():$('#dvSocPsych3').hide();
});
$('#chkCogPsych').click(function(){
this.checked?$('#dvCogPsych').show():$('#dvCogPsych').hide();
});
$('#chkCogPsych').click(function(){
this.checked?$('#dvCogPsych2').show():$('#dvCogPsych2').hide();
});
$('#chkPersonPsych').click(function(){
this.checked?$('#dvPersonPsych').show():$('#dvPersonPsych').hide();
});
$('#chkPersonPsych').click(function(){
this.checked?$('#dvPersonPsych2').show():$('#dvPersonPsych2').hide();
});
$('#chkDevPsych').click(function(){
this.checked?$('#dvDevPsych').show():$('#dvDevPsych').hide();
});
$('#chkHistory').click(function(){
this.checked?$('#dvHistory').show():$('#dvHistory').hide();
});
});
And CSS:
.spacer {
height: 10px;
width: 100%;
clear: both;
}
.bookcontainer {
width: 100%;
float: left;
display: block;
min-height: 260px;
margin: 5px;
padding: 20px;
-moz-box-shadow: 0 0 5px #acacac;
-webkit-box-shadow: 0 0 5px #acacac;
box-shadow: 0px 0px 5px #acacac;
border-radius:5px;
vertical-align: top;
background-color: #ffffff;
}
.bookcontainer .book img {
border: 1px solid #bbbbbb;
width: 20%;
height: 20%;
float: left;
margin-right: 15px;
vertical-align: top;
padding: 0;
position: relative;
top: 5px;
overflow: hidden;
}
.maintoc {
width:100%;
clear: both;
margin-top: 30px;
margin-bottom: 30px;
}
.maintoc a {
text-decoration: none;
}
label {
text-align:center;
line-height:18px;
font-family:Lato;
font-weight:bold;
color:#0092c8;
font-size:15px;
}
input[type="checkbox"]{
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background: white;
box-sizing: border-box;
position: relative;
box-sizing: content-box ;
width: 25px;
height: 25px;
border-width: 0;
position: relative;
margin-right: 5px;
margin-bottom: -5px;
}
input[type="checkbox"]:checked{
background-color: #0092c8;
}
input[type="checkbox"]:focus{
outline: 0 none;
box-shadow: none;
}
.ckbatch {
float: left;
display: inline-block;
height: 100%;
margin: 10px;
}
.ckbatchcontainer {
float: left;
display: inline-block;
height: 100%;
margin-bottom: 5px;
padding: 0;
}
.TOCtext {
text-align:center;
line-height:18px;
font-family:Lato;
font-weight:bold;
color:#948973;
font-size:15px;
}
.TOCtext a {
margin: 0;
padding: 0;
}
.TOCimage {
height: 150px;
margin: 0 auto;
position: relative;
display: block;
padding-bottom: 10px;
}
Thank you in advance for any and all help! I've been wracking my brain for a week and in forums to try and fix this simple issue.
To answer in a well explaining way probably bust this comment, therefore I'll provide only a working solution for your problem. So just add these lines of Javascript:
$('.ckbatchcontainer [type=checkbox]').click(function(){
var id=$(this).attr('id').replace(/chk/, '[id^=dv') + ']';
var target = $(id).parent();
target.siblings(':not([style])').hide();
this.checked ? target.show() : target.hide();
});
Code of .JS file
$(document).scroll(function (){
var menuheight= $('header').height();
var y = $(this).scrollTop();
if (y>(menuheight))
{
$('.menu_nav_features').addClass('sticky');
}
else{
$('.menu_nav_features').removeClass('sticky');
}
});
Code of .css class to be add on scroll down for specific height file
.sticky{
position: fixed;
top: 0;
}
This is my Navigation Bar code of .less file. ( for information )
.menu_nav_features{
width: 100%;
height: 46px !important;
border-bottom: 1px solid #e6e6e6;
border-top: 1px solid #e6e6e6;
.menu-features{
margin-top: 0px;
width: 1200px !important;
list-style:none;
margin-left: -35px;
li{
display: inline;
.transition;
a{
background: #f4f4f4;
margin-right:-3px;
display: inline-block;
text-decoration: none;
color:#444444;
padding:0px 30px;
line-height: 44px;
.transition;
}
a:active, a:hover{
color: #000;
background: #fdfdfd;
}
}
li:nth-child(2):hover .bf{
.displayall;
.transition;
}
.bf{
display: none;
position: absolute;
margin-left: 134px;
padding-top: 7px;
// top: 50px;
.bf_btns{
a{
display: block;
width: 238px !important;
}
a:last-child{
margin-top: 0px;
}
}
}
}
}
Problem Statement : When scroll bar height greater than my Header height then my Navigation bar fix cause of Sticky class.It show immediately and i want to show it slowly down or something like slideDown JQuery.I add tranistion to Sticky Class but nothing happened.
You can simply fix this problem with css
#keyframes scroll-down {
from {transform: translate(0,100%)}
to {transfrom: translate(0,0)}
}
.sticky {
position: fixed;
top:0;
animation-name: scroll-down;
animation-duration: 0.4s;
}
So I am trying to get my dropdown to work properly. The dropdown is under a list-item in my header that changes depending on what username the user have. That makes the size differ but I can't get the dropdown to follow in the width resize.
Example 1:
http://jsfiddle.net/73tUx/
Here does it work properly but what if...
Example 2:
http://jsfiddle.net/73tUx/1/
As you can see in example 2 the dropdown is wider than the list-item.
How can I make it change width as well?
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
.navItem {
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
position: absolute;
float: right;
background: #2C3E50;
margin-top: 72px;
right: 103px;
width: 150px;
height: 140px;
display: none;
z-index: -10;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}
header ul{width:100%;position:relative;}
DEMO
I made few changes here and there in css. Major one was moving padding and float from anchor to the list.
Note: That the dropdown div is so small that i had to add overflow auto to see the hidden content.
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
ul > li{
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
position:relative;
}
.navItem {
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
background: none repeat scroll 0 0 #2C3E50;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
display: none;
float: right;
height: 140px;
margin-top: 46px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
z-index: -10;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}
CSS:
.main{
width: 500px;
margin: 0px auto;
overflow-x: scroll;
background: #ccc;
min-height: 500px;
position: relative;
}
.inner{
position: absolute;
top: -20px;
width: 50px;
height: 50px;
background: blueviolet;
left: 200px;
display: none;
}
.menu{
color: #000;
text-decoration: none;
font-size: 14px;
padding:0px 0 0 10px;
}
.main .menu:hover >.inner{display: block !important;}
HTML:
<div class="main">
Menu <div class="inner"></div>
</div>
help me if Anyone can...
Please find fiddle
i have doubt, why you putting css top: -20px;,
if u change top:0; visible correctly