I was wondering how I could implement this shape into my website. Furthermore, when I copy and paste it into my website, the text position of the string "CLICK ON THE ARROW BELOW TO SCROLL DOWN" gets adjusted and I want it to stay above the arrow. Here is my codepen
I changed the hex colour to red so you can see what I mean.
Below is the HTML / CSS code for the rounded shape I want to implement within the middle of my website page. How could I also write text over this object?
<div id="shape">Rounded corners!</div>
#shape {
border-radius: 25px;
background: #111;
padding: 20px;
width: 200px;
height: 150px;
}
The shape is already there. (?)
Concerning the text you write about: You have margin-top:530px; on your p tag, which makes it disappear behind another element. Erase or adjust that margin. And use a class on that element and its CSS, since otherwise all p tags will get these settings.
P.S.: To center your #shape DIV, use these mergin settings on it (and no float):
margin:100px auto 0 auto;
http://codepen.io/anon/pen/KaepGZ (edited)
ADDITION:
http://codepen.io/anon/pen/LxrpPY
--> This places the text above the arrow, giving it position absolute with horizontal centering and a fixed bottom setting:
.arrowtext {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 75px;
}
But you have to move that text container into your section, above the arrow element. See my second codepen for details.
Related
I am trying to achieve an effect where I can diagonally crop an image in a way that is displayed below. I am aware of clip path as a solution but it would not be suitable in this scenario since it is not supported by certain browsers which are essential for this particular task. (IE and Edge)
Additionally, the cropped edge would need a black border which adds on to the complexity of what I am trying to do. Having searched for answers and coming up with anything, any suggestions would be appreciated.
Maybe you could overlay the image with a rotated element (div or something) that you give a border and white background. This solution would work if you're okay with a solid background color.
Another solution, depending on your requirements, could be to simpy use a .png image with transparency.
Yes you can, it's a bit tricky to get the sizes of the divs correct. But here's generally how to do it:
HTML:
<div id="outerwrapper">
<div id="innerwrapper">
<div id="content">
<span>asdf</span>
</div>
</div>
</div>
CSS:
#content {
width: 100px;
height: 100px;
background-color: red;
transform: rotate(-60deg);
transform-origin: 50% 50%;
position: relative;
}
#content span {
position: relative;
top: 30px;
left: 30px;
}
#innerwrapper {
border-right: solid 3px black;
overflow: hidden;
width: 100px;
height: 100px;
}
#outerwrapper {
transform: rotate(60deg);
transform-origin: 50% 50%;
width: 120px;
height: 120px;
overflow: hidden;
}
Fiddle:
https://jsfiddle.net/ywfpeve8/
To explain this:
You have a div that contains the content itself. In this example it's just a span, but it can be anything. (I put it in to see that in the end everything is horizontal again)
You rotate that content div to some degree that suits you.
You place that div in a wrapper with a different size where you can position your content in. That div has an overflow: hidden, to crop all that content that is outside of the inner wrapper box. That wrapper then also has the border where you want the crop to be highlighted.
That inner wrapper is placed in an outside wrapper that rotates the same amount at the content div, but backwards, leaving you with the original 0 degree alignment of the content. This div again has overflow: hidden to crop that inner wrapper again so that you can hide the other "crop edges" that you want to be invisible. In my example code I didn't to the correct dimensions and positionings as it takes a bit to get right. But if you have an image with a white background, that shouldn't be very hard anymore to get things right.
Bonus: the background of the top-level element (that element that holds the outerwrapper can have any background at all and you won't see a rectangular box at the bottom right corner (for this example) as everything just happens with overflow: hidden and without bars that go over the content to hide it :)
I have an absolute positioned div. Inside this div there is an image and underneath it, a caption. Now I want the caption to break to new a line if it reaches 95% width of the image.
But I can't get it to work. The text (no matter what width I say), always moves the image to the left like it would have no breaks.
I made a fiddle for this:
http://jsfiddle.net/hw7t7xyn/1/
The image is set to
right: 0;
top: 10px;
But since the text is too long it moves to the left.
Also the div.caption does not seem to adopt the parents div width.
Can anybody help me out here? Maybe it's a problem of the HTML setup or the CSS, I have no idea anymore, but it's driving me crazy.
Update: Sorry, I did forget to mention that I don't know the dimensions of the image. Is there a possible way to do this without javascript?
I think you just need to add a width to the main div (the one that's absolute positioned).
I added a width of 260px (same as the image)
When I did this, it aligned the div to the far right as you have right:0px is this correct?
http://jsfiddle.net/hw7t7xyn/5/
div.photo-wrap {
overflow: hidden;
position: absolute;
text-align: left;
width:260px;
}
img.photo {
position: relative;
display: block;
}
div.caption {
margin-top: 7px;
width: 95%;
position: relative;
display: inline-bock;
}
give width to photo-wrap
I've been trying to place an image over a div, my div is
.my_box{
position: relative;
left: 200px;
width: 200px;
height: 200px;
background-color: white;
opacity: 0.7;
}
and then my image is
.asvp{
position:relative;
left: 300px;
top: 100px;
}
When I do this is puts the image under the div, what do i do in order to place it over the div? I know to put the image into the div but that will but the opacity onto the image which I dont want.
Try adding z-index:1 to .my_box and z-index: 10 to .asvp. Hard to peg without the HTML code though. If this doesn't work, please create a jsFiddle and I'll sort you out. :)
You should also use margins instead of left and top. For example, on .asvp remove left and top and put margin: 100px 0 0 300px;. As a general rule of thumb, I only use left, right, top, bottom on absolute elements.
why dont you give your image position:absolute; instead... that would automatically put it ontop of it
Instead of repositioning, you can keep the image inside the div without its opacity effecting its contents. If it's a solid semi-transparent background like in your example, you could use rgba value on the div like this:
background-color: rgba(255,255,255,0.7);
This and other options here:
https://stackoverflow.com/a/6780462/2909501
I'm having trouble creating the desired layout I want with CSS and HTML.
What I'm trying to have is a heading skewed div and then have a straight background along the x-axis. Something similar to the image below:
So far, my attempts have been futile as you can see here. I need the inner div to extend to the full width of the point of the outer div.
Anyone have any ideas?
This is a hacky version you can use as a starting point:
http://jsfiddle.net/32C6E/1/
It is more complex as you require behind the menu to show the background under the heading. Because of that it requires another element for the white bar after the menu. I've set the white areas to be % width, but the menu isn't so that'd need to be fixed to make sure they never overlap.
The basic technique is to skewX the white areas to get the diagonal, and reverse skew the h1 so that the text is straight. I then add a negative margin to hide the left side of the element.
header {
transform: skewX(-35deg);
margin-left: -5em
}
header h1 {
padding: 4em;
-webkit-transform: skewX(35deg);
}
I then absolutely position the menu items so they are in the bottom left corner of the nav, and rotate them to the correct angle, with the origin at the bottom left. I then fiddled with the position until the first item was in the correct place:
nav li {
transform: rotate(-55deg);
transform-origin: bottom left;
position: absolute;
bottom: -2.6em;
left: 0em;
}
Finally I selected each menu item individually and added to the left value to poisition them correctly:
nav li:nth-of-type(2) {
left: 2.5em;
}
And so on…
Ideally the menu would be kept in the flow of the document so you don't have to manually position each menu item. This is probably possible, but I've run out of time to look into it. I'm sure you can build on it.
I suggest you to try border-width property. This will resolve your issue.
Here is the fiddle
The HTML:
<div class="abc"> </div>
The CSS:
.abc {
width: 200px;
height: 0px;
border-color: lightgray transparent;
border-style: solid;
border-width: 350px 350px 0px 0px;
position:relative;
display:block;
margin-left:50px;
}
Hope this helps.
I have the following:
HTML:
<div class="banner-success">
<span class="banner-text">
You were successful! Yay! Some long reason what your success
implies goes here.
</span>
</div>
CSS:
/*Add future banners to this style, this is generic banner styling*/
.banner-success
{
background-position: 5px 5px;
background-repeat: no-repeat;
min-height: 42px;
padding-left: 47px;
margin-bottom: 10px;
}
/*Create a new entry in this section for each banner, with appropriate image and
colors*/
/*----------------------------------------------------------------------*/
.banner-success
{
color: #004400;
background-color: #DDF2E4;
background-image: url("../Images/Success.gif");
}
/*----------------------------------------------------------------------*/
.banner-text
{
position: relative;
top: 5px;
}
This allows for a standard banner, each with an image and arbitrary lines of text, assuming a consistent image size. My issue is that the div is being sized as if the text within isn't being pushed down, and so the bottom line of the text reaches outside of the div.
Is there a way to tell a div, or any container element, 'be as big as your constituent elements are, AFTER they've been relatively positioned to you'?
Apply overflow:hidden to the .banner-success.
I made a couple of tweaks to even out the padding around your text (and subbed a background
image so you could see it working w/ an image in place):
http://jsfiddle.net/qTsgL/
Cheers!