I got an issue while hovering an image. i need to overlap the image with bottom section.
heres the link
http://hg01.ispghosting.com/techashram/UIDev_Inhouse_2014/Vivekraj_KR/Html5/BibAndTucker/index.html
If you remove the "border" off your li-tag and put it on your add_product.hover_visible then add some css to it perhaps something like this? Hope this will point you the right way:
position: absolute;
left: 0;
top: 0;
display: block;
border: 1px solid red; /*This would be your shadow box effect*/
height: 350px; /* Probably set a different height here that works better */
margin-top: 0; /* This was just to remove a CSS rule you had */
It requires your li (or any close parent to this tag) to be position: relative; but when i entered these rules into your page it seemed to get an effect that was half way there to what you want I think. Good luck!
Related
In my angular project I have following task to do.
This is just a design template, not my actual code.
So far I have made the right picture by having a div and setting the background image.
But now I dont know how to put a dark layer on the page (like on the left side). The logic is no problem, but I dont know how to achieve it with CSS.
How do I do it?
You can do this really simply let's suppose you have a div and you can style according to following rules, you can also replace with your element id or css class with div:
div{
position:relative;
}
div:after {
position: absolute;
background: rgba(0,0,0,0.3);
content: "";
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You can put a div over your image and style it the way you want it to.
If you make it black and put opacity on the element, it will get more transparent, which makes it look like its a little darker
Note that you will have to have the z-index set accordingly for it to work.
example:
overflow: hidden;
height: 100%;
z-index: 2;
Alternative you could try to add a shadow with background: linear-gradient()
example:
background: linear-gradient(to top, #3204fdba, #9907facc), url(https://picsum.photos/1280/853/?random=1) no-repeat top center;
So I'm using Square Space for the first time to build a website for my wedding.
Right now, when you scroll down on the homepage, there is some parallax scrolling that happens to bring up the next section. This is what it looks like:
Instead of having that harsh line that is the container of the next div's content, I would like to add another row of trees on top of that div so it would look something like this:
Then the trees move upwards and off screen as you scroll down.
So far, it looks like I can only customize the CSS and not the actual HTML files. I am unsure of how to do this in CSS.
When I inspect the div, this is what comes up in the CSS:
#content-wrapper .content {
width: 100%;
background-color: #54535f;
position: relative;
z-index: 50;
}
.content.has-main-image {
box-shadow: 0 0 75px rgba(0,0,0,.1);
}
Can anyone help with the code for this? I could easily do it if I had access to the HTML and could just make another div, but I have no idea how to do it with CSS.
Thanks!
One way to do this is by creating a separate layer for the dark trees as discussed in the comments. Since you cannot modify the HTML structure, we'll create a pseudo selector for the #content-wrapper .content div which will essentially be a background layer that gets the dark trees, while the body gets the background without the trees.
First step is changing the body background to the image without the dark trees.
Then, add this CSS:
#content-wrapper .content:before {
content: ""; /* required for psuedo selectors to work */
display: block; /* makes sure element is a block box */
position: absolute; /* make sure element does not affect layout */
left: 0; right: 0; width: 100%; /* makes sure element stretches */
height: 400px;
top: -350px; /* offset element from content box so it appears above it */
z-index: -1; /* make sure element does it overlap other elements */
background: url(http://i.imgur.com/xx72pbB.png) no-repeat 50% 44%;
background-size: cover;
}
Also, I noticed that thebackground-color in content boxes do not match the dark trees color, the correct value should be: #585862
#content-wrapper .content {
width: 100%;
background-color: #585862; /* was #51535c */
position: relative;
z-index: 1; /* was 50, change to 1 to prevent overlapping */
}
.content-inner {
background-color: #585862; /* was #51535c */
max-width: 960px;
margin: 0 auto;
padding: 100px 8%;
}
Pros
Keeps parallax effect
No modification of HTML structure
Adds depth
Cons
Slight increase in page load time (since making two http requests)
End result should look like this:
I'm not sure what is going on behind the scene here. I couldn't set my blue line to the back of my divs.
I've try adjusting the z-index to 0 , the line is stay on top of my divs.
Then, I decrease one by adjusting the z-index to:
-1 , the line disappear completely. ???
I'm clueless now.
CSS
My line class = .tl-line:
.tl-line:before {
content: '';
position: absolute;
border-bottom: 1px #3498db dashed;
z-index: 0;
top: 27%;
margin-top:-2px;
right: 7%;
left: 7%;
width: 88%;
}
Here is my live result : Fiddle
Add the following:
.tl-box, .tl-right, .mp-arrow-container {
position: relative;
z-index: 1;
background: white;
}
This will place the boxes on top of the dotted line. The background is needed to prevent the line from bleeding through.
Fiddle
.tl-box {
position:relative; /* add this */
z-index:1; /* add this */
Do the same for any other element you want to overlap the dashed line.
Though you'll have problems placing you dashed line above the left arrow, cause your HTML and CSS are basically misplaced and overly complicated. The JS slider stuff can also be simplified, but that's another story.
My suggestion is to place the left arrow HTML right after the element that has the dashed line pseudo, but than you need to fix their CSS positions too.
Actually this is a problem I encountered during the developing of blogger.
I want to write a navbar on my own, but the width of parent elements limit the style width:100%, even if I set the float properties to it.
Please see the image above. Only nav's HTML/JS/CSS are configurable. So how can I configure the CSS Style of class nav to archive this goal?
Or, If you have relevent experience in developing blogger, please tell me.
Thanks a lot!
use position absolute for your nav. Look at this FIDDLE
html :
<div class="first">0</div>
<div>
1
<div class="nav">NAV</div>
</div>
<div>2</div>
css :
div { background: grey; width: 75px; height: 50px; margin: 20px auto; }
.first { margin-top: 75px; }
.nav { background: red; position: absolute; top: 10px; left: 0px; width: 100%; margin: 0; }
EDIT
Your nav is in a position:relative; well you can append your nav to your body with that jquery (HERE THE FIDDLE UPDATED):
$(".nav").appendTo("body");
To achieve that kind of 'layering' you probably need to use absolute positioning, especially if your options are limited. This has the obvious caveat of taking it out of the page's flow, so you'll need to ensure your page is never too short for it to be visible. It won't affect other elements around it either.
So, something like:
nav {
left: 0;
position: absolute;
top: 400px;
width: 100%;
}
Hopefully one of its parents has a position: relative; so the nav knows where to use as an origin point when positioning absolutely, otherwise it'll use the top left of the browser pane.
You may also need a z-index value if you want your nav to appear behind the content.
Not sure if this is what you are searching for, but you can try giving your naviation position: absolute; and width: 100%;. This will get the navigation element out of the flow of the document.
I have a div that has a variable width, depending on its content. I want to use it for a menu bar that slides in from the side of the page when the user clicks it, so it has to stick out. I want it to stick out exactly 16px (because the arrow image has that size), no matter how wide it actually is.
How can I realize that without using JavaScript?
EDIT:
Thanks for your answers! But it came to my mind that I could do it just like I did with the navbar on that site – modify the width instead of sliding it in.
See here: http://dev.mezgrman.de/tagwall/
The easiest way to do that is to add another class to your menu item when it is collapsed and set another width there and a text indent like so (instead of write again all your css in a new class)
.collapsed {
width: 16px;
text-indent: -9999px;
background: url("/images/arrow_left.png") no-repeat scroll right center rgba(0, 0, 0, 0.85);
}
Now the only thing you have to do in javascript is to add and remove that class depending on the user's click. (You won't get rid of javascript. because css doesn't know when you click an element)
http://jsfiddle.net/LruWn/
No matter how long the .box is, it will always overlap the .container only by exactly 16px:
html:
<div class="container"><div class="box">text</div></div>
css:
.container {
position: relative;
outline: 1px solid red;
width: 100px;
height: 100px;
}
.box {
width: 70px;
position: absolute;
left: 100%;
margin-left: -16px;
outline: 1px solid black;
}
Add overflow: hidden; to .container to see how it might look like in action.
I solved my problem by modifying the width of my element now. Silly me.