I cannot figure this out.
I want the colored border to overlap the grey border. However, the border refuses to overlap the bottom border.
Here's a picture:
http://gyazo.com/bc4cbaab9bfa3a173709309ad64f880e.png
The code for the borders is:
<li>
<div class="content blue-border">
<span class="icon-uniE601"></span>
</div>
</li>
.sidebar ul li {
background-color: #f2f2ea;
border-right: 1px solid #dfdfd7;
border-top: 1px solid #dfdfd7;
}
.content
{
border-left: solid 5px #0094ff;
width:100%;
height:100%;
}
.content span
{
height: 70px;
text-align: center;
line-height: 70px;
font-size: 2em;
color: #787878;
}
.sidebar ul li:hover
{
background-color: black;
}
.sidebar ul li:first-child
{
border-top: none;
}
ul li
{
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
.blue-border
{
border-left: solid 5px #0094ff;
}
.orange-border
{
border-left: solid 5px #ff6a00;
}
And here's the code:
http://jsfiddle.net/bG8Wb/2/
Thanks in advance!
You can try this
element_that_needs_to_shift {
position:relative;
top:1px;
}
...
Is this what you wanted?
.sidebar ul li {
background-color: #f2f2ea;
border-right: 1px solid #dfdfd7;
/*border-top: 1px solid #dfdfd7;*/
}
Related
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
Fiddle here
I'm trying to set the border color of some irregular shapes (arrowish) I did. The problem is that to achieve those shapes I had to manipulate the borders already so I can't just do border-color: red;
I want to set the color of the borders of each shape 2px
HTML:
<div class="menuTop">
<ul>
<li><div>HOME</div></li>
<li><div>Location</div></li>
<li><div><span>Sub-Location<span></div></li>
</ul>
</div>
CSS:
.menuTop {
background-color: lightgreen;
height: 80px;
margin: auto;
position: absolute;
top: 0;
width: 100%
}
.menuTop ul {
list-style-type: none;
}
.menuTop li {
font-size: 0;
display: inline-block;
}
.menuTop li:before,
.menuTop li:after {
content:'';
display: inline-block;
width:0;
height:0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
vertical-align: middle;
}
.menuTop li:before {
border-top-color: #fff;
border-bottom-color: #fff;
border-right-color: #fff;
}
.menuTop li:first-of-type:before {
border:0;
}
.menuTop li:first-of-type {
border-left: 2px solid #dfdfdf;
}
.menuTop li:after {
border-left-color: #fff;
}
.menuTop li:last-of-type:after {
border:0;
}
.menuTop li:last-of-type {
border-right: 2px solid #F37C31;
border-bottom: 2px solid #F37C31;
border-top: 2px solid #F37C31;
}
.menuTop li div {
width: 185px;
height:40px;
display: inline-block;
background: #fff;
text-align:center;
position: relative;
line-height:40px;
vertical-align: middle;
}
.menuTop li div a, span {
text-decoration: none;
color: #bbb;
font-family: 'open sans', sans-serif;
font-weight: 400;
font-size: 13px;
}
.menuTop li div a:hover {
text-decoration: underline;
color: #000;
}
.menuTop li div span {
color: #000;
font-weight: bold;
}
CSS solution with rectangles
Here is an example that does not use triangles, but instead uses rotated rectangle.
Explanation:
First the before and after create a rotated rectangle.
Give the before rectangle the same color as the background.
After element gets the same color as the arrow.
Then we can apply borders to rectangles to give the perfect illusion of the elements having the border.
body {
background-color: #555;
}
.menu {
display: inline-block;
margin: 0;
padding: 0;
}
.menu .arrow {
position: relative;
display: inline-block;
list-style: none;
font-size: 2em;
width: 150px;
height: 70px;
background-color: white;
margin-right: 90px;
border-top: 2px solid red;
border-bottom: 2px solid red;
}
.arrow:first-of-type {
border-left: 2px solid red;
}
.arrow::after {
position: absolute;
top: 9px;
right: -25px;
content: "";
height: 50px;
width: 50px;
background-color: white;
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow::before {
content: "";
position: absolute;
top: 9px;
left: -25px;
height: 50px;
width: 50px;
background-color: #555; /*Needs to match body backgrond-color*/
transform: rotate(45deg);
border-right: 2px solid red;
border-top: 2px solid red;
}
.arrow:first-of-type::before {
content: none;
}
.arrow span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<ul class="menu">
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
<li class="arrow"><span>Text</span>
</li>
</ul>
I've been following this tutorial:
http://www.mrc-productivity.com/techblog/?p=1049
I want to make a single item in the navigation bar float to the right, but simply adding float:right; to that particular item didn't do anything. In fact, changing the float:left to float:right only reversed the ordering of the navigation bar items.
Here's a snippet:
#CHARSET "UTF-8";
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
width: 100%;
height: 50px;
margin: 0;
z-index: 99;
position: relative;
background-color: #366b82;
}
.navbar {
height: 50px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
.navbar li {
height: auto;
width: 150px;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #366b82;
}
#navright {
float: right;
}
.navbar a {
padding: 18px 0;
border-left: 1px solid #54879d;
border-right: 1px solid #1f5065;
text-decoration: none;
color: white;
display: block;
}
.navbar li:hover, a:hover {
background-color: #54879d;
}
.navbar li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.navbar li:hover ul {
display: block;
}
.navbar li ul li {
background-color: #54879d;
}
.navbar li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.navbar li ul li a:hover {
background-color: #366b82;
}
<body>
<div id="wrap">
<ul class="navbar">
<li>Home</li>
<li>Registers
<ul>
<li>People</li>
</ul>
</li>
<li>Operational</li>
<li>Financial</li>
<li>Reports</li>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
</ul>
</div>
</body>
<li id="navright"><a id="logout" href="/login">Logout</a></li>
Just need to get that "Logout" button to be on the right.
Make the containing UL element have a width of 100%
.navbar {
height: 50px;
width: 100%;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #54879d;
}
https://jsfiddle.net/txve55jn/2/
I'm having some trouble with CSS (to which I am fairly new) - hoping someone can give some advice after my various internet searches have proven fruitless.
My problem is that I have CSS Menu and I have recently changed the width of the main menu element but am stuggling to resize the drop-down child elements to reflect this new size - the sub-menu items are now also appearing next to each other rather than beneath each other.
Any help is appreciated!
JSFiddle: https://jsfiddle.net/anwwgyu8/
CSS:
#wrap2 {
width: 70%;
height: 75px;
margin: 0;
position: absolute;
top: 2190px;
background-color: #2A79BF;
left: 15%;
}
.buttonbar1 {
height: 75px;
padding: 0;
margin: 0;
position: absolute;
border-right: 1px solid #2A79BF;
left: 0%;
width: 100%;
}
.buttonbar1 li {
height: 75px;
width: 25%;
float: left;
text-align: center;
list-style: none;
font: normal bold 12px/1.2em Arial, Verdana, Helvetica;
padding: 0;
margin: 0;
background-color: #2A79BF;
}
.buttonbar1 a {
padding: 25px 0;
border-left: 1px solid #FFFFFF;
border-right: 1px solid #FFFFFF;
text-decoration: none;
color: white;
height: 25px;
display: block;
}
.buttonbar1 a:hover {
color: #E0F0FFC
}
.buttonbar1 li ul {
display: none;
height: auto;
margin: 0;
padding: 0;
}
.buttonbar1 li:hover ul {
display: block;
color: #E0F0FF
}
.buttonbar1 li ul li {
background-color: #2A79BF;
color: #E0F0FF
}
.buttonbar1 li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.buttonbar1 li ul li a {
border-left: 1px solid #1f5065;
border-right: 1px solid #1f5065;
border-top: 1px solid #74a3b7;
border-bottom: 1px solid #1f5065;
}
.buttonbar1 li ul li a:hover {
background-color: #2A79BF;
color: #E0F0FF
}
Float is inherited on submenu items. You should clear your float for submenu:
.buttonbar1 li ul li {
/* ... */
float: none;
width: 100%;
}
https://jsfiddle.net/anwwgyu8/11/
Your float and width properities are being carried down to your sub menu list items. Add the following CSS:
.buttonbar1 li ul li {
display:block;
float:none;
width:100%;
}
.buttonbar1 li ul li{
width:100%;
}
Fiddle: https://jsfiddle.net/anwwgyu8/6/
need help with css codes for a border above and below the header like this website : http://www.simpsonmagazine.cc/ . I also want to change the slider height for my site : http://www.etctaylors.com/
CSS codes used so far :
/*
Theme Name: Sight Child
Theme URI: http://example.com/twenty-fourteen-child/
Description: Twenty Fourteen Child Theme
Author: John Doe
Author URI: http://example.com
Template: Sight
Version: 1.0.0
Tags: light, dark, two-columns, right-sidebar, responsive-layout,
accessibility-ready
Text Domain: sight-child
*/
/* =Theme customization starts here
-------------------------------------------------------------- */
.main-navigation {
border-bottom: solid;
border-color: black;
border-width: 3px;
}
.main-navigation li {
text-indent: 5px;
}
.main-navigation ul {
margin-left: auto;
margin-right: auto;
width: 100%;
}
.main-navigation li {
border: none;
}
.main-navigation {
margin-left: 0;
margin-right: 0;
width: 100%;
}
.main-navigation li:hover > a, .main-navigation ul ul :hover > a,
.main-navigation ul ul a:hover {
color: black !important;
text-decoration: none;
}
.main-navigation ul ul, .main-navigation ul li:hover {
background: none;
}
.main-navigation ul ul {
background: none;
}
.main-navigation ul ul a {
color: grey;
}
Try this it will work, I tried it on firebug
.site-header{
border-bottom: 1px solid #000;
border-top: 1px solid #000000;
height: 240px;
padding: 3px 0 3px 0;
position: relative;
}
.site-header:before {
content: '';
border-top: 5px solid #000;
width:100%;
position: absolute;
left:0;
top: 1px;
}
.site-header:after {
content: '';
border-top: 5px solid #000;
position:absolute;
width:100%;
left:0;
bottom:1px;
}
To add a border to your navigation, you can use the following css line:
border-top: 3px solid black;
what do you mean with slider height change?
Here is a Jsfiddle i made
use this for border like the mentioned site to your header css
markup
<div id="top">
<div id="hwrap">
</div>
</div>
you should include your header contents inside hwrap div
css
#top {
width: 940px;
float: left;
border-bottom: 5px solid #222;
border-top: 5px solid #222;
padding-top: 1px;
margin-bottom: 20px;
padding-bottom: 1px;
}
#hwrap {
width: 940px;
float: left;
border-bottom: 1px solid #222;
border-top: 1px solid #222;
padding-top: 20px;
margin-bottom: 0px;
padding-bottom: 20px;
}
DEMO
for changing the slider height in your site
.featured-post {
background: #ffea97;
height:600px; // or your prefered vaklue
}