I want this result Demo
instead this Demo
Demo jsFiddle
How to move the div menu to end right side of div Container , So the menu will be on the right side.
I dont want position absolute because when you change the width size of the window page, the menu will hide the background of the image background Frog+Snake.
Many Thanks.
The code:
<!DOCTYPE HTML>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<style type='text/css'>
body {
background-color : black;
background-image : url('pic/bg1.png');
background-size : 100% 700px;
background-repeat : no-repeat;
margin : 0;
margin-left : -100px;
padding : 0;
}
.imageContainer {
position : relative;
margin-left : auto;
margin-right : auto;
top : 10px;
background-size : 1000px 500px;
width : 1000px;
height : 500px;
overflow : hidden;
}
#Container {
background-image : url('pic/1/3.jpg');
background-repeat : no-repeat;
z-index : 0;
}
.layer {
position : absolute;
width : 1000px;
height : 500px;
padding : 0;
margin : 0;
}
#parrot {
z-index : 5;
}
#frog_snake {
z-index : 4;
}
#fly {
z-index : 3;
}
#crok {
z-index : 2;
}
#leafvarible {
position : absolute;
padding : 0;
margin-left : auto;
margin-right : auto;
display : block;
top : 10px;
left : 100px;
width : 1px;
height : 1px;
z-index : -1;
}
#pos {
top : 50px;
left : 10px;
color : white;
font-size : 16px;
}
#status {
position : absolute;
top : 350px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status1 {
position : absolute;
top : 375px;
left : -100px;
color : pink;
font-size : 20px;
padding-left : 120px;
}
#status2 {
position : absolute;
top : 400px;
left : -100px;
color : red;
font-size : 20px;
padding-left : 120px;
}
#fps_count {
position : absolute;
top : 10px;
right : 10px;
width : 150px;
font-size : 20px;
color : white;
font-family : 'Happy Sans', cursive;
border : red solid 1px;
}
#loading {
background : blue;
background-image : url('pic/FrogGameBackGround.jpg');
background-repeat : no-repeat;
background-size : 1000px 500px;
z-index : 10;
}
#loading > #barCont {
width : 400px;
height : 20px;
position : absolute;
top : 300px;
left : 50%;
margin : -10px 0 0 -200px;
background : black;
}
#loading > p {
position : absolute;
top : 275px;
left : 50%;
z-index : 11;
}
#bar {
width : 0;
height : 20px;
position : absolute;
left : 0;
background : #F3FF67;
}
#menu {
float : left;
width : 200px;
height : 500px;
position : relative;
left : 10px;
top : 0;
background-image : url('pic/menu.png');
border : red solid 1px;
clear : both;
}
#StartButton {
position : absolute;
right : 25px;
top : 300px;
width : 200px;
text-align : center;
color : white;
font-size : 35px;
text-shadow : 4px 4px 4px black;
cursor : pointer;
}
#speaker {
position : absolute;
right : 150px;
top : 350px;
width : 50px;
}
</style>
</head>
<body>
<div id= "Container">
<canvas id="A1" class="layer"></canvas>
<canvas id="A2" class="layer"></canvas>
<canvas id="A3" class="layer"></canvas>
<canvas id="A4" class="layer"></canvas>
</div>
<div class="imageContainer" id="loading">
<p id="loadText">Loading...</p>
<div id="barCont">
<div id="bar"></div>
</div>
</div>
<canvas id="A5"></canvas>
<div id="menu">
<!-- Button Start Game -->
<input id="StartButton" type="button" value="Start Game"/>
<!-- Loading sounds -->
<div id="speaker">speaker</div>
</div>
<script></script>
</body>
</html>
use position relative instead of absolute and use float:right; and/or float:left;
on both your main page and on your menu.
also what is that A5 thing for?
Remove all position property from #menu and set it to display:flex; and later add following margin margin:0 0 0 auto; . This will make menu align to right side no matter what is screen size is.
Related
I can't display a :before element outside my parent element. The :before element is cut as an overflow-hidden parent's child but removing the rule didn't help me :
The red color and the position of the div are just there to see where is the div and where is the :before near it.
Here is my css code :
div#sidezone {
position : fixed;
display : block;
width : 10%;
height : 100%;
right : 10%;
top : 0px;
bottom : 0px;
overflow-y : scroll;
z-index: 10;
background : red;
}
div#sidezone:before {
position : absolute;
content : "";
display : block;
/* font-family: "Font Awesome 5 Free"; */
width : 50px;
height : 20px;
left : -50px;
top : 50%;
bottom : 50%;
background : #12b7ff;
cursor : pointer;
border : 3px solid #12b7ff88;
border-radius: 5px 0px 0px 5px;
z-index: 10;
}
div#sidezone:hover {
right:0px;
}
I try to implement the following effect by using the :before but I have problem with the z-index.
My code is like this:
.container {
background : #FFF;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item:before {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
The problem now, is that the container seems to cover the :before element.
For the moment I don't mind about the "MIDDLE AGE" item.
How can I overcome this issue ?
Add the following CSS styles:
.container {
position: relative;
z-index: 1;
}
Code in JSfiddle: https://jsfiddle.net/5cq5576k/
Try this:
.container {
background : #FFF;
position: relative;
float: left;
}
.item {
background-position : 50% 50%;
background-repeat : no-repeat;
background-size: cover;
width : 200px;
height :200px;
position : relative;
}
.item-border {
content : '';
position : absolute;
width : 100%;
height : 100%;
right : -20px;
bottom : -20px;
border : 2px solid #0AF;
z-index : -1;
}
<div class="container">
<div class="item-border"></div>
<div class="item" style="background-image:url('https://placeholdit.imgix.net/~text?txtsize=33&txt=200%C3%97200&w=200&h=200')"></div>
</div>
I have 3 elements which I want to align in my html file. I have attached a sample image, the first image just has a left margin and is vertically centered. the middle element is vertically and horizontally centered and the third element has right margin and is vertically centered.
I can independently align elements horizontally and vertically with below code :
#element{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
but when it comes to align elements along each other they don't place correctly.
I'll appreciate if you can help me with this.
Thanks very much
You can try the following:
.left_item {
float: left;
width: 10%;
}
.right_item {
float: right;
width: 10%;
}
.center_item {
float: left;
width: 80%;
}
I managed to solve it with below code :
<header id="header">
<div id="element1Container">
<img id="element1" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element2Container">
<img id="element2" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
<div id="element3Container">
<img id="element3" src="http://globalapk.com/uploads/posts/2014-06/1402152414_unnamed.png"/>
</div>
</header>
and here's the css:
#header{
background:#2b2b2b;
height : 8.5%;
width : 100%;
position : absolute;
}
#header #element1Container{
position : relative;
height : 100%;
width : 25%;
float : left;
}
#header #element1Container img{
height : 65%;
top : 50%;
position : relative;
float : left;
margin-left : 4%;
transform : translate(0,-50%);
}
#header #element2Container{
position : relative;
float : left;
height : 100%;
width : 50%;
}
#header #element2Container img{
height : 40%;
position : relative;
left : 50%;
top : 50%;
transform : translate(-50%,-50%);
}
#header #element3Container{
position : relative;
float : right;
height : 100%;
width : 25%;
}
#header #element3Container img{
height : 65%;
top : 50%;
position : relative;
float : right;
margin-right : 4%;
transform : translate(0,-50%);
}
I have a header containing several elements. The most important parts are a slider, a banner-overlay and 3 so called 'pijlers'. The slider and banner-overlay respond perfectly but the 'pijlers' don't. They are in the right position for when the screen width is full width but when you resize the screen to a smaller width they don't move along with it to the left so they fall of the screen.
Please don't mind the pictures used, it's just for demo purposes
Fiddle: http://jsfiddle.net/kzv8L6yn/
CSS
body {
width:100%;
max-width:1000px;
margin: 0;
height:auto;
}
header {
width:100%;
height:600px;
}
.headerslider {
width:100%;
height 100%;
:
}
.site-navigation {
width:100%;
}
#custom-login {
float:left;
margin-left:25px;
}
.main-navigation, .headerslider, #banner-overlay, #pijler-wrapper {
position : absolute;
top : 0;
left : 0;
}
#banner-overlay {
z-index : 10;
width:100%;
}
#pijler-wrapper {
z-index : 10;
width:100%
}
.pijler {
background-color : white;
width : 27%;
position : absolute;
opacity : 0.8;
}
.pijler:hover {
opacity : 1.0;
}
#safe {
top : 170px;
left : 900px;
}
#durable {
top : 252px;
left : 900px;
}
#innovative {
top : 334px;
left : 900px;
}
HTML
<div id="page" class="site">
<header class="site-header" role="banner"> <img src="http://tsk.nu/en/wordpress/wp-content/themes/atahualpa373/images/header/TSK-header1_1280x150.gif" id="banner-overlay"/>
<div id="pijler-wrapper"> <img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="safe"/>
<img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="durable"/>
<img src="http://australianbluegrass.com/wp-content/uploads/2009/03/360x80-banner.jpg" class="pijler" id="innovative"/>
</div>
<div class="headerslider">
<img src="http://www.markbsplace.net/images/CloudsOnTheHorizon-1280-x600.jpg" id="headerslider" />
</div>
</header>
<div>
You have the piljer positioned absolutely, so no matter what you do they will always be the exact distance from the left (900px) of the container they are in or in fact the closest container not statically positioned.
In order for them to respond, you should either use percentage positioning or if they are supposed to hug the right hand side, position them from the right instead, depending on what type of effect you are trying to achieve. For example:
#durable {
top : 252px;
right : 50px;
}
On my page I have 3 dividers, for a header, content, and footer. I want to make my iframe inside my content divider stretch to the screen height, along with the divider that contains it (minus the height of the header and footer). How do I do this?
You can absolutely position your header/content/footer divs and relatively position the iframe within the content div:
HTML--
<div id="header"></div>
<div id="content">
<iframe></iframe>
</div>
<div id="footer"></div>
CSS--
#header {
position : absolute;
top : 0;
left : 0;
width : 100%;
height : 100px;
background : red;
}
#content {
position : absolute;
top : 100px;
bottom : 100px;
left : 0;
width : 100%;
background : green;
}
#content > iframe {
position : relative;
width : 100%;
height : 100%;
background : purple;
}
#footer {
position : absolute;
bottom : 0;
left : 0;
width : 100%;
height : 100px;
background : blue;
}
Here is a jsfiddle: http://jsfiddle.net/jasper/dghW4/