I can't able to do like this
![Caption on Gallery][1]
What i want to do Click here on the below image
[https://drive.google.com/file/d/0B1SQD1vg0T6ibEFxS09nXzZTUFU/view?usp=sharing]
The link below that what i've done....
https://drive.google.com/file/d/0B1SQD1vg0T6iSU4xWTUzNVY0Q3c/view?usp=sharing
This is for the thing which you want exactly as your example.
First of all remove .cd-intro classes from lines 134,138 and 143.
Now in line 125 replace the class with following.
.cd-intro
{
background-color:black;
color:#fff;
font-family:"Lato",sans-serif;
height:100%;
opacity:0.8;
overflow:visible;
padding-top:90px;
position:absolute;
text-align:center;
top:0;
width:100%;
}
You will need to adjust padding-top as per the requirement.
Related
I have a browser extension that adds a div element (and others) to the page. Is there a way to make sure that the page styles don't affect the styles within my added element?
I've considered making it an iframe, but would prefer not to make the extra call. Making sure to overwrite every single possible style also seems a bit much, although my added information is just basic text and links.
I noticed you said you'd prefer not to use every style but I figured I should mention it here in case it helps someone else. Basically this is a class that can remove most inherited/predefined attributes. You can just add the class to any element you would want to exclude. Here is an example:
.reset {
background:none;
border:none;
bottom:auto;
clear:none;
cursor:default;
float:none;
font-size:medium;
font-style:normal;
font-weight:normal;
height:auto;
left:auto;
letter-spacing:normal;
line-height:normal;
max-height:none;
max-width:none;
min-height:0;
min-width:0;
overflow:visible;
position:static;
right:auto;
text-align:left;
text-decoration:none;
text-indent:0;
text-transform:none;
top:auto;
visibility:visible;
white-space:normal;
width:auto;
z-index:auto;
}
Now just add "reset" and it should set it back to normal. You can then define styles below that line and they will override the styles in the reset class.
You could also add a wildcard selector to the reset class so that is targets the element's children as well.
.reset,
.reset * { /*...etc */ }
NOTE: Wildcards are supported by IE8+, so if you are working on IE7 or lower - no dice.
I'm having an issue with two of my divs. One of them is fixed (.post), the other is relative(.imageStyle):
.post{
position:fixed;right:0px;top:0px;bottom:0px;width:48%;background:#fff;
color:black;box-shadow: -2px 2px 10px #1f1f1f;text-shadow:none;
overflow:auto;height:100%;z-index:99999
}
.imageStyle{width:45%;position:relative;background:#1f1f1f;
margin:0px;padding:0px;height:100%;z-index:5}
Inside of .post is an implementation of Google Maps V3. In IE & Firefox, the Map displays as expected; when i scroll down in .imageStyle div, .post stays fixed where its supposed to be. However, in Chrome, when I scroll in down inside of .imageStyle, the map stays where its supposed to be, but the rest of the content of .post scrolls with .imageStyle (or behaves as if it was relative).
This is especially weird because on every other page I have with these divs, the content inside of .post behaves properly on ALL browsers. Furthermore, this problem only persists in Chrome.
The Google Maps is an implementation of Google Maps V3 API being served from my IDX vendor. The CSS for their implementation looks like this:
/*** Map Search (Template #1) ***/
#IDX-propTypeTextLinks {display:none;}
#IDX-searchNavWrapper {margin:5px auto; text-align:left;position:relative;}
#IDX-mapPropertyTypes {float:left; width:192px;}
#IDX-mapPropertyTypes select {border:1px #AAA solid; float:left; width:182px;}
/* This link allows a user to save a map search directly */
#IDX-saveMapSearch {float:left;}
#IDX-googleMap {width:100%; height:600px; clear:both; position:relative; overflow:hidden; border:1px #000 solid; margin:10px 0;}
/* This holds the informational text regarding the number of properties found in a given search */
#IDX-mapInfo {width:400px; height:14px; margin:5px 0 5px 0; float:left; left:5px; font-size:11px; text-align:left;}
/* The controls float near the google map and add additional features to the core Google Controls */
#IDX-mapControls {padding:0px; margin:0px;/*width:97px;*/ height:100%; position:relative; top:0; left:0;/* background:url(/images/layout/mapSearch/20- controlBg.jpg) top left repeat-y; border-right:1px #AAA solid;*/visibility:hidden;display:none;height:0px;width:0px;}
#IDX-mapContainer {color:#000; background:#E5E3DF url(http://www.idxco.com/images/layout/gload.gif) top center no- repeat;width:100%;height:602px;}
#IDX-mapContainer a:link, #IDX-mapContainer a:hover, #IDX-mapContainer a:active, #IDX-mapContainer a:visited {color:#000;}
/* The mapWithContainer should normally be #IDX-googleMap width minus #IDX-mapControls width minus border width. In this case, 560 - 96 - 3 = 472px */
.IDX-mapWithContainer {width:464px; height:360px; position:relative; top:0; left:0px;}
.IDX-mapWithoutContainer {width:100%; height:100%;}
#IDX-mapOverlay {width:150px; height:50px; position:absolute; top:10px; right:10px; z-index:500; display:none; background:url(/images/layout/mapSearch/overlay.gif);}
/* Mode switching allows the map to be drawn with different tilesets */
.mapTypeButton {cursor:pointer; margin:0; padding:0; border:0;}
#IDX-modeRow {width:96px; height:131px; position:relative; clear:both; background:url(/images/layout/mapSearch/20-modeBg.jpg);}
#IDX-mapTypeMap {width:76px; height:20px; position:absolute; top:34px; left:10px; background:url(/images/layout/mapSearch/20-modeMap.jpg);}
#IDX-mapTypeSat {width:76px; height:20px; position:absolute; top:56px; left:10px; background:url(/images/layout/mapSearch/20-modeSat.jpg);}
#IDX-mapTypeHyb {width:76px; height:20px; position:absolute; top:78px; left:10px; background:url(/images/layout/mapSearch/20-modeHyb.jpg);}
#IDX-mapTypeTer {width:76px; height:20px; position:absolute; top:100px; left:10px; background:url(/images/layout/mapSearch/20-modeTer.jpg);}
/* The following CSS controls the general search controls */
#IDX-searchForm {margin:0; padding:0;}
#IDX-searchBoxWrapper {width:555px; height:60px; clear:both; margin:0; padding-bottom:20px;}
#IDX-searchBox {width:500px; height:55px; margin:0 auto; float:left; position:relative; left:97px;}
/* This container should be as large as the #IDX-googleMap declaration (minus borders, of course) */
#IDX-mapBasicBox {width:100%;height:600px}
#IDX-mapBasicBox input, #IDX-mapBasicBox select {border:1px #AAA solid;}
#lowPrice, #highPrice, #sqFt, #daysOnMarket, #acres {width:100px;}
/* These elements will be display and need CSS */
#IDX-mapMinPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapMaxPrice {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchAcres {display:none; float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBathRooms {float:left; width:110px; height:40px; margin-top:4px;}
#IDX-mapSearchBedRooms select {width:100px;}
#IDX-mapSearchBathRooms select {width:100px;}
#IDX-mapSearchHelpText {clear:both; text-align:center; font-size:8pt; filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;visibility:hidden;}
I've tried tweaking with the position of both the aforementioned divs and the Map CSS and cant seem to get it to work in Chrome.At the moment I am assuming that the problem is somehow related to either the Google Maps API itself, or the CSS for it. Any and all help with this issue would be greatly appreciated.
Edit: Also, I want to mention that the issue does not appear untill the google map has finished loading. In other words, if you are on a slow connection, or if you block the map function, you can see that all the elements behave correctly UNTILL the map is loaded.
So after continued searching, I found a partial solution that dates back almost three years. Apparently the issue is with webkit:
*{-webkit-font-smoothing: subpixel-antialiased !important;
-webkit-transform: none !important;}
This fixes the issue I had with the fixed div, but now I cant "move" through the map (For example: If I'm looking at Miami, FL and I try to click and drag the map, it moves but does not ever load the new map area).
Funny thing is this is an issue that Google was aware of three years ago but still hasn't fixed (The solution above came directly from Google's forums: Issue 1411 Gmaps-api-issues).
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit
It is working when i apply it as inline style.
<div id="footer">#Copyright 2012</div>
#footer
{
background-color:Black;
color:Silver;
width:100%;
text-align:center;
position:absolute;
bottom:0;
}
Look with Firebug which style is winning over your.
Please note that the order of declaration of your CSSs in your page matters, last win.
So you probably have another #footer rule in another stylesheet loaded after your.
Helllo, I have this html code
<div class="tf">
<img src="images/facebook.png" width="2%" class="tfimg">
</div>
and for the CSS
.tf {
float:right;
margin-right:65px;
margin-top:-30px;
padding:2px;
}
.tfimg {
position:absolute;
z-index:-1;
border:none;
}
to be the image out of the border but I can't click in the image so what's the problem and what's the solution for that ?
Both of your images have the same class assigned to them. You are stacking them on top of each other by not setting them to different positions and the facebook.com one appears on top since it is last in the html. If you want them to appear beside each other you can apply something like the following:
.tftwitter {
position:absolute;
left:0px;
border:none;
}
.tffacebook {
position:absolute;
left: 20px;
border:none;
}
And now assign each image the appropriate class.
try using:
.tf{
display:inline-block;
/* your more code */
}