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
Related
The Element is not resizing and browser is not re-calculating the position of the Element even though all the widths and heights are mentioned in percentages only. This code basically renders a Squared DIV with Two elements one with Centered and another at right top corner of the SQuare.
<html>
<head>
<style>
.board {
font-size: 8em;
}
.cellContainerOuter {
width: 100%;
padding-bottom: 100%;
position: relative;
background-color: yellow;
border: 1px solid black;
}
.cellContainer {
width: 100%;
padding-bottom: 100%;
position: absolute;
display: table;
}
.cellContainerInner {
padding-bottom: 50%;
padding-top: 50%;
padding-left: 50%;
padding-right: 50%;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text {
border: 0px dotted white;
position: absolute;
bottom: 20%;
top: 20%;
left: 20%;
right: 20%;
overflow: hidden;
text-overflow: clip;
display: block;
}
.weight {
position: absolute;
right: 0px;
top: 0px;
margin: 2px;
border: 1px solid white;
}
</style>
</head>
<body>
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
</body>
</html>
Any help to resolve this issue is highly appreciated.
CodePen: https://codepen.io/mdileep/full/MGrNgw/
Refactored your CSS.
Let me know if this is the behaviour you are expecting.
OR with responsive you mean to change your height of 6 as well?
body {
margin: 0;
}
.cellContainer {
position: relative;
background: yellow;
width: calc(100vw - 20px);
height: calc(100vh - 20px);
margin: 10px;
}
.cellContainerInner {
border: 1px solid;
height: 100%;
display: flex;
}
.weight {
font-size: 8em;
position: absolute;
right: 0px;
top: 0px;
border: 1px solid;
}
.text {
flex: 1;
font-size: 8em;
/* border:2px solid; */
align-self: center;
text-align: center;
}
<div class="board">
<div id="cell3_C_1" class="cellContainerOuter" title="ఇ">
<div id="cell2_C_1" class="cellContainer" title="ఇ">
<div id="cell_C_1" class="cellContainerInner" title="ఇ">
<span id="weight_C_1" class="weight" title="6">6</span>
<span id="text_C_1" class="text" title="ఇ">ఇ</span>
</div>
</div>
</div>
</div>
Hello Stackoverflow Team,
How can the child div inside the parent div with overflow have a right and left margin? I'm trying to solve the issue but it does not give a clean solution for it.
Attempt:
margin-right wont work
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
margin-right: 20px;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
My unclean Solution:
div {
border: 1px solid black;
}
.parent {
width: 300px;
height: 300px;
margin: auto;
position: relative;
overflow: auto;
}
.child {
width: 350px;
height: 150px;
top: 50px;
margin-left: 20px;
border-right: 20px solid red;
position: absolute;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
any better way to solve the issue?
Since you are using position: absolute for the child, best way to achieve what you want is remove position: absolute then add the margins you need.
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
width:350px;
height:150px;
top: 50px;
margin: 50px 20px 0;
display: inline-block;
}
<div class="parent">
<div class="child"></div>
</div>
Update
If you need the child div to be position: absolute you will have to wrap it in another div as follow:
div{
border: 1px solid black;
}
.parent {
width:300px;
height:300px;
margin:auto;
position: relative;
overflow: auto;
}
.child {
border-color: red;
position: absolute;
top: 20px;
height: 150px;
}
.sub-child {
width:350px;
height:150px;
margin: 0 20px;
display: inline-block;
}
<div class="parent">
<div class="child">
<div class="sub-child"></div>
</div>
</div>
I am currently creating a website that is vertically scroll-able and has a navbar on the top as shown in the image. The navbar gets bigger when the user is not on the very top and this is implemented as:
if (window.scrollY == nav.offsetTop) {
document.querySelector('.nav').classList.add("largerNavbar");
} else {
document.querySelector('.nav').classList.remove("largerNavbar");
}
In javascript, so, it just adds a new class that has larger height to the navbar. But the problem is, it hides the content of the 2nd row. The 2nd row's style looks like:
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
I commented out the position: relative because then the 2nd row will hide the navbar.
What is the problem here?
EDIT:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
height: 100%;
font: 100% $font-stack;
color: $primary-color;
margin: 0px;
.largerNavbar .nav{
font-size: 20px;
height: 90px;
}
.largerNavbar #firstRow {
font-size: 20px;
height: 90px;
}
.onSection {
background-color: gray;
}
.nav{
color: white;
//vertical center
display: flex;
align-items: center;
font-size: 12px;
height: 70px;
overflow: hidden;
background-color: #333;
transition:all 1s;
-webkit-transition:all 1s;
.menus {
position: absolute;
right: 0px;
padding: 10px;
}
.logo {
position: absolute;
left: 0px;
padding: 10px;
}
}
.stationary {
position: fixed;
top: 0;
width: 100%;
}
.nav a {
color: white;
float: left;
display: block;
text-align: center;
padding: 14px;
text-decoration: none;
}
div#firstRow {
padding: 10px;
width: 100%;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: green;
}
div#secondRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: blue;
}
div#thirdRow {
padding: 10px;
//position: relative;
margin:0 auto;
line-height: 1.4em;
background-color: yellow;
}
div#lastRow {
height: 100px;
background-color: black;
}
}
<div class="logo">
HOME
</div>
<div class="menus">
<span>About</span>
<span>Archive</span>
<span>Projects</span>
<span>Contact</span>
</div>
</div>
<div id="firstRow">
<a id="about" class="smooth"></a>
</div>
<div id="secondRow">
<a id="history"></a>
</div>
<div id="thirdRow">
<a id="contact"></a>
</div>
<div id="fourthRow">
<a id="contact"></a>
</div>
<div id="lastRow">
<a id="footer"></a>
footer goes here
</div>
<script src="bundle.js" type="text/javascript"></script>
I'm guessing that you gave the navbar either absolute or fixed positioning.
If that's the case, I would try adding that largerNavbar class to an element that is a parent to both your navbar and your green container there, and then have some CSS selectors that alter both the navbar's height property and the green container's padding-top property at the same time.
So something like this:
.largerNavbar .nav {
...
height: 120px; // Use the same height for both
}
.largerNavbar #firstRow {
...
padding-top: 120px // Use the same height for both
}
Add some CSS transitions and it should look great. Good luck!
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;
}
I added a button to my code, I wanted to make it transparent but then it made a huge gap at the top and I want the button to eb placed in the middle but I really have no idea on how to do it.
Here are some image examples
https://i.gyazo.com/3b6d5f86f5a6ec84ca61e499b2411079.jpg[^]
https://i.gyazo.com/d086228702c62d79bf5fdeb518089c7e.jpg[^]
as you can see in this picture I changed the background color to transparent
why is it making that huge gap at the top? The button is still there but since its a white background I cant see it and I would like to move the button down to the middle
}
button {
background-color: Transparent;
background-repeat:no-repeat;
cursor:pointer;
overflow: hidden;
outline:none;
height: 38px;
line-height: 40px;
border: 2px solid white;
display: inline-block;
float: none;
text-align: center;
width: 120px;
padding: 0px!important;
font-size: 14px;
color: #fff;
}
button:hover {
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
/*Menu CSS*/
#sidebar {
background: #151718;
width: 200px;
height: 17%;
display: block;
position: absolute;
left: -200px;
top: 0px;
transition: left 0.3s linear;
z-index: 1000;
}
#sidebar.visible {
left: 0px;
transition: left 0.3s linear;
}
ul {
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
ul li a {
background: #1C1E1F;
color: #ccc;
border-bottom: 1px solid #111;
display: block;
width: 180px;
padding: 10px;
text-decoration: none;
}
#sidebar-btn {
display: inline-block;
vertical-align: middle;
width: 20px;
height: 150px;
cursor: pointer;
margin: 20px;
position: absolute;
top:0px;
right:-60px;
}
#sidebar-btn span {
height: 1px;
background:#ffffff;
margin-bottom: 5px;
display: block;
}
#sidebar-btn span:nth-child(2) {
width: 75%;
}
#sidebar-btn span:nth-child(3) {
width: 50%;
}
/*Menu CSS*/
</style>
</head>
<body>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<!-- Buttons for email subscriptions and stuff -->
<!-- Full Width Responsive Slider -->
<div class="container">
<div style="background-color: transparent; text-align: center; padding: 10px"><button>Contact Us</button></div>
<div class="cycle-slideshow">
<span class="cycle-prev">〈</span>
<span class="cycle-next">〉</span>
<span class="cycle-pager"></span>
<img src="images/wp5.jpg">
<img src="images/wp6.jpg">
<img src="images/wp7.jpg">
</div>
<!-- Full Width Responsive Slider -->
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
</body>
</html>
please you can add in
.button{
position:fixed;
top:40%
}
Here is the layout wanna to achieve. If there something you don't understand, you can ask.
I suggest try construct your css and your html.
Example
CSS
.centering{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
DEMO