I tried to round the corners on this div box that I created and it doesn't work. Tested this out on Chrome, IE, Firefox and no go. I am not too fluent in CSS and DIV. So if you can see my problem, please help me.
Code CSS:
.side-nav-menu{
width: 100%;
border-radius: 10px;
}
.side-nav-menu h1{
font-size: 1.1em;
font-weight:bold;
color: white;
background: #3F5671;
margin-bottom: 0;
padding: 7px 0 7px 7px;
}
.side-nav-menu ul{
list-style-type: none;
margin: 0;
padding: 0;
border-left: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
margin-bottom: 0;
}
.side-nav-menu ul li{
padding-bottom: 0px;
border-bottom: 1px solid #c0c0c0;/
}
.side-nav-menu ul li a{
font-size: normal 1.1em;
font-weight:bold;
color: #777777;
background: #ffffff;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 7px;
text-decoration: none;
}
.side-nav-menu ul li a:hover{
color: #777777;
background: #F7F7F7;
}
HTML
<div class="side-nav-menu">
<h1>Sub-Categories</h1>
<ul>
<li>Air Sampling Pumps</li>
<li>Dust Monitors</li>
<li>Flame Ionization Detectors</li>
<li>Photoionization Detectors</li>
<li>Ventilation Blower</li>
</ul>
</div>
https://jsfiddle.net/pssz0xv0/
Child elements wont inherit round corners from their parents. You will have to apply a border radius to the top element 'h1' and bottom element, the last 'a'.
https://jsfiddle.net/pssz0xv0/5/
.side-nav-menu h1{
border-radius:10px 10px 0 0;
}
.side-nav-menu ul li:last-child a{
border-radius: 0 0 10px 10px;
}
border-radius: 10px
On .side-nav-menu ?
.side-nav-menu{
width: 100%;
border-radius: 10px;
overflow: hidden;
}
.side-nav-menu h1{
font-size: 1.1em;
font-weight:bold;
color: white;
background: #3F5671;
//margin-bottom: 0;
margin: 0;
padding: 7px 0 7px 7px;
}
https://jsfiddle.net/alireza_safian/pssz0xv0/9/
Related
I have been working on this game for a while and decided to change my navbars to just buttons and I'm having trouble finishing up matching my style i had.
old code fiddle : https://jsfiddle.net/tmanrocks999/L4hmpan1/38/
new code that i think is almost done : https://jsfiddle.net/tmanrocks999/yfcdqu5g/ ( can't get the last few things to work. not sure what the tab-container etc things need to say to make them work)
I basically want how my first fiddle looks on the 2nd one. its alot to post in here but i can post the css for both
old css:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
.nav_bar {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
.nav_bar ul {
padding: 0;
list-style: none;
}
.nav_bar ul li {
float: left;
font-size: 16px;
font-weight: bold;
margin-right: 5px;
}
.nav_bar ul li a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
-webkit-border-top-right-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
width: 75px;
display: block;
text-align: center;
}
.nav_bar ul li a:hover {
text-decoration: none;
color: #000000;
background: #96e0e9;
-moz-transition: background-color 200ms ease-in;
-webkit-transition: background-color 200ms ease-in;
-ms-transition: background-color 200ms ease-in;
-o-transition: background-color 200ms ease-in;
transition: background-color 200ms ease-in;
}
.nav_bar ul li a#onlink {
background: #ffffff;
color: #000000;
border-bottom: 1px solid #ffffff;
}
.nav_bar ul li a#onlink:hover {
background: #ffffff;
color: #000000;
}
.main_container {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
.main_container p {
font-size: 14px;
margin: 0;
padding: 0;
}
starting of the new css that i will use once done because it works with buttons:
body {
margin: auto;
background: #efefef;
font-family: arial;
}
/* remove border radius for the tab */
/* change border radius for the tab , apply corners on top*/
#exTab3 .nav-pills {
margin: auto;
border-bottom: 1px solid #000000;
width: 860px;
padding: 0 20px 0 20px;
height: 64px;
margin-top: 30px;
}
#exTab3 .nav-pills>li>a {
text-decoration: none;
color: #000000;
background: #6db1e4;
border: 1px solid #000000;
border-bottom: none;
padding: 23px 20px 22px 20px;
border-top-right-radius: 10px;
border-top-left-radius: 10px;
border-radius-topleft: 10px;
border-radius-topright: 10px;
width: 115px;
display: block;
text-align: center;
}
#exTab3 .tab-content {
margin: auto;
width: 860px;
padding: 20px;
border: 1px solid #000000;
min-height: 400px;
border-top: none;
background: #ffffff;
}
I expect my 2nd fiddle to match my first fiddle in css style. i figured out that navbars = a list of links so what i did find to work should work . Active tab should be white and other non active tabs blue. But my actual output is close to my old style but not exactly. If i could get some help with fixing my css id really appreciate it. been wanting this fix for a few months now.
You need to add below CSS to your code.
#exTab3 .nav-pills>li.active>a,
#exTab3 .nav-pills>li.active>a:hover,
#exTab3 .nav-pills>li.active>a:focus {
background-color: #fff !important;
}
I want to set equal margins between "Li" elements in the navigation.
right now there is slightly difference between the
margin left and right as shown in the pic below.
Here is a fiddle link
Here is the css:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
float: left;
}
.nav a {
background-color: white;
text-decoration: none;
display: block;
z-index: 9999;
padding-right: 5px;
padding-left: 5px;
}
.nav ul a {
/* border-right: 1px solid #333333; */
text-indent: 4px;
padding-left: 4px;
padding-top: 4px;
padding-bottom: 4px;
width: 6.5em;
line-height: 16pt;
}
.nav > ul > li > a {
width: 6em;
}
Remove the width on your <a> elements:
and add this:
.nav li {margin-right: 10px /* or whatever margin you want */}
.nav li:last-child {margin-right: 0}
.nav {
background-color: white;
width: 100%;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
font-size: 15px;
font-weight: normal;
}
.nav, .nav ul {
padding: 0;
margin: 0;
list-style: none;
line-height: 2.5;
/* font-size: 13px; */
z-index: 100;
}
.nav li {
display: inline;
margin: 0 10px;
}
.nav li a {
background-color: white;
text-decoration: none;
padding-right: 5px;
padding-left: 5px;
}
add the reset of the styling as you wish.
edit: use position and z-index only when it is necessary
fiddle
You could try adding word-spacing: 5px; in the nav class:
.nav {
background-color: white;
width: 100%;
min-height: 29px;
line-height: 26px;
border-top: solid 1px #999;
border-bottom: solid 2px #333333;
font-weight: bold;
position: relative;
border: none;
font-size: 15px;
font-weight: normal;
word-spacing: 5px;
}
Hope this helps.
for some reason I am having one heck of a time trying to figure out how to center this silly pricing table in my page using css. Each table has a width of 40%, I've already tried changing the left and right margin to auto using CSS but with no success.
Here is the HTML:
<div id="pricing-table" class="pricing-table">
<ul>
<li class="heading">Bronze</li>
<li class="price">£20</li>
<li>Starter package</li>
<li>15 Projects</li>
<li class="action">Buy Now</li>
</ul>
<ul class="feature">
<li class="heading">Silver</li>
<li class="price">£60</li>
<li>Intermediate package</li>
<li>20 Projects</li>
<li class="action">Buy Now</li>
</ul>
</div>
Here is the CSS:
.pricing-table ul{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin: 2px;
width: 40%;
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
.pricing-table ul:hover{
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 3px 5px 7px rgba(0,0,0,.7);
}
.pricing-table ul li{
padding: 10px;
background-color: #FFFFFF;
border-width: 0px;
border-style: dotted;
border-color: #CCCCCC;
border-radius: 4px;
border-bottom-width: 1px;
font-size: 15px;
}
.pricing-table li:first-child{
border-bottom: 0;
}
.pricing-table li:last-child{
border-bottom: 0;
}
.pricing-table li:nth-child(odd){
background-color: #FFFFFF;
}
.pricing-table ul .heading{
color: #FFFFFF;
background-color: #5091B2;
font-size: 30px;
}
.pricing-table ul .price{
color: #636363;
background-color: #FFFFFF;
font-size: 25px;
}
.pricing-table ul .action{
font-size: 20px;
background-color: #ffffff;
color: #6C9694;
}
.pricing-table .action a{
border-color: #CCCCCC;
border-width: 1px;
border-radius: 4px;
background-color: #E9F7FE;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 100px;
padding-right: 100px;
border-style: solid;
color: #5091B2;
}
I'd like to thank everyone in advance for any help you may provide.
And here's a fiddle for what I have so far.
The <ul> elements are floated to left. In order to align the items horizontally, you could set a proper width on .pricing-table then use margin: 0 auto;
Mind the margins. you have to include the margin of <ul> elements for calculating the width of the .pricing-table element.
However, to get rid of specifying an explicit width for .pricing-table, you could change the display type of the ul elements to inline-block and align the inline elements by using text-align: center; for their parent as follows:
.pricing-table {
text-align: center; /* <-- align the inline(-block) elements horizontally */
}
.pricing-table ul {
display: inline-block; /* <-- display the ul elements as inline-block */
vertical-align: top; /* <-- keep the inline(-block) elements at the top */
/* other styles here... */
}
Working Demo.
There's also a white space between inline-block elements, you might want to consider removing that.
You can also remove the margins from <ul> elements, instead of removing the white space between them.
Updated Demo
Your choice :)
Try to do this:
.pricing-table{
width: 80%;
margin: auto;
}
Or any width you want.
Fiddle Demo
If you can define width in body, then do in CSS as :
body {
width :900px;
margin:auto;
}
Have you tried this? fiddle here
#pricing-table{
width:80%;
margin: auto;
}
Maybe you should add this to your CSS:
body{
text-align:center;
margin:0 auto;
padding:0 auto;
}
.pricing-table {
text-align:center;
margin:0 auto;
padding:0 auto;
width:40%;
}
.pricing-table ul{
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin: 2px;
width: 100%; //40% is now 100%
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
Try including this; a fiddle
.pricing-table{
disply:block;
margin-right: auto;
margin-left:auto;
border:1px solid black; //just extra
width:80%; //need to define width to be able to center
}
Try the following CSS if you want them in the middle of the whole screen (centered), with some spacing between the two <ul> elements. Just added a body declaration and changed the margin in .price-table ul, just something different.
body {
width:900px;
margin:auto;
padding-top:150px
}
.pricing-table ul {
border-width: 1px;
border-style: solid;
border-color: #CCCCCC;
border-radius: 4px;
margin:30px;
width: 40%;
text-align: center;
font-family: 'Arial';
list-style: none;
float: left;
padding: 5px;
background-color: #FFFFFF;
}
.pricing-table ul:hover {
-webkit-transform: scale(1.1);
transform: scale(1.1);
box-shadow: 3px 5px 7px rgba(0,0,0,.7);
}
.pricing-table ul li {
padding: 10px;
background-color: #FFFFFF;
border-width: 0px;
border-style: dotted;
border-color: #CCCCCC;
border-radius: 4px;
border-bottom-width: 1px;
font-size: 15px;
}
.pricing-table li:first-child{
border-bottom: 0;
}
.pricing-table li:last-child{
border-bottom: 0;
}
.pricing-table li:nth-child(odd) {
background-color: #FFFFFF;
}
.pricing-table ul .heading {
color: #FFFFFF;
background-color: #5091B2;
font-size: 30px;
}
.pricing-table ul .price {
color: #636363;
background-color: #FFFFFF;
font-size: 25px;
}
.pricing-table ul .action {
font-size: 20px;
background-color: #ffffff;
color: #6C9694;
}
.pricing-table .action a {
border-color: #CCCCCC;
border-width: 1px;
border-radius: 4px;
background-color: #E9F7FE;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 100px;
padding-right: 100px;
border-style: solid;
color: #5091B2;
}
i'm displaying menu hover on image .These all image generated dynamically.
while mouse hover on first image menu will display but problem on menu items background items displaying. how to hide behide elemets while displying hover ?
a {
text-decoration: none;
}
.menu {
font-family: Arial;
color: #515151;
height: 40px;
position: relative;
text-align: left;
width: 15px;
margin: 0 auto;
}
.menu li a {
color: #515151;
display: block;
cursor: pointer;
font-size: 14px;
padding: 6px 15px;
}
.menu li a:hover {
background: #f44141;
color: #fff;
}
.sub {
background: #fff;
position: absolute;
z-index: 2;
width: 200px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none;
padding: 40px 0 3px;
}
a.hover-link {
width: 190px;
background: #fff;
font-size: 14px;
color: #515151;
position: absolute;
z-index: 110;
display: block;
height: 8px;
cursor: pointer;
border-radius: 5px 5px 0 0;
font-weight: 700;
border: 1px solid #ddd;
padding: 10px 0 1px 10px;
}
.sub-options {
list-style: none;
font-size: 11px;
margin: 0;
padding: 0;
}
Working example : This is just z-index's issue CSS:
.sub{
background: #fff;
position: absolute;
z-index: 1000;
width: 200px;
margin: 0px 0 3px;
border-radius: 3px;
box-shadow: 0 2px 4px #ddd;
border: 1px solid #ddd;
display: none; top:38px; left:0;
}
i am not getting vertical scrollbar...
jsfiddle link -> http://jsfiddle.net/QNuzb/2/
css is
/* Navigation */
#nav-bar {position: fixed;top: 0;left: 0;z-index: 999;width: 100%;height: 45px;background: #F5F5F5;}
#nav {width: 800px;margin: 0 auto;height: 48px;text-align:center;}
#nav > li { display: inline-block;width: 15em;}
ul{list-style-type: none; display:inline-block;margin:0 auto; padding:0; position:relative;font-weight: bold; }
ul li{display:block;display:inline-block; position:relative;margin-right:5px;margin-left:5px}
ul li a{text-align: center;font-size: 18px;margin: 5px;padding: 8px;text-decoration: none; text-transform: capitalized;height: 35px; color:#222; font-size:18px; line-height:48px;}
ul li a:hover, ul li a.active{text-align:center;border-bottom:3px solid #800000; color:#800000}
/* Tabs */
.etabs { margin: 0; padding: 0; }
.tab { display: inline-block; zoom:1; *display:inline; background: #eee; border: solid 1px #999; border-bottom: none; -moz-border-radius: 4px 4px 0 0; -webkit-border-radius: 4px 4px 0 0; }
.tab a { font-size: 14px; line-height: 2em; display: block; padding: 0 10px; outline: none; }
.tab a:hover { text-decoration: underline; }
.tab.active { background: #fff; padding-top: 6px; position: relative; top: 1px; border-color: #666; }
.tab a.active { font-weight: bold; }
.tab-container .panel-container { background: #fff; border: solid #666 1px; padding: 10px; -moz-border-radius: 0 4px 4px 4px; -webkit-border-radius: 0 4px 4px 4px; }
It's because of the position: fixed; in your nav-bar class. remove it.
#nav-bar {
position: fixed; /* remove */
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 45px;
background: #F5F5F5;
}