So I'm trying to figure out a way to make the tabs in my navigation bar clickable as well as the link text. Adding padding: 20px 30px; makes the second to last tab shift up and the text shift to the right. I'm willing to do some major alterations so please any answer is a good one.Here's my HTML.
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
Heres the CSS...
#tab_container
{
background-color: #222;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #222;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: black;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
padding: 20px 30px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
}
set display-blocks to A:
ul li a {
display:block;
height:100%;
width:100%;
line-height:XXpx;
}
Related
I tried to make a responsive header for my website, it's all ok, but i can not set the margins of the links to 0. You cand see in the image: https://imgur.com/s5EzL6n
What i want to achieve is to make all that grey background 100% width.
I followed this youtube video: https://www.youtube.com/watch?v=lYw-FE60Dws
I probably set some things wrong, i am sure, but i am a beginner.
HTML:
<header>
<div class="container">
<div id="branding">
<img src="logo.png">
<a class="toggle">Meniu</a>
</div>
<nav>
<ul class="active">
<li class="current">Acasă</li>
<li>Despre</li>
<li>Servicii</li>
<li>Proiecte</li>
<li>Contact</li>
</ul>
</nav>
</div>
</header>
CSS:
/* responsive header*/
.toggle{
display: none;
position: absolute;
right: 10px;
top: 26px;
padding: 5px;
cursor: pointer;
text-decoration: none;
}
#media (max-width: 940px){
.toggle{
display: block;
}
header .toggle{
padding: 0 0;
font-size: 18px;
}
header ul li{
display: block;
width: 100%;
background-color: grey;
}
header ul.active{
display: block;
}
header ul li a{
display: block;
text-align: center;
}
header nav{
margin: 0;
width: 100%;
}
header ul li{
width: 100%;
}
}
/*normal page*/
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
header li{
float: left;
display: inline;
padding: 0 20px 0px 20px;
}
header #branding{
float: left;
height: 90px;
margin-left: 35px;
}
header a{
color: #fcfcfc;
text-decoration: none;
text-transform: uppercase;
font-size: 16px;
padding-right: 25px;
}
there is a default padding for ul, you have to remove it when you don't need it. Just add 0px to the ul and you will have a 100% div
Try to use css box models to solve such cases
https://www.youtube.com/watch?v=xF0dhepbzD8
My nav bar (which is at the top of the page) and header (below nav, which has a large image and a text on top of it), have a very small gap between them that I want to remove. I've visited a number of posts on similar problems, and tried their solutions, but can't seem to work for me, including: display: block; margin: 0; e.t.c.
I guess it has something to do with a style I have applied on either the header's content or the nav's content.
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>
Just define the height of nav
body {
margin: 0px;
padding: 0px;
background-color: #f2f2f2;
}
html {
margin: 0px;
padding: 0px;
}
#logo {
height: 50px;
width: auto;
float: left;
}
nav ul {
list-style-type: none;
overflow: hidden!important;
margin: 0;
padding: 0;
background-color: #1a1a1a;
text-align: center;
border: 1px solid #e7e7e7;
display: inline-block;
width: 100%;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
nav {
margin-bottom: 0;
height: 51px;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<ul>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif"/>
<li>Game 2</li><li>Game 3</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png"/>
<h1>Games</h1>
</header>
The problem is caused by your ul having overflow:hidden so just remove it.
Added box-sizing:border-box to avoid horizontal scrollbar
UPDATE
I noticed that you have an img as child of ul which makes that invalid HTML.
So I tweaked your code to make it valid.
*,
*::before,
*::after {
box-sizing: border-box
}
body,
html {
margin: 0;
padding: 0;
background-color: #f2f2f2;
}
#logo {
height: 50px;
width: auto;
display: inline-block;
vertical-align:top
}
nav {
margin-bottom: 0;
background-color: #1a1a1a;
border: 1px solid #e7e7e7;
}
nav ul {
list-style-type: none;
width: calc(100% - 60px);
margin:0;
padding: 0;
text-align: center;
display: inline-block;
vertical-align: top;
}
nav li {
display: inline-block;
}
nav a {
display: inline-block;
padding: 16px 15px;
text-decoration: none;
font-family: arial;
font-weight: bold;
color: white;
}
nav a:hover {
background-color: orange;
color: white;
}
header {
margin-top: 0;
margin-bottom: 10px;
width: 100%;
font-family: arial;
font-size: 18px;
color: orange;
}
h1 {
position: absolute;
top: 150px;
width: 100%;
z-index: 1;
text-align: center;
}
#bannerImage {
width: 100%;
height: auto;
position: relative;
z-index: 0;
}
<nav>
<img id="logo" src="https://67.media.tumblr.com/f607af5bc60d1b2837add83c70a2aa45/tumblr_inline_mrwv19q8fE1qz4rgp.gif" />
<ul>
<li>Game 1
</li>
<li>Game 2
</li>
<li>Game 3
</li>
</ul>
</nav>
<header>
<img id="bannerImage" src="http://static2.hypable.com/wp-content/uploads/2014/09/Hogwarts-lake.png" />
<h1>Games</h1>
</header>
Try setting the height of the nav:
nav {
height: 50px;
}
Tried it out and works even without the margin set to 0.
I have a top menu made by a list. All <li>s centers depending on the text though I want to center one the <li>s and then the rest of the <li>s should center on both sides. I want to center the image.
The top menu looks like this:
<div id="topMenu">
<ul>
<li>Forside</li>
<li>Kampe</li>
<li>Truppen</li>
<li><img id="logoMenu" src="images/logo.png"></li>
<li>Galleri</li>
<li>Statistik</li>
<li>Om Klubben</li>
</ul>
</div>
Then I have some CSS:
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
}
#topMenu ul {
list-style-type: none;
margin: 0;
padding: 10px;
text-align: center;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#logoMenu {
background-image: url("images/logo.png");
width: 80px;
}
#topMenu img {
vertical-align: text-top;
}
Here's a jsFiddle
Personally I wouldn't have the logo as an element in the navigation. Semantically it doesn't make sense and its difficult to style. If you divide the menu items in to two ULs you can do the following:
HTML
<div id="topMenu">
<ul id="menu-left">
<li>AAA</li>
<li>BBB</li>
<li>CCC</li>
</ul>
<img src="URL" />
<ul id="menu-right">
<li>DDD</li>
<li>EEE</li>
<li>FFF</li>
</ul>
</div>
CSS
#topMenu {
background: #51a047;
width: 100%;
height: 50px;
line-height: 25px;
margin: 0 auto;
position: relative;
}
#topMenu ul {
list-style-type: none;
text-align: center;
margin: 0;
padding: 10px;
box-sizing: border-box; /* percentage width + padding */
width: 45%;
position: absolute;
top: 0;
}
#topMenu #menu-left {
left: 0;
}
#topMenu #menu-right {
right: 0;
}
#topMenu li {
display: inline;
padding: 0 20px;
text-transform: uppercase;
}
#topMenu a {
color: white;
text-decoration: none;
}
#logoMenu {
display: block;
width: 10%;
margin: 0 auto; /*center*/
}
#topMenu img {
margin: 0 auto;
display: block;
max-height: 100%;
max-width: 100%;
}
https://jsfiddle.net/vvu5k79r/2/
I want to align the list items horizontally. But i'm not getting them in a line. If i remove the br tag inside the first li then its aligning perfectly. What am i missing? please help. jsfiddle code -> here
html:
<div id="info_new_cont">
<ul id="info_new_ul">
<li id="app_no_li">
<div>
<div id="app_no_title">Appn<br> No:</div>
<div id="app_no" class="info_new_bottom">42382464</div>
</div>
</li>
<li id="new_li">
<div>mcs</div>
<div id="new_case" class="info_new_bottom">New Case</div>
</li>
<li id="ifw_li">
<div>ld</div>
<div id="file_wrap" class="info_new_bottom">More Info</div>
</li>
</ul>
</div>
here is the style
#info_new_cont {
float: right;
display: inline-block;
width: 500px;
height: 100%;
margin: 0px;
}
#info_new_ul {
list-style: none;
margin: 0px;
width: 400px;
height: 140px;
}
#info_new_ul li {
display: inline-block;
padding: 5px;
color: #fff;
font-family: trebuchet ms;
font-size: 19px;
font-weight: lighter;
text-align: justify;
word-wrap:break-word;
}
.info_new_bottom {
margin-top:30px;
}
#app_no_li {
width: 120px;
height: 120px;
background-color: #00ddff;
}
#app_no_cont {
white-space: nowrap;
}
#app_no_title {
}
#app_no {
font-weight: bold;
}
#new_li {
width: 120px;
height: 120px;
background-color: #eee;
}
#ifw_li {
width: 120px;
height: 120px;
background-color: #eee;
}
Delete the display: inline-block; from de #info_new_ul li
and use a float:left for the <li>.
#info_new_ul li {
....
float:left;
}
Your JsFiddle but updated with the new code
You should use float:left for li tags.
#info_new_ul li {
float:left;
margin-left: 2px;
padding: 5px;
color: #fff;
font-family: trebuchet ms;
font-size: 19px;
font-weight: lighter;
text-align: justify;
word-wrap:break-word;
}
DEMO
I'm working on my first web page and ran into an issue with finding the right code for my sticky nav bar. The nav bar already has a jQuery code attached to it so I'm wondering if that may affect the code, or if I'm not using the right one.Here's the HTML for the nav bar...
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
Heres my css for it...
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
And for the jQuery I've already included....
$(document).ready(function(){
$('ul#nav li').click(function(){
var number = $(this).index();
$('.sec').hide().eq(number).show();
$(this).toggleClass('active inactive');
$('ul#nav li').not(this).removeClass('active').addClass('inactive');
});
$('.sec').not(':first').hide();
});
To make it sticky you would use position: fixed in the css. That makes it stay in the same position relative to the browser window. You don't have to use any jQuery for this part.
Try position:fixed;
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: fixed; //change this to fixed....to stick to top
max-width: 970px;
width: 100%;
text-align: center;
}
You have to compensate for the height of the header though, in your container div, so notice in my demo I have padding of 200px added to "bodydiv" to compensate
DEMO HERE
It is possible to have a nav bar that is sticky even without using javascript, jquery or any other scripting languages. You only need to add another attribute to your CSS code.
Everything that does the magic is the position: fixed attribute. The position attribute denotes the type of the position of a particular division in HTML. It is followed by the attribute(s) that mention the pixel position. They are top, bottom, right, and left.
Here is the code:
#tab_container
{
background-color: #1E1E1E;
display: -webkit-box;
-webkit-box-flex: 1;
display: block;
position: relative;
max-width: 970px;
width: 100%;
text-align: center;
position: fixed;
top: 0px;
}
#tabs
{
float: left;
margin-top: 0px;
width: 100%;
max-width: 970px;
background-color: #1E1E1E;
padding-top: 20px;
text-align: center;
}
#nav
{
width: 100%;
max-width: 970px;
text-align: center;
background-color: #1E1E1E;
}
ul
{
float: left;
max-width: 970px;
display: -webkit-box;
-webkit-box-flex: 1;
width: 100%;
padding-left: 0px;
margin-bottom: 0px;
margin-top: 0px;
margin-right: 0px;
text-align: center;
background-color: #1E1E1E;
}
ul li
{
display: inline-block;
text-align: center;
width: 158px;
height: 70px;
background-color: #1a1a1a;
font-size: 18px;
text-transform: uppercase;
text-align: center;
margin:0 auto;
padding: 0;
}
ul li a
{
color: #54544b;
display: block;
height: 100%;
width: 100%;
text-decoration: none;
text-align: center;
margin: 0px auto;
line-height: 70px;
}
a:hover
{
color: #CF7BA1;
}
.active a
{
text-decoration: underline;
color: #CF7BA1;
background-color: #222;
}
<div id="tab_container">
<nav id="tabs">
<ul id="nav">
<li class="active">About</li>
<li class="inactive">Services</li>
<li class="inactive">Our Staff</li>
<li class="inactive">book</li>
<li class="inactive">Gift Cards</li>
<li class="inactive">Reviews</li>
</ul>
</nav>
</div>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
<p> Some Text <p>
Here we are using position: fixed followed by top: 0px because we want the nav bar to always be fixed at 0 pixels from the top of the screen.
If you are looking for a STICKY one, as the question says, you better opt for position: sticky. Hope it helps.
If You want to know more about the position attribute in CSS, please visit https://www.w3schools.com/css/css_positioning.asp