Creating a navigation bar. How do i make the whole area around the text not just the text clickable? I put display: block; and it still does not work. Now I'm just writing anything so i could post the question. Thank you!
.containter{
width: 80%;
margin: 0 auto;
}
header{
background: deeppink;
}
header::after{
content:'';
display: table;
clear: both;
}
.logo{
float: left;
padding: 10px 0;
margin-left: 5px;
}
nav{
float: left;
}
nav ul{
margin:5px;
padding:0;
list-style: none;
overflow: hidden;
}
nav li{
float: left;
display: block;
margin-left: 100px;
padding-top: 27px;
}
nav a{
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: times new roman;
text-align: center;
display: block;
}
nav a:hover{
background-color: #C71585;
}
try to change to these two
nav li{
float: left;
display: block;
}
nav a{
text-decoration: none;
color: white;
text-transform: uppercase;
font-family: times new roman;
text-align: center;
display: block;
margin-left: 100px;
padding-top: 27px;
}
For making the area clickable you can use pointer events property of css like
div {
pointer-events: none;
}
div{
pointer-events: auto;
}
div{
pointer-events: all;
}
Can try it out if it works for you none will disable the mouse click where as auto and all will allow the mouse click..!!
Related
I'm sorry to ask this question because it has been largely posted, but I checked a lot of links and didn't solve it yet. I have a navbar with 2 elements and I cannot center it in the middle of the nav.
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
width: 100%;
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
Probably in the large number of css elements I'm not able to see where the code is not working.
I posted the code here:
codepen
You should remove the left padding from the main #menu element, set the ul's display to inline-block and the width to auto (just remove the width property).
This will work because the #menu element has text-align: center. the ul will be centered since its width is not 100% (because width is set to auto and the display to inline-block).
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
padding-left: 0; // remove this
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
display:block;
text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
list-style: none;
display: block;
text-align: center;
}
#menu ul {
display: inline-block; // and set this
}
#menu li {
float: left;
display: inline;
position: relative;
}
#menu a {
display: block;
line-height: 50px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
You can use flex positions.
Use property justify-content : center to center all children div inside a parent div. It's useful to distribute the space between or around the elements.
This will also make your CSS code lighter. The more CSS, the more difficult it is.
It's also good for responsive design.
I have also removed some CSS property. This code can be further improved and reduced. Good luck !
#menu {
background: #000000;
background: linear-gradient(to bottom, #973F8E, #DC4069);
color: #FFF;
height: 52px;
width: 500px;
// padding-left: 18px;
border-radius: 50px;
border: 1px solid #000000;
margin: auto;
// display:block;
// text-align:center !important;
}
#menu ul, #menu li {
margin: 0 auto;
padding: 0;
// list-style: none;
// display: block;
text-align: center;
}
#menu ul {
width: 100%;
display: flex;
justify-content: center;
}
#menu li {
// float: left;
margin : 0px;
display: inline;
// position: relative;
}
#menu a {
display: block;
line-height: 51px;
padding: 0 14px;
text-decoration: none;
color: #FFFFFF;
font-size: 15px;
text-transform: uppercase;
}
#menu a.dropdown-arrow:after {
content: "\25BE";
margin-left: 5px;
}
#menu li a:hover {
color: #000000;
background: #FFA6AF;
}
#menu input {
display: none;
margin: 0;
padding: 0;
height: 52px;
width: 100%;
opacity: 0;
cursor: pointer
}
#menu label {
display: none;
line-height: 50px;
text-align: center;
position: absolute;
left: 35px
}
#menu label:before {
font-size: 1.6em;
content: "\2261";
margin-left: 20px;
}
#menu ul.sub-menus{
height: auto;
overflow: hidden;
width: 170px;
background: #444444;
position: absolute;
z-index: 99;
display: none;
}
#menu ul.sub-menus li {
display: block;
width: 100%;
}
#menu ul.sub-menus a {
color: #FFFFFF;
font-size: 16px;
}
#menu li:hover ul.sub-menus {
display: block
}
#menu ul.sub-menus a:hover{
background: #F2F2F2;
color: #444444;
}
<nav id="menu">
<input type='checkbox' id='responsive-menu' onclick='updatemenu()'><label></label>
<ul>
<li><a href='/'>DASHBOARD</a></li>
<li><a href='/model'>MODEL</a></li>
</ul>
</nav>
I am attempting to center the content on a website. I do not know JavaScript very well and have attempted implementing some of the solutions into my website, but cannot do so. I know CSS much better and was wondering if their was a simple solution to fixing the scroll bar problem.
Any help would be great.
Edit
I have now been learning Javascript and Jquery and discovered things like $(window).height() is doing this a good way to fix it. Is there times when this would not work?
I think and I believe that you want responsive design. Here's a demo of it.
Full Screen Demo
HTML and CSS Markups
CSS
html,body{
width:100%;
margin:0;
padding:0;
font-family: "Arial";
}
.MainHeader{
background-color:#BFBFBF;
padding: 20px;
overflow: hidden;
}
.MainHeaderTitle{
display: inline-block;
line-height: 64px;
margin:0;
vertical-align: top;
color:#404040;
}
.MainHeaderLogo {
display: inline-block;
height: 64px;
width: 64px;
}
nav{
overflow: hidden;
}
nav ul{
margin:0;
padding: 0;
display: inline-block;
overflow: hidden;
}
nav ul li{
list-style-type:none;
background-color: #404040;
float: left;
width: 140px;
line-height: 40px;
text-align: center;
margin: 2px;
}
nav ul li a{
color: #BFBFBF;
text-decoration: none;
}
section ul li a{
color: #404040;
text-decoration: none;
}
img{
max-width: 100%;
}
.img-container{
text-align: center;
}
main{
width:100%;
padding: 20px;
box-sizing: border-box;
}
footer{
background-color:#404040;
color: #BFBFBF;
overflow: hidden;
padding: 20px;
}
footer a,footer p{
color: #BFBFBF;
margin: 5px;
display: inline-block;
}
.col-3{
width:25%;
float:left;
}
How do I make the hover background-color fill the entire height of the navigation bar plus the padding of the text instead of only the text.
I want to make it look like this.
Fiddle
What am I missing? Thank you in advance!
Here you go. I've created a jsfiddle for you. Its working good:
http://jsfiddle.net/cRjF4/3/
Updated CSS:
<style>
.fa {
font-size: 15px;
margin-top: -10px;
margin-bottom: -10px;
}
.navbar-height {
height: 65px;
}
.clearboth {
clear: both;
}
/* workbar styles */
.fixed-top {
position: fixed;
top: 0;
right: 0;
left: 0;
background: #FFF;
text-align: center;
height: 67px;
margin: 0 auto;
width: 100%;
}
.workbar {
text-align: center;
margin: 0 auto;
background-color: #ffe6e6;
}
.worknav {
list-style: none;
padding-left: 0px;
margin: 0 auto;
text-align: center;
}
.worknav> li {
text-align: center;
display: inline-block;
padding-left: 20px;
padding-right: 20px;
padding-top: 11px;
padding-bottom: 11px;
}
.worknav> li:hover a {
color: yellow;
}
.worknav>li:hover {
background-color: black;
}
.worknav > li > a {
text-decoration: none;
color: #666;
}
.centered {
float: none;
margin-left: auto;
margin-right: auto;
}
.worktop {
margin-top: 70px;
}
</style>
If you wish to colour both the padding and the text try something like:
a:hover{
background-color:yellow;
color:red;
}
Try to do Anchor link css as
.worknav > li > a {
text-decoration: none;
display:inline-block;
color: #666;
line-height:65px;
}
Check on http://jsfiddle.net/kka284556/cRjF4/9/
You can do it by applying padding on anchor tag. Remove height on ul and li tag and instead of height just apply padding on anchor. And also apply background-color on anchor.
It will work i think. If I am right then let me know i'll share some code if you want.
I'm trying to make a dropdown menu on my website. I want to be able to click on a down arrow and have a menu pop up below it. Right now the menu only shows up part way on the screen.
Here's a picture to show what is going on now:
I would like to have the right side of the menu items lined up with the down arrow, instead of the left side like it is.
Here's the CSS that i'm using right now.
* {
margin: 0;
padding: 0;
border: 0;
}
body {
background-image: url(bg.jpg);
background-position: center;
background-repeat: repeat;
}
#top {
background-color: #333;
height: 30px;
margin-bottom: 10px;
}
#menu {
color: #CCC;
height: 30px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
position: absolute;
}
#top_right {
height: 30px;
width: auto;
text-align: left;
float: right;
margin-right: 5px;
color: #CCC;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 12px;
}
.menu {
padding-left: 10px;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:link {
color: #CCC;
text-decoration: none;
}
a.mlink:visited {
color: #CCC;
text-decoration: none;
}
a.mlink:hover {
color: #FFF;
text-decoration: none;
}
a.mlink:active {
color: #CCC;
text-decoration: none;
}
#selected {
color: #6C0;
}
#content {
background-color: #CCC;
}
/*
START OF MENU TEST
*/
#esempio{
margin:0;
padding:0;
}
#esempio ul{
padding:0;
margin:0;
}
#esempio li{
position: relative;
float: left;
list-style: none;
margin: 0;
padding:0;
}
#esempio li a{
width:auto;
height: 30px;
display: block;
text-decoration:none;
text-align: center;
line-height: 30px;
background-color: black;
color: white;
}
#esempio li a:hover{
background-color: #666;
}
#esempio ul ul{
position: absolute;
top: 30px;
width: 100px;
visibility: hidden;
}
#esempio ul li:hover ul{
visibility:visible;
}
/*
END OF MENU TEST
*/
The containing element needs to be positioned:
li {
position: relative;
}
Then your dropdown element can be positioned to be flush to the right of its container:
li .submenu {
position: absolute;
right: 0;
}
Without seeing markup, or an example of how your page operates, I cannot be much more specific.
Fiddle: http://jsfiddle.net/jonathansampson/CXbTX/
Sidenote
As an aside, I would avoid doing this:
* { margin: 0; padding: 0; border: 0 }
This will cause you some frustration down the line, especially when it comes to styling form elements and such. I would encourage you instead to use something that will normalize the CSS in a more intuitive manner, like Meyer's Reset.
Here you can see the code: http://jsfiddle.net/LQSK3/1/
I can't get display: inline; working there for every li element.
Also got the problem width the line.png image, as it's height is the same as the font height, I want it to has 35px height with margin left and right set to 5px.
Where is the problem?
You need to update your style sheet. Please add this new style:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li { display: inline;float:left; }
#menu ul {
position: absolute;
font-family: Century Gothic, sans-serif;
font-size: 14px;
list-style-type: none;
padding: 0;
margin: 9px 0 0 123px;
width: 649px;
height: 39px;
color: #FFF;
float:left;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url('http://i.imgur.com/rzNj0.png') top right no-repeat;
width: 65px;
height: 18px;
float: left;
margin: 0px 5px;
}
You need to add float: left; to menu div,ul,li and a . Also should set width and height and margin of the a tag.
Here is a working sample : http://jsfiddle.net/YjeBs/
Hope this helps :)
EDIT:
If you want your line to extend from top to bottom of the menu div you can change your styles to:
#menu {
position: relative;
clear: both;
top: -3px;
background-color: coral;
border: 1px solid black;
width: 800px;
height: 35px;
float:left;
}
li {
float: left;
height: 35px;
display:inline;
}
#menu ul {
color: #FFFFFF;
float: left;
font-family: Century Gothic,sans-serif;
font-size: 14px;
height: 35px;
list-style-type: none;
margin: 0 0 0 123px;
padding: 0;
position: absolute;
width: 649px;
}
a { font-weight: bold; color: red; text-decoration: none; }
a:hover { text-decoration: underline; }
#menu a {
background: url("http://i.imgur.com/rzNj0.png") no-repeat scroll right top transparent;
float: left;
height: 29px;
margin: 0 5px;
padding-top: 8px;
width: 65px;
}
Hope this is you want :)
just change li { diplay: inline; } with li { display: inline; } it works.