So basically I'm creating a navigation bar (seen below) and I want to know if it's possible to create an upward ribbon type of thing.
Ignore the badly designed rest of the navigation, but I simply want the right part, the upward ribbon. Is it possible to do so, and preferably without images? I'm fine working with them, but I prefer it without.
Any help would gladly be appreciated, and thank you in advance.
Try something like this. It is pure HTML and CSS, and you can change the bar and ribbon height.
Fiddle
HTML
<div id='wrapper'>
<div id='bar'>This is the bar</div>
<div id='corner'><div id='ribbon'></div></div>
</div>
CSS (I have explained how I got all the numbers in /* comments */)
#bar {
background-color: blue;
color: white;
width: 70%;
float: left;
height: 30px; /* bar height */
}
#corner {
width: 0;
height: 0;
border-top: 30px solid blue; /* bar height */
border-right: 30px solid transparent; /* bar height */
float: left;
}
#ribbon {
height: 10px; /* ribbon height */
margin-top: -40px; /* bar height + ribbon height */
background-color: green;
width: 30px; /* bar height */
}
#wrapper {
margin-top: 20px; /* ribbon height + 10px padding */
}
Related
I want to have three different kind of scrollbar whose padding & margins are different.
Below is global style for my scrollbar:
/*
Modifying the scroll bar across the whole application
*/
/* width */
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
/* Track */
::-webkit-scrollbar-track {
border-radius: 10px;
width: 5px;
height: 5px;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #999999 !important;
border-radius: 10px;
}
::-webkit-scrollbar-track {
background: #d1d1d1 !important;
border: 1px solid #ebebeb !important;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: #b30000;
}
Now I want to have scroll bars with different padding & margin using classname or id. I don't want scrollbar padding and margin to effect padding & margin of content present in scrollbar. How can I write css in this manner which will put different padding for each scrollbar.
You can select that element the same way you selecting elements with css.
Select the container div and add your rules like this
<div class="container">
<div class="innerdiv"></div>
</div>
.container {
height: 300px;
width: 300px;
overflow-y: scroll;
}
.container .innerdiv {
height: 600px;
background:blue;
}
.container::-webkit-scrollbar {
width: 3px;
}
.container::-webkit-scrollbar-thumb {
background: black;
}
.container::-webkit-scrollbar-track {
background: red;
}
here is a working example -> https://jsfiddle.net/2fzpoycv/
Look Here is an Example
and its also here
read this URL may b this solve your query https://css-tricks.com/almanac/properties/s/scroll-padding/
I have the following code:
/* css */
.phone {
height: 100%;
width: 40%;
overflow: hidden;
padding: 0;
border-radius: 3%;
border: 2px solid red;
}
.phone .screen {
height: 50%;
overflow-y: auto;
background-color: #c3cee0;
}
.phone .nav {
background-color: black;
overflow: hidden;
color: white;
}
<!-- HTML -->
<div class="phone">
<div class="screen">
<p>Lorem Ipsum...</p>
...
<p>Lorem Ipsum...</p>
</div>
<div class="nav">
<p>Back</p>
<p>Home</p>
<p>Menu</p>
</div>
</div>
I want the phone to be responsive but in order to enable the scroll in the div.screen I need to set the height of the div.phone. The problem is that the red border is going beyond the phone's content.
I'd like the border to finish where the div.nav ends but I'm getting unwanted extra space. See this live demostration.
TL;DR
Live demostration.
I need to set a height (for div.phone) in order to enable the scroll for the text messages but then I get that extra space shown by the red border. How can I make div.phone (red border) be the same height of the whole content (without the extra space)?
Set height using calc().
.phone .screen{
height: calc(100% - 33px);
}
33px is the height of bottom nav.
Here is solution you need to remove height:100% prperty from .phone and define height in px in .phone .screen so it will work fine
Here is updated css
.phone {
height:auto;
}
.phone .screen {
height: 400px;
overflow-y: auto;
background-color: #c3cee0;
}
And here is live demo
I fixed the issue by using display: flex. Live demonstration.
Basically
.phone {
height: 50%; /* whatever height you need */
display: flex;
flex-direction: column; /* used to separate the divs vertically */
/* instead of horizontally */
border-radius: 3%;
border: 2px solid red;
}
.phone .screen {
flex: 9; /* screen will take 9/10 spaces from the div.phone */
overflow-y: auto; /* enables scroll */
}
.phone .nav {
flex: 1; /* nav will take 1/10 spaces from the div.phone */
}
I'm trying to make a simple menu for my home server web platform for multiple screen resolutions.
Complete Example
#menu-area{
position: absolute;
text-align:center;
margin-left: 15%;
margin-right: 15%;
width: 70%;
min-height: 50px;
}
.menu-box{
display:inline-block;
height: 50px;
width: 150px;
font-size: 25px;
line-height: 50px;
text-align:center;
}
My idea was that, as the screen gets narrow , the menu links rearrange themselves, and transform from a line to a column. That part works as intended.
However when the menu gets more than 2 lines long vertically, it starts to overleap with the content display area.
I can't figure out, how to strech the div containing the menu-box -es to contain them, so the content area can get pushed down and not overleap with the menu.
P.S.: If possible I only want to use html and css for this layout.
If you comment out these lines in CSS - it works:
#head {
/* min-height: 200px; */
/* height: 15%; */
#menu {
/* height: 50px; */
#menu-area {
/* position: absolute; */
/* min-height: 50px; */
I am trying to display a progress bar that displays a percentage over 100% in a different color to give an idea that an over-achievement has occurred. How can this be done in HTML/CSS?
The following works well for a progress bar that will display a percentage up to 100%
<div id="progressbar">
<div></div>
</div>
#progressbar {
background-color: black;
border-radius: 13px; /* (height of inner div) / 2 + padding */
padding: 3px;
}
#progressbar div {
background-color: orange;
width: 40%; /* Adjust with JavaScript */
height: 20px;
border-radius: 10px;
}
Thanks!
http://jsfiddle.net/qTmGE/1/
Pardon my usage of jQuery.
Pure CSS PROGRESS BAR -- FIDDLE
I think this problem is best explained by images. This is how my accordion looks:
When you click on the small plus/minus icons the slides under each chapter will expand/collapse. However when the content in the accordion grows too tall, it grows out from its container. So if I click on more plus icons the accordion will look like this (not pretty):
As you can see, the container is not growing taller together with the accordion and it does not look good.
This problem only occurs in IE7 and IE8. It works in Firefox and Chrome.
The HTML looks like this (simplified):
<div id="content">
<div class="box2 rounded-corners">
<div class="chapters">
<h3>Obsah</h3>
<div id="accordion">
<ul>
... // accordion content - too long
... // accordion content - too long
</ul>
<div class="clear"> </div>
</div>
<div class="clear"> </div>
</div>
<div class="training-body">
... // content to the right of the accordion
</div>
</div>
</div>
The CSS, again siplified:
html, body {
height: 100%;
width: 100%;
overflow: auto;
}
#content {
background: white url('/images/background_middle.png') left top repeat-x;
padding: 13px;
min-height: 40em;
height: auto !important;
height: 40em;
}
/* this is the div with rounded corners */
#content .box2 {
background: white;
padding: 0 15px 15px;
border: 1px solid #C5E3F8;
position: relative;
}
/* left sidebar 98
#content div.chapters {
float: left;
width: 224px;
}
/* orange heading "OBSAH" */
#content div.chapters h3 {
color: #ff6e19;
text-transform: uppercase;
font-size: .9em;
text-align: center;
padding-bottom: .5em;
margin-top: 1em;
margin-bottom: 0;
}
#content div.chapters h3 a {
color: #ff6e19;
}
/* accordion */
#accordion {
width: 226px;
border-top: 1px solid #c5e3f8;
}
#accordion ul {
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
}
/* area to the right of the accordion */
#content div.training-body {
float: left;
padding-left: 0px;
width: 748px;
line-height: 1.3em;
}
Hmmm, after a lot of research, it turned out that the curvycorners plugin is causing the problem, here's what you have to do:
Download the latest version of the plugin (also try to upgrade your jQuery, but this is only a tip)
change your rounded-corners CSS to the following:
.rounded-corners {
-moz-border-radius:2ex;
-webkit-border-radius:2ex;
}
in your JS and after toggleing the ULs, you need to redraw the corners, refer, using the following:
$this.parent().parent().children('ul').toggle();
curvyCorners.redraw();
EDIT sorry, my first answer was incorrect
The problem is with the min-height you set. IE 7 and 8 support min-height, but incorrectly handle !important, not giving it priority over the the next declaration. To solve just remove the two height lines. If you want to support IE6 add the height rule like the following
...
min-height: 40em;
}
* html #content {
height: 40em;
}