I need your help,
How can the css markup below be modified such that the added extra 1 pixel the active clicked on tab to disappear and be removed from my UL LI Tabbed Menu as seen below?
Here is pic of the problem:
HTML Markup:
<div class="container">
<ul class="tabs">
<li>Gallery</li>
<li>Submit</li>
<li>Resources</li>
<li>Contact</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">Tab 1 Content</div>
<div id="tab2" class="tab_content">Tab 2 Content</div>
<div id="tab3" class="tab_content">Tab 3 Content</div>
<div id="tab4" class="tab_content">Tab 4 Content</div>
</div>
</div>
CSS:
.container {width: 500px; margin: 10px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
height: 31px;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 30px;
line-height: 30px;
border: 1px solid #999;
border-left: none;
margin-bottom: 0px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active {
background: #fff;
border-top: 2px solid rgb(230,139,44);
border-bottom: 1px solid #FFF;
}
html ul.tabs li.active a:hover {
background: #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
These two lines (added at the bottom) fixed it:
ul.tabs {
border-bottom: none;
}
/* Why are you using `html` here? No point to it! */
html ul.tabs li.active {
border-bottom: none;
}
You don't need a full border below your tabs to draw the lines, let your li elements take care of that, and then just shift the 1px border from the bottom to the top by adding it to the border-top. When not using box-sizing: border-box you have to make sure that your borders all add up to the same amount to prevent things like this from happening.
.container {width: 500px; margin: 10px auto;}
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
height: 31px;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 30px;
line-height: 30px;
border: 1px solid #999;
border-left: none;
margin-bottom: 0px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
ul.tabs li a {
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
padding: 0 20px;
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active {
background: #fff;
border-top: 2px solid rgb(230,139,44);
border-bottom: 1px solid #FFF;
}
html ul.tabs li.active a:hover {
background: #fff;
}
.tab_container {
border: 1px solid #999;
border-top: none;
clear: both;
float: left;
width: 100%;
background: #fff;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
}
.tab_content h2 {
font-weight: normal;
padding-bottom: 10px;
font-size: 1.8em;
}
.tab_content h3 a{
color: #254588;
}
ul.tabs { border-bottom: none; }
html ul.tabs li.active { border-bottom: none; }
<div class="container">
<ul class="tabs">
<li class="active">Gallery</li>
<li>Submit</li>
<li>Resources</li>
<li>Contact</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">Tab 1 Content</div>
<div id="tab2" class="tab_content">Tab 2 Content</div>
<div id="tab3" class="tab_content">Tab 3 Content</div>
<div id="tab4" class="tab_content">Tab 4 Content</div>
</div>
</div>
You could shift the content up a pixel:
html ul.tabs li.active a {
position:relative;
top:-1px;
}
https://jsfiddle.net/7adfsmdj/
change the height as 30px in ul.tabs
since you gave as 30px in ul.tabs li
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
height: **30px;**
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: **30px;**
line-height: 30px;
border: 1px solid #999;
border-left: none;
margin-bottom: 0px;
background: #e0e0e0;
overflow: hidden;
position: relative;
}
Related
I have made a css dropdown menu out of only css and html. My problem is when I hover over the nav bar- my page content moves to the right. Then when I hover over the dropdown menu, the page content moves back to the left. I have not found anything that can help me so far. I have attached the relevant code below.
Please help me, and thank you
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a{
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Basecode</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
</body>
</html>
You need to clear your floats.
.page-body {
…
clear: left;
}
Demo
* {
padding: 0;
margin: 0;
}
nav {
background-color: #cccccc;
width: 100%;
height: 80px;
}
ul {
float: left;
}
ul li {
position: relative;
list-style: none;
float: left;
line-height: 80px;
font-size: 20px;
color: #c92d39;
}
ul li a {
display: block;
text-decoration: none;
color: #c92d39;
padding: 0 30px;
}
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
ul li:hover ul {
display: block;
}
ul li ul {
display: none;
position: absolute;
background-color: #e5e5e5;
border-radius: 0 0 3px 3px;
}
ul li ul li a:hover {
background-color: #b2b2b2;
color: #c92d39;
border-bottom: none;
}
ul li ul li {
font-size: 15px;
width: 100%;
text-align: center;
}
h1 {
color: #c92d39;
padding: 30px;
}
h2 {
color: #c92d39;
padding: 5px 30px 10px 30px;
}
p {
padding: 0px 30px;
}
a {
text-decoration: none;
}
#logo {
background-color: #cccccc;
padding: 0 51px 0 75px;
font-size: 30px;
font-weight: bold;
}
.page-body {
background-color: #e5e5e5;
clear: left;
}
.wrapper {
margin: 0 300px 0 300px;
padding-left: 0px;
height: 100%;
background-color: white;
}
.footer {
background-color: #cccccc;
width: 100%;
height: 80px;
}
.empty_box {
height: 1000px;
width: 100%;
}
#contacts {
margin: 0px 0px 0px 60px;
padding: 0 20px;
border-top: 1px solid #cccccc;
}
#contacts:hover {
border-top: 1px solid #c92d39;
}
#copyright {
font-size: 10px;
float: right;
padding: 0px 30px 0 770px;
}
#copyright:hover {
background-color: #cccccc;
}
<nav>
<ul>
<li id="logo">Cultural Asia</li>
</ul>
<ul>
<li>Home</li>
<li>
Attractions
<ul>
<li>attraction1</li>
<li>attraction2</li>
<li>attraction3</li>
</ul>
</li>
<li>
Packages
<ul>
<li>package1</li>
<li>package2</li>
<li>package3</li>
</ul>
</li>
<li>Contacts</li>
</ul>
</nav>
<div class="page-body">
<div class="wrapper">
<p>hi</p>
<div class="empty_box"></div>
</div>
</div>
<div class="footer">
<ul>
<li>Contact Details</li>
<li id="copyright">Copyright Lachlan Dunn</li>
</ul>
</div>
The problem is that you add a bottom-border to element which pushes paragraph out of its position. do
ul li a:hover {
color: black;
}
instead of
ul li a:hover {
color: black;
border-bottom: 1px solid #c92d39;
}
or if you really want that border check out css box-sizing property documentation
I have borders on the left and right sides of some items in a list, but I'm getting these white gaps that I don't want, but it's only on the right side which is weird and I haven't been able to figure out what I'm doing wrong.
Any help would be great.
The code:
ul {
padding: 0;
list-style: none;
background: #f2f2f2;
}
ul li {
display: inline-block;
position: relative;
line-height: 21px;
width: 150px;
border: 1px solid white;
background: white;
}
ul li:hover {
border: 1px solid black;
}
ul li:hover ul.dropdown {
display: block;
}
ul li:hover li {
border-left: 1px solid black;
border-right: 1px solid black;
}
ul li:hover li.top {
border-top: 1px solid black;
}
ul li:hover li.bottom {
border-bottom: 1px solid black;
}
ul li a {
display: block;
padding: 8px 25px;
color: #333;
text-decoration: none;
}
ul li a:hover {
color: #fff;
background: #939393;
}
ul li ul.dropdown {
font-size: 14px;
width: 150px;
background: #f2f2f2;
display: none;
position: absolute;
z-index: 999;
left: -1px;
}
<ul style="font-size: 16px; width: 500px; margin-left: auto; margin-right: auto; margin-bottom: 0px; margin-top: 4px;">
<li><u>Products</u>
<ul class="dropdown">
<li class="top">Apples
</li>
<li>Cans
</li>
<li>Bowls
</li>
<li class="bottom">Cups
</li>
</ul>
</li>
</ul>
The style in ul li
border: 1px solid white;
is causing extra white lines to be drawn
Remove it and you should be good
I have made a navigation bar and I am trying to make it centered to fit all screens, with position absolute and then use left: 50%; and then place it by margin-left: 100px; to get it exactly where I want it. I have done this to all my buttons and it worked, but when I try doing it on my navigation bar, it moves the whole bar to the middle and when I then move it, it won't work.
html code:
<div id="navBarTop">
<ul>
<li>test</li>
<li>test</li>
<li>test</li>
<li>test</li>
</ul>
</div>
css code as it is normally:
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
css when I am trying to make it centered(doesn't work):
#navBarTop {
width: 100%;
float: left;
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
left: 50%;
margin-left: 100px;
bottom: 0;
}
#navBarTop ul {
list-style: none;
width: 800px;
margin: 0 auto;
padding: 0;
margin-left: 350px;
}
#navBarTop li {
float: left;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family: "Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
I think you're trying too hard.
#navBarTop {
padding: 0;
background-color: #FFB700;
border-bottom: 1px solid #4c4c4c;
position: absolute;
text-align: center;
top: 50px;
left: 0;
right: 0;
}
#navBarTop ul {
list-style: none;
margin: 0 auto;
padding: 0;
display: inline-block;
}
#navBarTop li {
display: inline-block;
}
#navBarTop li a {
display: block;
padding: 10px 25px;
text-decoration: none;
font-family:"Arial";
color: #4c4c4c;
border-right: 1px solid #4c4c4c;
}
#navBarTop li:first-child a {
border-left: 1px solid #4c4c4c;
}
#navBarTop li a:hover {
background-color: #ffffff;
}
<div id="navBarTop">
<ul>
<li>test
</li>
<li>test
</li>
<li>test
</li>
<li>test
</li>
</ul>
</div>
Struggling to center the nav bar in the middle of the browser... Tried a number of the things found through google but no luck as yet. Seems like it should be such an easy thing to do but its turned out to be a pain in the neck!
Heres the code.
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#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:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Try not using floats but rather display:inline-block instead.
JSfiddle Demo
CSS
ul {
padding: 0;
margin: 0;
}
#nav {
//width: 100%; /* not required */
//float: left; /* not required */
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
width:100%;
display: block;
list-style-type: none;
text-align: center; /* add this */
}
#nav li {
//float: left; /* remove */
display: inline-block; /* add this */
}
#nav li a {
display: block;
padding: 8px 15px;
text-decoration: none;
font-weight: bold;
color: #069;
border-right: 1px solid #ccc; }
#nav li:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
EDIT - added reset of ul padding/margin
Add a margin-top:50%; to it
just like this:
#nav {
width: 100%;
float: left;
margin-top:50%;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
}
#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:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
Does this solve your problem?
Or didn't I understand your question ?
Just add text-align: center; in you #nav style. And reset UL default margin It should be like this
HTML
<div id="nav">
<ul>
<li class="home">Home</li>
<li class="detail">About</li>
<li class="work">Work</li>
<li class="contact">Contact</li>
</ul>
</div>
CSS
#nav {
width: 100%;
float: left;
margin: 0 0 1em 0;
padding: 0;
border-bottom: 1px solid #ccc; }
#nav ul {
display: inline-block;
list-style-type: none;
margin: 0;
}
#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:first-child a {
border-left: 1px solid #ccc; }
#nav li a:hover {
color: #50B748;
}
The tabs work perfectly. I am just having a problem with the placement in IE. In Mozilla it shows the placement of the tabs perfectly but when I load the page in IE it moves the tab to the complete left of the table the tabs are in.
Here is my CSS code:
a:active {
outline: none;
}
a:focus {
-moz-outline-style: none;
}
#tabs_container {
width: 626px;
font-family: Arial;
font-size: 10px;
}
#tabs_container ul.tabs {
list-style: none;
border-bottom: none;
height: 25px;
margin: 0px;
}
#tabs_container ul.tabs li {
float: left;
}
#tabs_container ul.tabs li a {
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
}
#tabs_container ul.tabs li.active a {
background-color: #90afcb;
padding-top: 6px;
}
div.tab_contents_container {
border: none;
border-top: none;
padding: 10px;
font-size: 10px;
}
div.tab_contents {
display: none;
}
div.tab_contents_active {
display: block;
}
div.clear {
clear: both;
}
HTML
<!-- These are the tabs -->
<ul class="tabs">
<li class="active">
<span>Dienstleistung | Services</span>
</li>
<li><span>Über uns | About us</span></li>
<li><span>Netzwerken | Networking</span></li>
<li><span>Social Media</span></li>
<li><span>Impressum</span></li>
</ul>
I would be very grateful for any assistance you could provide.
Many thanks
hi did you try to add float #tabs_container ul.tabs and #tabs_container ul.tabs li a
#tabs_container ul.tabs {
float:left;
border:1px solid red;
list-style: none;
border-bottom: none;
height: 25px;
margin: 0px;
}
#tabs_container ul.tabs li a {
float:left;
padding: 6px 9px;
display: block;
border-left: 1px solid #90afcb;
border-top: 1px solid #90afcb;
border-right: 1px solid #90afcb;
border-bottom: 1px solid #90afcb;
margin-right: 4px;
text-decoration: none;
background-color: #ffffff;
}