i have a lightbox image inside a div of a scrollable page.
I use everything in % so that every image adjusts to the screen size whether it is mobile or destkop.
The thing is that when I visit my site in mobile and I click in the lightbox, it appears at the bottom of the page! How can I set the position of the lightbox to appear in front of the clickable image?
My HTML is:
<input type="checkbox" id="check" style="display:none;">
<label for="check">
<div id="biteme"><img src="biteme.png"></div>
</label>
<label for="check">
<div id="cover">
<div id="box">
<img src="promociones.png" width="80%">
</div>
</div>
</label>
And my css is:
#biteme {
padding-top:0;
padding-bottom:0;
}
#check:checked ~ label #cover{
display:block;
background:none;
}
#cover{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
background:none;
display:none;
}
#box{
position: inherit;
top:313%;
bottom:0;
left:16%;
right:0;
margin:auto;
width:80%;
height:auto;
border:none;
opacity:0.9;
background-color:transparent;
background:none;
}
If you can switch them places that will work. You can use z-index to reorder boxes too.
Related
I want to style the background of an icon. My code gives me an egg-shape but vertical, and I want the egg-shape to be horizontal. Also that the "egg" covers my icon in full. Is that possible?
Updated Fiddle... Fiddle
HTML:
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>
CSS:
.car .fa-calculator {
color:black;
font-size:200px;
background-color:red;
display:block;
position:relative;
border-radius:80%
}
Use this CSS it will work
.car .pull-left i {
color:black;
font-size:200px;
background-color:red;
display:block;
position:relative;
border-radius:80%;
height:100px;
width:80px;
}
How about this;
.car .fa-calculator {
color:black;
font-size:200px;
background-color:red;
display:block;
border-radius:50%;
padding:.5em;
width:1.6em;
text-align:center;
}
I want the egg-shape to be horizontal. Also that the "egg" covers my icon in full.
For an 'egg' shape the element has to be wider than it is tall (if we are to use border-radius).
So setting uneven padding would seem to be an option.
.car .fa-calculator {
color:black;
font-size:100px;
background-color:#FF0000;
position:relative;
border-radius:50%;
padding: .2em .4em; /* adjust as required */
text-align: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.css" rel="stylesheet"/>
<div class="car">
<div class="pull-left"> <i class="fa fa-calculator"></i></div>
</div>
the goal is to make my linkIcon background change background images when I hover my mouse over it. It works completely fine in chrome, but in firefox and safari nothing changes when I hover my mouse over the linkIcon unless I have my mouse button down when my mouse moves on top of the div. I can't figure out what the difference is.
Html:
<div id="tab" >
<div id="swingDownButtonContainer">
<a href="javascript:slideLinks();" style="display:block; position:relative;">
<div id="linkIcon">
</div>
</a>
</div>
</div>
Css:
#tab {
z-index:-1;
background-color:#f0996f;
position:absolute;
left:-10px;
height:20%;
width:50px;
border-radius:10px;
top:40%;
}
#swingDownButtonContainer {
text-align:center;
}
#linkIcon {
z-index:2;
background-image:url('media/circles_noHover.png');
background-size:40px 57px;
background-repeat:no-repeat;
margin-left:auto;
margin-right:auto;
width:40px;
height:60px;
position:absolute;
left:10px;
}
#linkIcon:hover {
background-image:url('media/circles_Hover.png');
}
You're probably finding your link has no height as it's contents are absolutely positioned. Can you change it to:
<div id="tab" >
<div id="swingDownButtonContainer">
<a id="linkIcon" href="javascript:slideLinks();">
</a>
</div>
</div>
CSS edit:
#swingDownButtonContainer {
text-align:center;
position: relative;
}
Alternatively give the link a height of 60px
i think that i have forgotten my css but i have a problem
here is my code
<div class="footer_container">
<div class="website_logo_to_footerexpand"></div>
<div class="info_cont">
<div class="info_slide_arrow"></div><!--arrow-->
<div class="info_slide">
<div class="level1">© Datacardz.Inc <?php echo date('Y'); ?></div>
<div class="level2">
About
Terms
Company
Blog
</div>
</div>
</div>
the problem is that when i use the css code:- website_logo_to_footerexpand:hover ~ .info_cont it displays the div but it vanishes as soon as i nove the mouse to the info_cont div
and the code .website_logo_to_footer_expand:hover > .info_cont does not work at all
my css ----
.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}
.website_logo_to_footerexpand:hover ~ .info_cont{
visibility:visible;
opacity:1;
}
http://jsfiddle.net/K4Mp4/1/
Check the demo please.
.website_logo_to_footerexpand{
float:left;
cursor:pointer;
background-image:url(data_cardz_imagesprites.png);
background-position:0 0;
width:60px;
height:60px;
}
.info_cont{
float:left;
height:60px;
opacity:0;
visibility:hidden;
}
.footer_container:hover > .info_cont{
visibility:visible;
opacity:1;
}
you should be putting the hover on .footer_container not .website_logo_to_footer_expand that class is to the left so naturally when you scroll out of it the info will disappear
.footer_container:hover > .info_cont
you also need to add a clearfix because you are floating elements inside .footer_container
you should use the display:block; for floated child divs and display:inline-block; for the parent div then the hovering effect will work
I'm currently having problems with resizing the window which cuts off a lot of the page and the elements which are positioned relatively to the document fly off the page.
Heres what it looks like:
Normal: http://i.imgur.com/KpnUOwI.png
Minimized: http://i.imgur.com/CfCrmub.png
scrolled to the end while minimized: http://i.imgur.com/p8dwiP9.png
I either want the blue elements to go right to end even if it's minimized (It's width:100%) or have the elements resize proportionally to the window and fit everything in (everything is positioned relatively to the document)
css:
body {
margin:0;
padding:0;
height:100%;
width:100%;
position:relative;
overflow:auto;
}
#headr {
background-image:url(../images/top%20bg.jpg);
background-repeat:no-repeat;
height:400px;
width:100%;
position:relative;
z-index:-100;
overflow:hidden;
}
#lgo {
position:relative;
margin-left:33%;
margin-top:80px;
}
#nav {
background-image:url(../images/nav%20bar.png);
position:relative;
top:0;
margin-top:0px;
width:100%;
width:!important;
height:99px;
}
#listone {
list-style-type:none;
display:inline;
margin-left:570px;
top:25px;
position:relative;
overflow:hidden;
}
.navlist {
display:inline;
font-size:33px;
padding:25px;
color:#FFF;
font-weight:bold;
font-family:Verdana, Geneva, sans-serif;
position:static;
}
#searchb {
background-image:url(../images/search.png);
background-repeat:no-repeat;
width:500px;
height:200px;
position:relative;
padding:0px;
margin-left:1350px;
margin-top:-85px;
}
#searchb form {
display:inline;
}
#searchbar {
background-color:transparent;
border:0px;
position:absolute;
top:50px;
left:60px;
width:200px;
height:80px;
outline:none;
font-size:24px;
}
.searchsubmit {
border:0px;
background-color:transparent;
position:absolute;
top:70px;
left:400px;
width:30px;
height:50px;
}
Html:
<body>
<div id="nav">
<ul id="listone">
<li class="navlist">Home</li>
<li class="navlist">Portfolio</li>
<li class="navlist">Prices</li>
<li class="navlist">Contact</li>
</ul>
<div id="searchb">
<form>
<input type="text" id="searchbar" placeholder="Search">
<input type="image" class="searchsubmit" src="images/searchicon.png" value="">
</form></div>
</div>
</div>
<div id="headr">
<!--<img src="images/head logo.png" id="lgo"> -->
</div>
#Joe - I guess you're looking a responsive design. I'd suggest you to get along with Twitter Bootstrap 3. CSS Framework that takes care of the window size. You just need to make some div classes to make it responsive.
Getting along with framework will make it easier and faster for your develop the page and Twitter Bootstrap 3 does it for us.
Here's another post where the same answer's been given.
Yes you would have to sepcifiy for each size you want, you would than write the css for the under media like you would any other css file. Here is an example
/*if the width is over 768px the background will turn blue*/
#media screen and (min-width: 769px) {
body {
background:blue;
}
}
/*if the width is under 768px the background will turn yellow*/
#media screen and (max-width: 769px){
body {
background:yellow;
}
}
You only have to rewrite the properties that tou wish to change at each breakpoint. The cascading properties of CSS are important here, so you shuld pay attention to specificity and order of your selectors so as to achieve the expected result being DRY.
If you really want to support multiple screensizes you should take a look at responsive webdesign. Substituting your px to em is one example of what you wolud be doing.
I'm trying to create a div that would have a dynamic width depending on the content inside that div. It works well in Firefox but in IE I get linebreaks, see screenshot below:
The markup looks like this:
<div class="filter-dropdown">
<div class="filter-dropdown-options-wrapper">
<ul>
<li>
<label>
<input type="checkbox" checked="checked">(Select All)
</label>
</li>
<li>
<label>
<input type="checkbox" value="2010-01-31" checked="checked">2010-01-31
</label>
</li>
</ul>
</div>
<div class="filter-btn-wrapper">
<input type="button" value="Ok" class="btn-filter-ok">
<input type="button" value="Cancel" class="btn-filter-cancel">
</div>
</div>
and CSS looks like this:
.filter-wrapper div.filter-dropdown{
position:absolute;
top:-190px;
right:10px;
border:1px solid #CFD6DA;
z-index:10000;
display:none;
padding:10px;
height:170px;
background-color:#EEF1F2;
}
.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper{
border:1px solid #CFD6DA;
padding:5px 10px;
height:130px;
overflow-y:auto;
background-color:#FFFFFF;
width:100%;
}
.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul{
list-style:none;
padding-left:0px;
margin:0px;
}
.filter-wrapper div.filter-dropdown .filter-dropdown-options-wrapper ul li label{
display:block;
}
.filter-wrapper div.filter-dropdown .filter-btn-wrapper{
margin-top:10px;
text-align:right;
width:130px;
}
.filter-wrapper div.filter-dropdown .filter-btn-wrapper .btn-filter-ok{
margin-right:5px;
width:60px;
}
So, my question is - what do I have to do in order to avoid linebreaks and keep width of the outer div dynamic?
First, make your padding/margins on the right side of your inputs and that box small enough that it doesn't WANT to wrap. It's wrapping because it's running out of room. If you set the background color of the labels you'll probably see where it's ending.
Lastly as a failsafe you can set white-space: nowrap; but this should be a failsafe for funky font size issues and such not your primary solution because it will introduce complications of horizontal scroll bars etc.
Edit: Also, you need to get your <input...> tags out of the <label...> tags. The labels should be attached to the inputs by name, not by virtue of being inside them!