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
}
Related
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/
I am having trouble centering my navigation bar.
This is the example nav bar I am working with
<style>
/* Begin Navigation Bar Styling */
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc; }
#nav li {
float: left; }
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li a:hover {
color: #c00;
background-color: #fff; }
/* End navigation bar styling. */
</style>
but as seen, the navigation bar is not centered.
I have tried using auto margins but it doesn't work. How do I go about fixing this?
Add text-align:center; to #nav
Remove float:left; and add display: inline-block; to #nav li
Change to this:
#nav {
width: 100%;
float: left;
margin: 0 0 3em 0;
padding: 0;
list-style: none;
text-align:center;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
border-top: 1px solid #ccc;
}
#nav li {
display: inline-block;
}
JSFiddle Demo
display: inline-block;
This should center the navigation bar
try this new css:
#nav {
margin: 0 0 3em 0;
padding: 0;
list-style: none;
background-color: #f2f2f2;
border-bottom: 1px solid #ccc;
position: relative;
border-top: 1px solid #ccc; }
#nav li {
display: inline-block;}
#wrap {
width: 750px;
margin: 0 auto;
background-color: #fff;
text-align: center;
width:100%;}
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;*/
}
I have this css for my horizontal menu:
when you hover over the links and a sub menu appears, it shows the sub menu but the page content below moves down slightly.
any ideas?
fiddle here: http://jsfiddle.net/XwDTt/1/
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
}
nav ul ul {
border-radius: 0px;
padding: 0;
position: absolute;
}
nav ul ul li {
float: none;
position: relative;
}
nav ul ul li a {
color: #000000;
}
nav ul ul li a:hover {
color: #666666;
}
nav ul ul ul {
position: absolute;
top:0;
}
change this:
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
into this :
nav ul li:hover a {
color: #000000;
margin-bottom:5px;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
position:relative;
top:-1px;
}
i think this one is the simplest
nav {
margin: 0 auto;
text-align: center;
height:30px; /* add height to your nav tag */
}
There are two points here:
When you add a border to an element, it often increases the height of the element. You could use a transparent border by default.
Instead of setting a margin property on anchor tags, you could use the property on the sub-menu list-items, which are positioned absolute and doesn't affect the document normal flow.
Use the following:
nav ul li:hover a {
color: #000000;
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;
}
nav ul li:hover li {
margin-top: 5px; /* <-- add margin to sub-menu items */
}
nav ul li a {
display: block;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid transparent; /* <-- Set a transparent border */
border-bottom: 1px solid transparent; /* <-- Set a transparent border */
}
JSFiddle Demo
You are adding border on hover. You should have transparent borders by default...
And margin too.
nav ul li a {
display: block;
margin-bottom:5px;
padding: 5px 15px;
color: #000000;
text-decoration: none;
background-color: #eeeeee;
border-top: 1px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
}
http://jsfiddle.net/XwDTt/3/
Or you can just set the height of li elements:
nav ul li {
float: left;
margin: 0;
padding: 0;
height:30px;
}
Solution 1:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment these
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;*/
}
Solution 2:
nav ul li:hover a {
color: #000000;
/*margin-bottom:5px comment this line only */
border-top: 1px solid #000000;
border-bottom: 1px solid #000000;;
}
and add this line:
nav ul li a {
margin-bottom:5px;
border-top:1px solid #fff;
border-bottom:1px solid #fff;
}
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?