I was searching for diagonal divs and I didn't find anything that can help me. I have this project to do and I need to do this.
This
And This
I want to do exactly like that but I only find posts with horizontal diagonal divs..
Thanks, regards.
Edit: The second image link its the continuation from above.
Try this easiest solution on the internet for making polygon shapes
You can use a CSS property clip_path to produce a shape of any type.
-webkit-clip-path: polygon(0 33%,100% 10%,100% 60%,0 85%); This line represents that we are drawing polygon which has four points and specifying the
location of each point in terms of x and y. You can specify the
position in terms of px, % or any unit terminology
CSS Code
#header{
background-color:green;
height:350px;
width:100%;
-webkit-clip-path: polygon(0 33%,100% 10%,100% 60%,0 85%);
}
And
HTML Code
<html>
<head>
</head>
<body>
<div id="header">
</div>
</body>
</html>
And check this link, where I've written the same code just to illustrate the clip-path functionality, to jsfiddle
For further and details Explanation check these links:
https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path
https://css-tricks.com/almanac/properties/c/clip/
let me know if u didn't understand anything. I'll be more than happy to help you.
I don't know nothing about diagonal divs but u can try to cover parts of img's that you need with
.cover {
position: absolute;
top: -25px; /* or differenet position that fit on every section*/
left: 0;
z-index: 1;
width: 100vw;
height: 50px; /* or different height that you need*/
transform: rotate(-10deg); /* or different angle*/
background-color: white;
}
<div class="cover"></div>
And the same thing on bottom of section.
Be sure to set overflow and position on every section:
overflow: hidden;
position: relative;
Related
I know it might be a duplicated question, but I couldn't find the answer anywhere else in the internet.
Question is very simple: I want to know how should/could I add shapes/decoration to the page layout correctly so it will not look broken inside a responsive container.
Click here to see the picture!
Actually I don't know the way to add that much shapes without making some mess in the code or completely braking the responsiveness of the container itself. If anybody already have done this, please describe your solution/method of doing this correctly. Thank you in advance and hope this will be useful to somebody else.
You should probably set a position : relative in the parent element and then use position: absolut; with relative unites.
Also take care to have a lower z-index for the decorations:
section {
background-color: rgb(69, 83, 95);
display: inline-block;
position: relative;
width: 70vw;
height: 70vh;
}
.content {
z-index: 2;
}
.element {
position: absolute;
z-index: 1;
color: white;
}
.element1 {
top: 20%;
left: 20%;
}
.element2 {
top: 80%;
left: 30%;
}
.element3 {
top: 50%;
left: 70%;
}
<section>
<span class="element element1">+</span>
<span class="element element2">*</span>
<span class="element element3">*</span>
</section>
As the decorations are just that, with no particular meaning that for example would be read out by a screen reader, I would put them in as background images - either as SVGs or gradients (if suitable) and position and size each one in terms of %s relative to the dimensions of the main element.
That way you have a responsive page and you haven't cluttered up the HTML with elements.
Each of the decorations seems separate, but if they overlap then remember the one that comes first in the background-image list will be shown on top of one coming afterwards.
So you are going to end up with CSS looking something like this:
background-image: url(svg1), url(svg2), url(svg3)...;
background-position: x1% y1%, x2% y2%, x3% y3%,...;
background-repeat: no-repeat no-repeat;
background-size: w1% h1%, w2% h2%, w3% h3%,...;
It's easy to work out the percentages, just use a ruler on the image - any units will do, and divide by the width or height of the main element as appropriate * 100.
I was trying to position the right edge of a div element 300px from the center of the page with the following code:
HTML:
<div id="content">
<div id="login">
<!-- login area -->
</div>
</div>
CSS:
#content {
width: 100%;
position: relative;
top: 0px;
}
div#login {
position: absolute;
text-align: right;
right: 50%;
transform: translate(300px, 0px);
}
However, strangely, this results in the div being moved to the right by 374px.
Is there anything I forgot to think about?
Or is there a better way to reach the same result?
Another solution without using transform -
use right: calc(50% - 300px);
See this JSFiddle first
Now check this fiddle
don't forget to widen the jsfiddle result window to see the result properly
Hope this works as you want. If this doesn't work then please feel free to share it, also check if another CSS is overriding some styles of the div, I doubt this is happening.
Well, as it turned out, the problem was not CSS, but Windows 10 settings. Be careful when measuring screenshots in GIMP while having set the general display size at 125%...
After that, all solutions worked fine, thanks!
I got the following problem. I want to display a map on a site. The map is a background image.
This Code makes the image perfectly responsible.
section#map {
max-width: 960px;
}
div#map-image {
background: url(Map.jpg) top left no-repeat;
background-size: 100%;
padding-top: 41.875%; /* 402px/960px = 0.41875 height/width of map */
}
So far so good!
But now I want to have some sort of location pin on that map, that behaves also responsive. Since I want to animate it I didn't include in the map graphics, so that is of the table.
Is that possible to do?
Using position:relative; doesn't work because the parent element do not have a width/height specified. Margin/Padding didn't work either.
style for the location pin:
span#location
{
background-color: red;
width: 12px;
height: 12px;
border-radius: 6px;
/*position: relative;
top: 86.9%;
left: 52.26%;*/
}
html looks like this:
<section id="map">
<span id="location"></span>
<div id="map-image"></div>
</section>
Any ideas how to pull this off?
add position: relativeto #map the width of the map seems to be 100% of its parent. position:relative for the pin should then work.
Unless you set the map to position:relative, any relative or absolute positioned elements within that <section id="map"> will take its relative position from the <body>
Can't test it because I don't have the map-image, but this seems working:
position: absolute;
jsfiddle
They say, that a single picture can explain more than a tousand words, so here's my "more": http://www.imagebanana.com/view/hcqsz5fs/cols.png
My goal is to have the columns as shown on the image, with them together having 100% body width.
And my fiddle is here: http://jsfiddle.net/c2JH3/ (note that this is just a mockup of my current work).
How can I achieve this?
A Quick Note
In your comments, you are saying that you can't use a background image because the height is variable.
The way to fix this is using multiple images, and tell them to repeat or not to repeat on different parts of the page. But I'll go over this after I answer your question directly.
Short Answer
To get 100% body width, you'll want to use percentages (%) on for your width rules. Like this:
#left {
width: 60%;
}
#right {
width: 40%;
}
Fixing Some Problems
One problem you are bound to encounter when you have content that passes the bottom of the screen. In this case, you need to tell the divs to stay side by side.
This should do the trick:
#left {
position: absolute;
top: 0;
left: 0;
width: 60%;
}
#right {
position: absolute;
top: 0;
right: 0;
width: 40%;
}
Back to the Note
Believe me, you don't want to be using percentages on your widths. It makes sizing and scaling extremely hard to design nicely, and changes that you try to make in the future probably won't work without a complete redesign of your css.
Like I was saying before, you want to use multiple images. You'll have background image on the body tag that - going by the design you provided - has the gray-to-orange fade in it. The css would look like this:
body {
background-image: url('path/to/header.jpg') no-repeat;
}
You would then have a wrapper div like the one you already have, that holds the content and such. Inside the wrapper you have:
A header (the logo and navbar), which would have no background (so you can see the body background).
A featured section which holds that really big image in the middle. You can use negative margins to get it centered.
A subnav section for those images in the middle. This would have it's own background image that has a matching part of the background of the body so that it appears to flow in as the image does.
A content section that holds all of the content of the page. This would have an image repeating vertically to look continuous.
#content {
background-image: url('path/to/slice.jpg') repeat-y;
}
A subfooter section that has the curved part of the page (that gray-to-orange curve at the bottom).
And finally a footer section that has all the stuff on the very bottom.
You can use the same structure on the inner pages, you would just use different images and spacing to change the look of the page.
To Sum Up
You will never, ever need to have a 100% width for your wrapping div. (I say this to generalize, there are certain styles that use this, but they aren't the same kind of design).
What you should always try to do first is create images for the body, header, content, and footer sections that create the look you want.
Then have your wrap be a set width in pixels that will stay in the center of the page, while the margins increase and reveal more of the background image.
Have fun and good luck with your design!
I don't know how to use fiddle. But this worked out fine for me.
I just used the background colors and borders to properly show the differences
<!doctype html>
<html>
<head>
<title>xxx</title>
<style>
body{
margin: 0;
}
#wrap {
width: 100%;
}
#left {
width: 600px;
float: right;
border: 1px solid #000000;
}
#right {
width: 350px;
border: 1px solid #000000;
}
#container_left {
width: 55%;
float: left;
background: red;
}
#container_right {
width: 45%;
float: right;
background: blue;
}
</style>
</head>
<body>
<div id="wrap">
<div id="container_left">
<div id="left">
<p>Content</p>
</div>
</div>
<div id="container_right">
<aside id="right">
<p>Sidebar</p>
</aside>
</div>
</div>
</body>
Cheers!
Thank you all for your answers and ideas. They were helpful and I did learn something new (my biggest 'thank you' goes to #Jon for a really great, great post). But, since I can't solve this neither with percents nor backgrounds (since my design is a little more complicated that the one provided), I made my way with jQuery. To sum up, here's my mockup fiddle.
Note: sometimes you'll need to change left 125 to 126, just to make sure both ends meet.
When I resize the window too small, the image slides off the left of the page. There is no way to even scroll over to it. What can I do to prevent the image from sliding off the page? The problem is absolute divs but I don't know how to get it to work without them.
The code:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.chart {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 100%;
}
</style>
</head>
<body>
<div class="chart">
<img src="Resources/chart.png" width="432" height="256" style="display: block; position: absolute; top: 50%; margin-top: -128px; right: 0;"/>
</div>
</body>
</html>
1: http://www.freeimagehosting.net/image.php?11b1fcb689.png>http://www.freeimagehosting.net/uploads/th.11b1fcb689.png
Position it with:
.chart {position: relative; }
position:absolute; takes it out of the document's flow, so it's not accounted for with scrollbars. position: relative; keeps the element in the flow, so you can still scroll to it.
Edit
In response to Michael's comment:
I'd like it to be centered vertically. Is it possible with relative positioning?
Yes, it is. And it involves a little jiggery-pokery, but I'm using FF3.0.11/Ubuntu 8.04, so the weirdness may be platform dependant.
First define the top-left corner of the positioned element:
.chart {position: relative;
width: 50%;
left: 50%; /* 50% works for left-position, but wouldn't for 'top' */
margin: 25% 0 0 -25%;
}
To explain the margins:
I tried initially to use the same positioning I'd use with position: absolute; (top: 50%; left: 50%;), but that didn't work. I'm not sure why, exactly, though I suspect that it's related to how the height of the percentage is calculated. Still, trial and error (and this is why I noted my browser/platform above) found that 25% seemed to place the origin (top left corner of .chart) in the right place.
The 25% then represents only my best-guess of vertically-centre. The -25% is easier to understand, it's the usual 'horizontal-center minus half the element-width' thing. Although you could maybe more-easily just use width: 50%; margin: 0 auto; to achieve the same thing.
I don't understand why positioning with the usual top: 50% didn't work, but I am using a css-reset stylesheet (specifically Eric Meyer's 'reset reloaded' stylesheet, found here: http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/)
It's worth noting that the page appears consistently-with-Firefox in Midori (which, I think, uses the Webkit rendering engine), and I'll be uploading the demo page shortly (to: http://www.davidrhysthomas.co.uk/so/rel-pos-centre.html) for public ridicule review for differences.
And also, if anyone could help out and explain the weirdness in having to vertical-position with margins rather than top: xx that'd be appreciated.