when this menu is on the left the 100% width content is fine, as soon as i swap the menu from the left to right right the content is now 100% the whole width and not the space between the menu (its when i add right: 0; to the left menu to make it appear on right
jfiddle left menu: http://jsfiddle.net/mxadam/ZQQ6s/21/
jfiddle right menu: http://jsfiddle.net/mxadam/ZQQ6s/22/
left menu
html, body {
height: 100%;
margin: 0;
font-size: 20px;
}
#left {
width: 300px;
height: 100%;
position: fixed;
outline: 1px solid;
background: red;
z-index: 10;
}
#right {
width: 100%;
height: auto;
outline: 1px solid;
position: absolute;
right: 0;
background: blue;
left: 300px;
border-left: 10px solid #fff;
}
right menu
html, body {
height: 100%;
margin: 0;
font-size: 20px;
}
#left {
width: 300px;
height: 100%;
position: fixed;
outline: 1px solid;
background: red;
z-index: 10;
right: 0;
}
#right {
width: 100%;
height: auto;
outline: 1px solid;
position: absolute;
left: 0;
background: blue;
right: 300px;
border-right: 10px solid #fff;
}
what can i do? cheers
Remove the width:100%.
The left and right coordinates of an absolute or fixed positioned element are enough to calculate the desired width.
Just remove the border:10px.. The white space is nothing but border...
border-left: 10px solid #fff;
Either remove it or make it blue or red to remove the color distinguish.. :-)
Edited JSFiddle (I know it is not needed :P) : http://jsfiddle.net/rahulrulez/ZQQ6s/23/
http://jsfiddle.net/xTPLG/
Check this link. It might help you.
#right {
height: auto;
outline: 1px solid;
position: absolute;
left: 0;
background: blue;
width:250px;
border-right: 10px solid #fff;
}
Related
div {
margin: 50px;
position: relative;
background-color: red;
width: 200px;
height: 50px;
border: 2px solid black;
}
div::after {
content: '';
position: absolute;
background-color: green;
width: 100px;
height: 100px;
border-radius: 100%;
top: -25px;
left:50px;
border: 2px solid black;
}
div.overflow-hidden {
overflow: hidden;
}
<div>1st</div>
<div class="overflow-hidden">2nd</div>
1st case: as expected.
2nd case[overflow-hidden]: Middle part of top and bottom border should be green. Looks like circle is not above its parent div's border. Is there any way to make it above it? Whats happening here? Will the z-index work?
Why is this happening?
This is because overflow: hidden; clips the content to the content box.
hidden
Content is clipped if necessary to fit the content box. No scrollbars
are provided.
MDN Web docs - https://developer.mozilla.org/en/docs/Web/CSS/overflow
This can be seen in the first example below as I have changed the border to be transparent.
What can you do?
One way to get around this would be to apply the border using an absolutely positioned pseudo element instead of to the containing div.
div {
background-color: red;
height: 50px;
margin: 50px;
overflow: hidden;
position: relative;
width: 200px;
}
div::after {
background-color: green;
border: 2px solid black;
border-radius: 100%;
content: '';
height: 100px;
left: 50px;
position: absolute;
top: -25px;
width: 100px;
}
div.overflow-with-border {
border: 2px solid transparent;
}
div.overflow-with-pseudo {
padding: 2px;
}
div.overflow-with-pseudo::before {
border: 2px solid black;
box-sizing: border-box;
content: '';
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
<div class="overflow-with-border">1st</div>
<div class="overflow-with-pseudo">2nd</div>
I am successfully achieving my goal but in so doing the divs stick outside the normal area and require scrolling. How can I achieve this sort of masking while keeping everything contained horizontally. I've tried altering the position of various elements and can't seem to achieve this goal. *Note the colors are only there for reference, in the end the red/blue/green divs would be white.
https://jsfiddle.net/xevsz81c/
#leftDivider {
width: 50%;
height: 50px;
background:red;
float: left;
position: absolute;
left: -50px;
}
#leftDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 50px 0 0 60px;
border-color: transparent transparent transparent green;
float: left;
position: relative;
left: 100%;
}
#rightDivider {
width: 50%;
height: 50px;
background: blue;
float: right;
position: absolute;
right: -50px;
}
#rightDivider div{
bottom: 0px;
height: 0px;
border-style: solid;
border-width: 0 0 50px 60px;
border-color: transparent transparent green transparent;
float: right;
position: relative;
right: 100%;
}
.divider {
position: absolute;
bottom: 50px;
right: 0;
left: 0;
}
.row {background: orange; position: relative; height: 300px; padding: 0; margin: 0;}
html, body {margin: 0; padding: 0;}
<div class="row">
This div has a background image
<div class="divider"><div id="leftDivider"><div></div></div></div>
<div class="divider"><div id="rightDivider"><div></div></div></div>
</div>
I am having a difficult time recreating the issue in your fiddle, might be a lack of the image within the orange div. But try the following:
You would have to utilize the overflow: hidden property.
By doing this you hide the extra and disable the scrolling which sounds like what you need and are experiencing.
See the explanation here as well as its uses.
I have this triangle:
When browser gets smaller it is cropped this way:
I would like it to crop from both left and right, so the text would still be viewable.
Markup:
echo '<div class="triangle"><p class="season">SEASON '.substr($patch_array[$x][0],0,1).'</p></div>';
CSS:
.season{
font-size: 16px;
text-align: center;
top: -35px;
left: -60px;
position: relative;
width: 113px;
margin: 0px;
padding: 0px;
color: white;
}
.triangle{
width: 0;
height: 0;
clear: both;
margin-left: auto;
margin-right: auto;
border-left: 300px solid transparent;
border-right: 300px solid transparent;
border-top: 45px solid #6699ff;
}
The idea is to set the container to relative position, then draw the shape with pseudo element, and set both the shape and text as absolute position and always stay centered.
Also made a some small improvement - changed left and right border style to outset, it does the trick to make lines look much smoother on Firefox.
Try the demo, resize the output frame, and see how the shape and text always stay in the center.
JsFiddle Demo
.triangle {
text-align: center;
position: relative;
}
.triangle:before {
width: 0;
height: 0;
border-left: 300px outset transparent;
border-right: 300px outset transparent;
border-top: 45px solid #6699ff;
content: "";
display: inline-block;
position: absolute;
left: 50%;
margin-left: -300px;
}
.season {
position: absolute;
width: 100%;
text-align: center;
color: white;
margin: 10px 0;
}
<div class="triangle">
<p class="season">Hello World</p>
</div>
I actually googled and searched some info but couldn't find it.
My aim is to achieve something similar to progress bar styling such as filling inside of triangle. Is there any ways?
JSFiddle
.angle {
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 75px solid black;
}
In order to make the triangle, I would use two pseudo elements to 'cut it out' of the square div. Then, with a nested div, use absolute positioning to allow you to 'fill' it to a certain value (by setting the .amount div's height in %).
.amount {
position: absolute;
height: 0%;
width: 100%;
bottom: 0;
left: 0;
transition: all 1s;
background: tomato;
}
.tri {
position: relative;
height: 200px;
width: 200px;
background: lightgray;
}
.tri:before,
.tri:after {
content: "";
position: absolute;
border-top: 200px solid white;
top: 0;
z-index: 8;
}
.tri:before {
border-left: 100px solid transparent;
left: 50%;
}
.tri:after {
border-right: 100px solid transparent;
left: 0;
}
.tri:hover .amount {
height: 100%;
}
<div class="tri">
<div class="amount"></div>
</div>
May something like this?
.angle {
position: relative;
width: 0;
height: 0;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-bottom: 100px solid blue;
}
.angle:after {
position: absolute;
content: "";
top: 0;
left: 50%;
margin-left: -50px;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 50px solid black;
}
fiddle: http://jsfiddle.net/bkaxzLnu/3/
Here is another CSS ONLY, NO-BORDERS, NO AFTER/BEFORE HACKS option:
You could use clip-path. It allows you to show only part of an element and hide the rest.
So you could do something like this:
.amount {
position: absolute;
height: 100%;
width: 0%;
bottom: 0;
left: 0;
transition: all 1s;
background: tomato;
}
.tri {
position: relative;
width: 500px;
height: 50px;
background: #ddd;
/* triangle */
clip-path: polygon( 100% 0%,100% 100%, 0% 100%);
}
.tri:hover .amount {
width: 100%;
background: chartreuse ;
}
<div class="tri">
<div class="amount"></div>
</div>
Right, I ran into a bit of a problem and not to sure if this can be solved another way.
I need to move the content: "F"; and center it onto the border I have in the top left corner. Now is this possible without creating another element?
HTML:
<div class="userBoxF"></div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content: "F";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
The only way I can think to do it is to create the corner as a completely separate element so I can put the text "F" into a span (or something) and move it that way.
Demo Here
Note: Nothing here will change size, width and height for both the box and corner will always be the same.
Here is what I want, using the solution i found but would rather not use.
HTML:
<div class="userBoxF">
<div class="corner"><span>F</span></div>
</div>
CSS:
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF .corner {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
font-size: 30px;
}
.userBoxF .corner span {
display: block;
position: absolute;
top: -30px;
left: -20px;
}
Here is a demo of the solution I came up with but I would rather not create anymore elements.
My Solution
You can use :before wit :after together.
I removed the span:
<div class="userBoxF">
</div>
And changed the CSS blocks to this:
.userBoxF:before {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
content: "";
}
.userBoxF:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "F";
font-size: 30px;
}
And here's the updated fiddle
EDIT: Here's an added bonus!
You can jack the "F" from the class, if you want it to be more versatile, if you use CSS's attr inside content. Example:
<div class="userBox" data-l="F">
</div>
And:
.userBox:after {
display: block;
position: absolute;
top: 10px;
left: 14px;
content: "" attr(data-l);
font-size: 30px;
}
And another fiddle
Arguably the "F" is actual content as it's not a styling option...it actually denotes something and, perhaps should be read by a screenreader (for instance) then a span with a gradient (TL - BR) mightbe more appropriate.
JSFiddle Demo
HTML
<div class="userBoxF">
<span class="section-letter">F</span>
</div>
CSS
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.section-letter {
position: absolute;
top: 0;
left: 0;
width:2em;
height:2em;
line-height: 1em;
text-align: left;
padding:0.25em 0 0 0.25em;
font-size: 30px;
background: linear-gradient(135deg, pink 0%, pink 50%, transparent 50%, transparent 100%);
}
Simply use another :psuedo:
Demo Fiddle
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:before,.userBoxF:after{
position: absolute;
top: 0;
left: 0;
}
.userBoxF:before {
content:"";
border: 40px solid #F385FF;
border-right-color: transparent;
border-bottom-color: transparent;
}
.userBoxF:after {
content:attr(data-l);
top: 10px;
left: 10px;
font-size: 30px;
}
From a single pseudo, you can use a gradient as background : DEMO
.userBoxF {
width: 200px;
height: 200px;
background: #eee;
border: 1px solid;
border-radius: 10px;
position: relative;
overflow: hidden;
}
.userBoxF:after {
content:"F";
position: absolute;
top: 0;
left: 0;
text-indent:20px;
line-height:60px;
width:80px;
height:80px;
background:linear-gradient(to bottom right, #F385FF 51%, transparent 49%);
font-size: 30px;
}
background-image as gradient can be just an image like in old days :
DEMO: