So I was creating a design and when I tested it the border was a bit out on the left from the content. It didn't create a border right around the content inside, it created a bigger border.
HTML
<ul id="profile_stats">
<li class="top"><b>100</b><br /><i>short</i></li>
<li class="top"><b>100</b><br /><i>long</i></li>
<li class="top"><b>100</b><br /><i>images</i></li><br />
<li class="bottom"><b>10</b><br /><i>friends</i></li>
<li class="bottom"><b>10</b><br /><i>followers</i></li>
</ul>
CSS
ul#profile_stats {
float: right;
list-style-type: none;
border-radius: 5px;
margin-right: 10px;
border: 1px solid #222;
width: 180px;
}
ul#profile_stats li {
float: left;
padding: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul#profile_stats .top {
width: 60px;
background: #B0B0B0;
border-bottom: 1px solid #FFF;
}
.top:not(:nth-of-type(1)) {
border-left: 1px solid #FFF;
}
.top:not(:nth-of-type(3)) {
border-right: 1px solid #000;
}
ul#profile_stats .bottom {
width: 90px;
background: #555;
border-top: 1px solid #000;
}
JSFiddle: http://jsfiddle.net/rU8N9/8/
By default most browsers render ul with some left-side padding, I think that's what's interfering with your design, try:
ul {padding-left: 0;}
Hope it helps.
ul {padding: 0px 0px 0px 0px;}
Related
So, I want to have a simple menu with a border-right of 1 px black. And then, I want the active li to override the border-right to 1px white. My code works, except when I add an overflow-y: scroll to my fixed menu.
Here you can see what I mean, there's a fixed menu that's scrollable but the active styling doesn't take effect. If you comment the overflow-y line, you'll see the active styling does work then.
https://jsfiddle.net/6bd4b6ty/2/
.menu{
border-right: 1px solid black;
box-sizing: border-box;
width: 100px;
height: 200px;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll; /* comment this line */
}
ul{
list-style: none;
width: 100px;
margin: 0;
padding: 0;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a{
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
}
a.active{
border-right: 1px solid white;
}
<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>
Any ideas on how to solve this, obviously I want the menu to be scrollable at the same time that the active border works :P Thanks!
Don't fix width for the menu, set it to auto
See it working, I changed the active border-color to red for visiblility
.menu{
box-sizing: border-box;
width:auto;
height: 200px;
left: 0;
top: 0;
position: fixed;
/* overflow:visible; */
overflow-y: scroll; /* comment this line */
}
ul{
list-style: none;
width: 100px;
margin: 0;
padding: 0;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a{
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
border-right: 1px solid black;
}
a.active{
border-right: 1px solid red;
}
<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>
Using :after selector you can achieve this
.menu{
box-sizing: border-box;
width: auto;
height: 200px;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll; /* comment this line */
}
.menu:after{
content:"";
position:absolute;
width:1px;
height:123%;
background:#000;
right: 0;
top: 0;
z-index: 0;
}
ul{
list-style: none;
width: 100px;
margin: 0;
padding: 0;
position: relative;
z-index:1;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a{
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
// border-right: 1px solid black;
}
a.active{
border-right: 1px solid red;
}
<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>
Please change the code as shown below. My edits are commented. The explanation is below the code snippet.
.menu{
/*border-right: 1px solid black;*/ /* I deleted this line*/
box-sizing: border-box;
width: 100px;
height: 200px;
left: 0;
top: 0;
position: fixed;
overflow-y: scroll;
}
ul{
list-style: none;
width: 100%; /* Changed from px to % */
margin: 0;
padding: 0;
}
li{
height: 40px;
border-bottom: 1px solid black;
width: 100%; /* Changed from px to % */
}
a{
border-right: 1px solid black; /* I added this*/
height: 40px;
width: 100%; /* Changed from px to % */
display: block;
box-sizing: border-box;
}
a.active{
border-right: 1px solid white;
}
<div class="menu">
<ul>
<li><a class="active">potato</a></li>
<li><a>cheese</a></li>
<li><a>tomato</a></li>
<li><a>cucumber</a></li>
<li><a>carrot</a></li>
<li><a>garlic</a></li>
</ul>
</div>
CHANGES
First Change
Remove the border-right from .menu class. And add the same border-right to a tag.
Second Change
In three places, the px is changed to %.
EXPLANATION
For First Change
The .main has width of 100px. When the horizontal scrollbar appears the width of .main will be 100px including the scrollbar. That is the reason the border-right comes after the scrollbar.
To eliminate this, remove the border-right from .main and add the border-right to a tag.
For Second Change
The reason for the appearing of vertical scrollbar, even though the width of all the child element is same, is as follows:
Since the horizontal scrollbar is appeared some content of the child is gone under that horizontal scrollbar. To view these contents, a vertical scrollbar is required.
By making the px to %, the remaining width (i.e. width of .main minus horizontal scrollbar width) will be considered as 100%, thus we can eliminate this problem.
The border appearing after scrollbar is a strange behavior.
But if you want a work-around to get the final output. Check the shared code snippet below.
* {
box-sizing: border-box;
/* browser reset code */
}
.menu {
width: 100px;
height: calc(40px * 6);
/* actual height of UL */
padding: 0;
border-right: 1px solid red;
margin: 0;
list-style: none;
}
.grand-parent {
width: 100px;
overflow: hidden;
height: 200px;
position: fixed;
left: 0;
top: 0;
}
.parent {
overflow-y: scroll;
height: 200px;
width: 125px;
/* width + approx scrollbar width */
}
li {
height: 40px;
border-bottom: 1px solid black;
width: 100px;
}
a {
height: 40px;
width: 100px;
display: block;
box-sizing: border-box;
}
a.active {
border-right: 1px solid white;
}
<div class="grand-parent">
<div class="parent">
<ul class="menu">
<li><a class="active">potato</a>
</li>
<li><a>cheese</a>
</li>
<li><a>tomato</a>
</li>
<li><a>cucumber</a>
</li>
<li><a>carrot</a>
</li>
<li><a>garlic</a>
</li>
</ul>
</div>
</div>
Working Demo !!!
Remove border style in menu and add into li elements.
li{
border-right: 2px solid blue;
height: 40px;
border-bottom: 1px solid white;
width: 100px;
}
li .active{
border-right: 2px solid white!important;
/* border-right: 2px inset #fff!important; */
}
I am having a problem. My bottom border is "overlapping" my right border on the same element.
This is how it looks like: http://awesomescreenshot.com/0311z2fy84
As you can see, the green right borders bottom, is looking messed up, because of the bottom gray border. How can I fix this?
This is the css:
.side-menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.side-menu li{
border-bottom: 1px solid #E6E7E9;
padding: 7px;
padding-left: 0px !important;
width: 192px;
}
.side-menu li.active{
color: #CACDD0;
border-right: 6px solid #2CC588;
width: 199px;
}
Edit: Added jsFiddle: http://jsfiddle.net/wu958/
I assume the <li> elements will have an <a> link inside?
You could add the border right to the <a> elements like so:
HTML
<li class="active">Banners</li>
CSS
.side-menu li a {
padding: 7px;
display: block;
}
.side-menu li.active a {
border-right: 6px solid #2CC588;
}
Refer to this JsFiddle which shows a better working example.
try this:
.side-menu{
list-style-type: none;
margin: 0px;
padding: 0px;
}
.side-menu li{
border-bottom: 1px solid #E6E7E9;
padding: 7px;
padding-left: 0px !important;
width: 192px;
}
.side-menu li.active {
color: #a2a7ad;
border-right: 6px solid #2CC588;
width: 204px;
}
I simply changed the width of the class. "side-menu li.active" and seems to work.
You can use the ::after pseudo-element to avoid this kind of problems :
.side-menu li{
line-height: 35px;
padding-left: 18px !important;
width: 210px;
color: #37434f;
}
.side-menu li::after {
content: ' ';
display: block;
border-bottom: 1px solid #E6E7E9;
}
Update JSFiddle
Ok so, I'm trying to replicate the effect you see here at the bottom of the page, with the back to top button: http://www.ppp-templates.de/tilability/ - After the content area for We stay connected.
basically he's using a background image for that and I'd like to replicate it with CSS and keep the same effect.
I know how to create triangles with CSS with borders, but in my case I'd like to use the transparent bg image and not a color so I can't use borders
I removed the background image and used #FFF on the whole div, so it's all white now... I created a new div in which I added the back to top button and added background: transparent to it so it's transparent, but how do I create the triangle via CSS?
Any help is greatly appreciated.
The Fiddle:
http://jsfiddle.net/JaMH9/2/
The HTML:
<div class="bar">
<span class="home">^<br>Home, sweet home!</span>
</div>
The CSS:
.bar {
position: relative;
width: 90%;
height: 30px;
margin: 0 auto;
}
.home {
position: absolute;
top: 0px;
left: 60%;
width: 20%;
text-align: center;
}
.bar:before, .bar:after {
content:'';
position: absolute;
top: 0;
height: 0;
border-top: 30px solid white;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.bar:before {
left: 0;
width: 70%;
border-right: 30px solid transparent;
}
.bar:after {
right:0;
width: 30%;
border-left: 30px solid transparent;
}
Here's one way to make a triangle with fairly minimal markup and css:
HTML:
<div class="triangle"></div>
CSS:
.triangle {
width: 0;
height: 0;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
border-bottom: 35px solid gray;
}
http://jsbin.com/iribib/21
Here you go, http://jsfiddle.net/pkUx7/1/
HTML
<body>
<div id = "footer"></div>
<div id = "bottom-line-left"></div>
<div id = "triangle"></div>
<div id = "bottom-line-right"></div>
</body>
CSS
body {
background-color: purple;
}
div {
margin:0;
padding:0;
background-color: violet;
}
#footer {
height: 100px;
}
#bottom-line-left, #bottom-line-right {
display: inline-block;
height: 20px;
}
#bottom-line-left {
width: 61%;
}
#bottom-line-right {
float: right;
width: 37%;
}
#triangle {
margin-left:-6px;
margin-right: -4px;
padding:0;
display: inline-block;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid purple;
}
I just threw this together, there's probably a better way to achieve this effect.
HTML
<div class="div1">Lorem Ipsum</div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
CSS
body {
background-color: gray;
border: 20px solid gray;
}
.div1 {
background-color: white;
border: 20px solid white;
}
.div2 {
float: right;
border-top: 20px solid white;
border-right: 20px solid white;
border-left: 20px solid transparent;
}
.div3 {
float: right;
margin: 10px -20px;
border-bottom: 20px solid white;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
}
.div4 {
border-top: 20px solid white;
border-right: 20px solid transparent;
margin-right: 40px;
}
See it here.
You can use vector path.
For instance, transparent triangle with green border:
<svg height="151" width="150">
<path d="m0 150 h150 l -75 -150 z" fill="transparent" stroke="green" />
</svg>
See it here.
I have a vertical menu having an item "Click here to get the scientific name".
on hover it is showing like
I need to get the overflow part after the black background image to be in the next line(i cannot increase the image width at all.). How can I write the style for that.
css:
on hover
{
display: block;
background: url('/../.png') no-repeat 0px 2px #2F2F31;
text-decoration: none;
color:..;
}
This is coming under
<td>
<div id="first">
<ul id="second">
<li>Click here to get the scientific name
And css:
#first {
display: block;
width: 180px;
min-height: 50px;
float: left;
}
ul#second {
display: block;
clear: both;
margin: 50px 0px 12px 0px;
border-bottom: 1px solid
#C8C8C8;
}
ul#second li {
border-top: 1px solid
#C8C8C8;
padding: 0px;
display: block;
}
ul#second li a {
color:
#004C8E;
margin: 4px 0px 4px 0px;
padding: 4px 0px 4px 12px;
display: block;
text-decoration: none;
font-size: 12px;
background: url('/../.png') no-repeat 0px 2px;
}
td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background:
transparent;
}
On hover, you should explicitly set the width of the element to equal the width of the image.
FOr this you can use word-wrap:break-word;. Write like this:
p{
word-wrap:break-word;
}
I'm building a fairly interestingly shaped navigation for a site at the moment. The shape each menu item needs to be is illustrated below:
The final nav will look like an extended version of this:
I thought it would be an interesting experiment to do these shapes in CSS. The CSS and HTML for one of the arrow shapes is here:
.arrowEndOn {
font-size: 10px; line-height: 0%; width: 0px;
border-top: 11px solid #FFFFFF;
border-bottom: 11px solid #FFFFFF;
border-left: 5px solid transparent;
border-right: 5px solid #FFFFFF;
float: left;
cursor: pointer;
}
.arrowBulkOn {
height: 20px;
background: #FFFFFF;
padding: 2px 5px 0px 0px;
float: left;
color: #000000;
line-height: 14pt;
cursor: pointer;
}
.arrowStartOn {
font-size: 0px; line-height: 0%; width: 0px;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 5px solid #FFFFFF;
border-right: 0px solid transparent;
float: left;
cursor: pointer;
}
<div id="nav" class="navArrow" style="position: relative;">
<div class="arrowEndOn" id="nav"> </div>
<div class="arrowBulkOn" id="nav">NAV</div>
<div class="arrowStartOn" id="nav"> </div>
</div>
Each nav item has a negative offset applied to it (which I've left out of the demo) as it's rendered to get them all flush with each other.
I'm handling the rollovers and on states with Javascript.
My problem is getting the nav to stretch all the way across the width of the page. At the moment I have to set the nav container to a much larger width to accommodate it all.
I've tried setting overflow to hidden but the last item is dropping down a level rather than carrying on and just having the end cut off.
I've set an example up here - http://jsfiddle.net/spacebeers/S7hzu/1/
The red border has overflow: hidden; and the blue doesn't.]
My question is: How can I get the boxes to all float in a line that fills the width of the containing div without them dropping down a level.
Thanks
Add a negative margin to each arrow:
.navArrow {
float: left;
margin-left: -8px;
}
Demo: http://jsfiddle.net/S7hzu/2/
Flexbox
You can use this example
https://codepen.io/WBear/pen/pPYrwo
it works on new browsers, to support old ones some changes needed.
HTML:
<div class="content">
<div class="as1">
NAV
</div>
<div class="as2">
NAV
</div>
<div class="as3">
NAV
</div>
</div>
CSS:
.content {
margin-top: 10px;
width: 100%;
display: inline-flex;
}
.as1, .as2, .as3 {
height: 70px;
min-width: 8%;
max-width: 100%;
background-color: black;
position: relative;
display: inline-flex;
text-align: center;
flex-wrap: wrap;
flex-grow: 1;
}
.as1 a, .as2 a, .as3 a {
text-decoration: none;
display: inline-flex;
color: white;
margin: auto;
font-size: 14pt;
}
.as1:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid black;
border-bottom: 35px solid transparent;
z-index: 2;
}
.as2 {
background-color: grey;
margin-left: -29px;
}
.as2:after {
content: "";
position: absolute;
right: 4px;
border-top: 35px solid transparent;
border-left: 25px solid grey;
border-bottom: 35px solid transparent;
z-index: 3;
}
.as3 {
background-color: #A9A9A9;
margin-left: -29px;
}