I'm working on a multidevice web page, i want to make a CSS transition of a div (.carrousel) witch contains 3 other div (.bloc1 to 3) positionned horizontally using float left
First, only div 2 and 3 are shown (negatif left on .carrousel and overflow hidden on the container .global)
A clic on the link 'Show blocs {1, 2}' moves the .carousel to right and shows these blocs
To ensure the transition happens smoothly i've adopted the HTML structure below.
The problem is that the fixed elements are'nt positionned correctly in Chrome, IE8, Android 4.03 et 3.02
But under Firefox 15.0, IE9 and also IE7! things are working well...
Any suggestion on changing the HTML structure is welcome as the transition effect remain untouched... But i don't want to use some hacks or specific CSS by device
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
<style type="text/css">
* { margin:0; padding:0; }
a img { border:none; }
body { font-family:Tahoma; font-size:12px; }
p { margin:10px 0; }
.global { width:940px; overflow:hidden; position:relative; margin:20px auto; border:#F00 solid 1px; }
.carrousel { width:1660px; overflow:hidden; position:relative; top:0;
-webkit-transition: left .2s ease-in-out;
-moz-transition: left .2s ease-in-out;
-ms-transition: left .2s ease-in-out;
-o-transition: left .2s ease-in-out;
transition: left .2s ease-in-out; }
.bloc { float:left; padding:5px; margin:5px; text-aligh:center; }
.bloc1 { width:700px; height:400px; background-color:#F00; }
.bloc2 { width:200px; height:300px; background-color:#999; }
.nav { position:fixed; z-index:2; background-color:#F90; width:200px; }
.nav a { display:block; margin:10px 0; }
.bloc3 { width:700px; min-height:300px; position:relative; background-color:#FF0; }
.header { width:700px; height:50px; position:fixed; z-index:2; background-color:#6FF; }
.list { height:3000px; padding-top:50px; position:relative; z-index:1; background-color:#9C3; }
.carrousel.showblocs23 { left:-720px; }
.carrousel.showblocs12 { left:0; }
.carrousel.showblocs12 .header { position:relative; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<title>blocr</title>
</head>
<body>
<div class="global">
<div class="carrousel showblocs23">
<div class="bloc bloc1">
bloc 1
</div>
<div class="bloc bloc2">
bloc 2
<div class="nav">
fixed nav<br />
<a href="#" onclick="$('.carrousel').removeClass('showblocs23').addClass('showblocs12'); return false;">
Show blocs {1, 2}
</a>
<a href="#" onclick="$('.carrousel').removeClass('showblocs12').addClass('showblocs23'); return false;">
Show blocs {2, 3}
</a>
</div>
</div>
<div class="bloc bloc3">
bloc 3
<div class="header">
bloc 3 header fixed
</div>
<div class="list">
bloc 3 long list
</div>
</div>
</div><!-- /carrousel -->
</div><!-- /global -->
</body>
</html>
There are two main issues here, unless I misunderstand your intent.
It seems that you've mixed absolute and fixed positioning. The position: fixed property causes an element to be positioned relative to the browser window, not its parent div. You are looking for position: absolute for the .header and .list classes.
You are using z-index in places where it is not necessary. You can remove the z-index property from all of your classes. This reveals another issue, your .list class needs to have margin-top: 50px instead of padding-top: 50px. Padding fills in the area within the border of an element, while margin creates an invisible margin outside the border of an element. For more on margin and padding, look to the w3 schools for more information.
Here is the JSFiddle for the working code: http://jsfiddle.net/sjAcV/
Here is the JSFiddle for your original code: http://jsfiddle.net/VVZrg/
Related
I have a background (used style="background-image:url('')) and 2 images.
I need the images to be positioned this way:
First image:
30px from top of the background
15px from the right
Second image
15px from the bottom of the background
15px from the left
my CSS classse:
myItem1 - first image class
myItem2 - second image class
BgGrass - the background
What i've been trying:
.BgGrass {
background-image:url('images/bg/grass.png');
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
What's wrong?
Update: The solution here provided that I need to add the position:absolute to my background. The problem now is that all the content below this background is moving up inside it and making a total mess.
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
<div class="clearfix"></div>
All content here is inside the background
It would have been easier if we could see the original page you're working on (html specifically)
Anyway, assuming this is your html:
<div class='BgGrass'>
<img class='myItem1' src='http://cdn.mysitemyway.com/icons-watermarks/simple-black/raphael/raphael_gear-small/raphael_gear-small_simple-black_128x128.png' />
<img class='myItem2' src='http://iconizer.net/files/Brightmix/orig/monotone_close_exit_delete_small.png' />
</div>
Then the CSS should be:
.BgGrass {
background-image:url('http://www.planwallpaper.com/static/images/744081-background-wallpaper.jpg');
width:800px;
height:480px;
position:relative;
}
.myItem1 {
position:absolute;
top: 30px;
right:15px;
width: 100px;
}
.myItem2 {
position:absolute;
bottom:15px;
left:15px;
width: 100px;
}
CSSfiddle: https://jsfiddle.net/5ndbzg6h/
Issue: you need to add position relative to your parent div.
From definition here
position:absolute The element is positioned relative to its first positioned (not static) ancestor element
By default, BgGrass is static, so you must give him an other position like relative.
.BgGrass {
background-color:red;
position:relative
width:800px;
height:480px;
}
.myItem1 {
position:absolute;
bottom: 15px;
left:15px;
}
.myItem2 {
position:absolute;
top:40px;
right:20px;
}
<div class="BgGrass">
<div class="myItem1">ABC</div>
<div class="myItem2">DEF</div>
</div>
I have 2 images placed one on top of another, and what I'm trying to do is to change the opacity based on hover on parent.
Meaning that by default hovethumb's opacity is set to 0. But when I hover on index then hoverthumb's opacity should be changed to 1 and bdata's opacity should be changed to 0.5
But the styling doesn't work... The stylings I use are div.productindex:hover > div.hoverthumb & div.productindex:hover > div.bdata
Can someone help me figure out to target them correctly?
My php code :
<div class="index ">
<div class="bdata">
<div class="thumb"><?php the_post_thumbnail('')?></div>
</div>
<div class="hoverthumb clearfix"><img src="<?php echo get_template_directory_uri(); ?>/images/buy.png" width="50px" ;></div>
</div>
also how to align the image exactly in the centre of the box index
.index{
float: left;
height: auto;
padding-bottom:10px;
margin-bottom:20px;
}
.hoverthumb{
position:absolute;
opacity:0;
clear:both;
}
div.index:hover > div.bdata{
opacity:0.5;
border: thin outset #EC008C;
}
div.index:hover > div.hoverthumb{
opacity:1;
}
.thumb{
width:100%;
}
.thumb img{
width:100%;
height: auto;
}
I was wondering it it is possible to use a nested ":target" directive to modify elements on the page with pure CSS. I am bringing in a form text area which is absolutely positioned inside a div element (.container). When the text area appears, I want 3 things:
1) The open link to dissapear
2) The close link to appear
3) The contaner div to expand with the form element
I have been trying this by nesting the :target element inside my .container but it is not working. Is this possible?
<div class="container" id="container">
<h4>Show close</h4>
<div id="comments">
<form name="myForm">
<p>Write your comment:<br />
<textarea name="myTextarea"></textarea></p>
</form>
</div>
</div>
CSS
.container{
position:relative;
background:pink;
&:target {
transition: all 1s ease;
a#open { display: none; }
a#close {display: block;}
}
a#close { display: none; }
}
#comments {
position:absolute;
height:200px;
width:400px;
background:yellow;
left:-300%;
top:30px;
transition: all 1s ease;
}
#comments:target {
transition: all 1s ease;
left:20px;
}
JSFiddle here
I'm trying to position a checkbox at the bottom right of a div container. The container will grow in height on hover, and I want the checkbox to be sticky so that it remains at the bottom right as the div grows.
I'm having some real trouble getting the checkbox to be in the bottom right.
Here's my code, and a Fiddle.
<div class="objectWrap">
<div class="calendarObject">
<label class="objectTitle" for="chkOb2">Tasks</span>
<input type="checkbox" id="chkOb2" />
</div>
</div>
.objectWrap {
position:relative;
float:left;
height:75px;
margin-bottom:15px;
}
.objectWrap:not(:last-child) {
margin-right:15px;
}
.objectWrap:hover {
cursor:pointer;
}
.calendarObject {
position:relative;
width:72px;
height:75%;
background-color:#f5f5f5;
border-radius:5px;
transition: height 400ms;
-webkit-transition: height 400ms;
}
.calendarObject label.objectTitle {
position:absolute;
top:3px;
left:3px;
font-size:13px;
color: #8998a4;
}
.calendarObject input[type="checkbox"] {
position:absolute;
bottom:0px;
right:0px;
}
.calendarObject:hover {
height:100%;
transition: height 400ms;
-webkit-transition: height 400ms;
}
You have a bug in your code. </span> should be </label>.
Corrected HTML:
<div class="objectWrap">
<div class="calendarObject">
<label class="objectTitle" for="chkOb2">Tasks</label>
<input type="checkbox" id="chkOb2" />
</div>
</div>
Corrected JS Fiddle
Your markup is not properly nested.. your label tag needs a closing label tag.. not a closing span tag.
On my computer I have it perfectly looking, it is a 17"
I went to see my web under development on www.hrcprojectconsulting.com on another computer, an old screen of 1080 x 600 i think
and the right panel has dislocated itself from its position and taken the middle container
I conceived it as One main container that wraps, a left container, a center container and a right container. I positioned the main container centered with margin: 0 auto; and it all looked good. Then I had to had the banner, the blue stripe that you will see:
This is my blueprint for all pages:
<link rel="stylesheet" href= "<?php echo base_url() ?>css/style.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
<div id = "contenedor_principal">
main wrapper
<div id = "left_container">
content for left panel
</div>
<div id="container-center"><!-- 1 -->
content for the center panel
</div> <!-- end of container center 1 -->
<div id = "right_container">
and for the right panel
</div>
</div>
and this is the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head profile="http://gmpg.org/xfn/11">
<link rel="stylesheet" href= "<?php echo base_url() ?>css/main_style.css" />
<link rel="stylesheet" href= "<?php echo base_url() ?>css/webform.css" />
<script type ="text/javascript" src="<?php echo base_url()?>js/1.8.js"></script>
</head>
<div id="header" class = "header"><h1 class="header">Real Estate Worldwide</h1>
<body>
And this is the CSS:
#contenedor_principal
{
background:orange;
width:1040px;
margin: 0 auto;
}
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#FFFFFF;
}
#container-center{
width:635px; /*** Set to = center col width ***/
height:500px;
font-size:8px;
display:inline;
position:absolute;
left:485px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#left_container{
width:200px; /*** Set to = center col width ***/
height:500px;
float:right;
margin-right:0px;
font-size:8px;
display:inline;
position:absolute;
left:275px;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#right_container{
width:202px; /*** Set to = center col width ***/
margin-left:0px;
height:600px;
float:right;
font-size:8px;
display:inline;
position:absolute;
right:260px;
background:url('../assets/uploads/miweb/bg_body.png');
background-repeat:repeat-x;
top:80px;
/* \*/
margin-left:-1px;
/* Hidden from IE-mac */
}
#header {
float:inherit;
background: url("../jq185/css/start/images/ui-bg_gloss-wave_75_2191c0_500x100.png") repeat-x scroll 50% 50% #2191C0;
font-family: 'trebuchet ms',geneva,arial,tahoma,sans-serif;
font-size: 10px;
margin: 0 auto;
margin-top: 2px;
padding: 0;
width: 1050px;
height:75px;
h2 {color:#ffffff;}
}
Than can anyway be seen live on my web like I said. I am using 1660 x 900 and 17" but it should be viewable on any resolution and screen.
Any clue as to why it went all upside down?
thank you
The layout you are using is wrong. no need to use position: absolute for every div and then set the top and left.
Instead of that follow the below structure.
HTML
<html>
<head>
<title>Website</title>
</head>
<body>
<div id="container">
<div id="header"></div>
<div id="content">
<div id="left_content"></div>
<div id="middle_content"></div>
<div id="right_content"></div>
</div>
</div>
</body>
</html>
CSS
#container {
width:960px;
margin:0 auto;
}
#header {
background: blue;
height:50px;
margin-bottom:20px;
}
#left_content {
float: left;
width:150px;
background: red;
min-height: 600px;
margin-right:20px;
}
#middle_content {
float: left;
width:620px;
background: green;
min-height: 600px;
margin-right:20px;
}
#right_content {
float: right;
width:150px;
background: red;
min-height: 600px;
}
Live Demo
Hope this will help you.
Well, in your css, you clearly coded everything in order it comes correctly only on your screen.
In particular what is going wrong is your #right_container in which you say float:right and than right:260px.
A quick (but bad) solution to your css would be to put float:left instead of float:right and define the number of pixels from the left left:1190px (1190 is approximate)
A better solution would be learn properly css and play with it afterwards!