I'm trying to create a slanted sidebar menu to my website like in the wider shape picture attached. The idea is to start the diagonal lines in both the top and bottom of the div from about the middle of the width, maybe even from a bit closer to the edges. Eventually when the menu is collapsed, it suppose to look like in the picture with the narrow shape. How can I do it? Thanks!
P.S: I already got the functionality to work. I only need help with the CSS Design of the div.
.triangle-left {
width: 0;
height: 0;
border-top: 750px solid transparent;
border-right: 50px solid #555;
border-bottom: 750px solid transparent;
}
<div class="triangle-left">
</div>
This can probably be adjusted as well for your needs but this is how I went about attempting this.
Related
I am trying to create a sticky footer from a simple looking tutorial I found online. This seems to work ok until I try putting a width on my content div and I have no idea why.
If I add a width to the content div it seems the footer no longer has any distance between itself and the content div and so it obscures the content if there is a lot of content.
I have created this jsfiddle but it doesnt look as obvious there as it does if viewed in say firefix or IE.
Does anybody know why this is happening and what can I do to have a content div with a fixed width and auto margins to centre it but still have a footer that sticks to the bottom all the time if there is hardly any content or a large amount of content.
Below is my css for the content div:
#content {
margin-top: 15px;
padding-bottom:100px; /* Height of the footer element */
border-left: 1px solid #C9C9C9;
border-right: 1px solid #C9C9C9;
border-bottom: 2px solid #C9C9C9;
box-shadow: -3px 0 3px -3px #333, 3px 0 3px -3px #333;
width: 1024px; /* Here adding a width causes the footer to overlap */
margin-left:auto;
margin-right:auto;
background-color: white;
text-align: center;
border: 1px solid red;
}
http://jsfiddle.net/32M9Q/1/
At least in Chrome, the JSFiddle shows no problems for me. It looks the same with or without putting a width on content. I even added a bunch more words and the footer still didn't cut anything off. So the padding does effectively work, at least in my case.
However, based on what you said on the other answer, perhaps you could just change position:absolute on the footer to position:relative (assuming the footer won't have anything placed under it...and I'm guessing not since it's a footer). It makes sure the footer is placed after the content instead of being placed on it. Be wary, though, and make sure to check it in many different cases (browsers and devices).
I would also include a margin-bottom on the content, just in case.
Try adding the following CSS rules to the #footer element:
position: fixed;
clear: both;
This will give you a sticky footer (if I got what you want to do correctly) that does not overlap with the main content. You can probably loose the clear: both part, but it may help with some browsers...
Setting the background color of my web page to match the footer and the body isnt an option, I appreciate all the answers I have been given so far but unfortunately none of them were suitable for me.
I have had to do what I consider to be a hack which is add a div below the content which is higher than the footer, this means the footer sits on top of this div and not my content giving the illusion of space between the content and the footer:
<div style="height: 120px;"></div>
<div id="footer"><span style="color: red"> This is the footer section</span></div>
So, I'm working on my Wordpress theme for my personal website, and I'm stuck trying to figure out how to do a couple things:
1) I need for the white to extend above the top edge of the page content
2) I'd like for the container to extend to the bottom edge of the viewport if possible.
I'm using Twitter Bootstrap for all of my layout stuff. Source is viewable by normal means, etc.
I tried using min-height: 100% in various places, haven't had much luck. Maybe it just wasn't in the right place, who knows.
Thanks ahead of time for any response!
To get the white to extend to the top, remove padding-top from the .page-container and add it to page-outline instead. Also add height: 100% to the page-outline.
So your CSS looks like this for page-container and page-outline:
.page-container {
min-height: 100%;
}
.page-outline {
background-color: white;
border-left: 1px solid black;
border-right: 1px solid black;
padding-top: 25px;
height: 100%;
}
I'm looking at making a trapezium with a box shadow that's 10px wider at the top than the bottom. In the past I've made a trapezium as outlined in the following jsfiddle, but you'll notice that if I put a box-shadow onto the element it boxes the outerWidth in a rectangle, rather than putting a shadow on the slanted border:
#trapezium {
margin:20px auto;
height: 0;
width: 80px;
border-bottom: 80px solid blue;
border-left: 40px solid transparent;
border-right: 40px solid transparent;
box-shadow:0 0 10px #333;
}
http://jsfiddle.net/YhePf/8/
My initial thoughts would be to use something along the lines of:
-webkit-transform:perspective(100) rotateX(1deg);
Something like that. While this certainly begins to resolve the issue, I'm not sure what the number 100 refers to in 'perspective', and how I could calculate a formula that would make sure the top width was precisely 10px wider than the bottom, regardless of how high or wide this element is.
Any tips? Or a third option to pull this off?
What you've built isn't a trapezoid (aka trapezium) -shaped element; it's a rectangle-shaped element where the border styling creates the appearance of a trapezoid. This is why the box-shadow is rectangular.
Using the proprietary -webkit-transform property wouldn't change the shape of the actual element.
To create a truly non-rectangular element, you'll need to use SVG. See Multi-Shaped CSS Layers \ Non-rectangular CSS Layer or non-rectangular hoverable area.
Imagine a software box like the following:
(source: sitellite.org)
Now imagine the shadow is not there. Is there a CSS way that I can simulate that background shadow, and work on at least Firefox and Chrome, if not also IE9 and up?
One way would be to start with a triangle shape like this
<div id="triangle"></div>
#triangle {
width: 0;
height: 0;
border-top: 100px solid grey;
border-left: 100px solid transparent;
opacity:0.1;
}
see example
Then add a linear-gradient and position it behind the image. Take a look at this gradient generator as a starting point.
Then you could use transform to skew it slightly.
I have created essentially a large arrow pointing right.
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-bottom: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
<div style="
font-size: 0px; line-height: 0%; width: 100px;
border-top: 80px solid #8cb622;
border-right: 62px solid #dadbdf;
"></div>
Now I know this isn't "proper" but I am just testing right now.
I am wondering if there is a way that I can use this border technique and still somehow place a drop shadow on the leading bottom edge of the arrow. I was thinking of placing another div underneath it, but for this technique to work the other borders need to be visible.
If this can't be done using the border technique am I forced to use an image as the front of this arrow.
Thanks
You might want to consider using a Canvas to do this, which works cross platform very well with ExplorerCanvas included for MSIE compatibility (and of course is supported natively in WebKit & Gecko).
I believe it is box-shadow but that is likely to assume it works on the box model and probably won't compute the geometry created by the borders.