For my website (www.heretoedit.com) I want to move the text in my navbar so that the "about" button is lined up with the rest of my website's text but the "contact" button stays put. Plus I want to stop the text for the "extras" and "contact" buttons from moving down when the screen size gets reduced.
Below is my navbar code, any help would be much appreciated. Thanks.
#navbar {
background-color: #0299EB;
font-family: Verdana, Geneva, sans-serif;
color: white;
font-weight: bold;
position: absolute;
width: 1000px;
min-width: 100%;
height: 70px;
top: 150px;
left: 0px;
}
#navbar ul {
list-style:none;
display:inline-block;
margin-left: 130px;
margin-top: 25px;
}
#navbar li {
float:left;
padding: 0 9px;
text-align:center;
left: 0px;
}
#navbar a:link {
padding: 0 30px;
text-decoration: none;
color: #FFF;
}
#navbar a:hover {
color: black;
text-decoration: none;
}
#navbar a:visited {
color: #FFF;
padding: 0 20px;
text-decoration: none;
}
#navbar ul {
list-style: none;
display: inline-block;
/* Add these */
margin: 25px 0px;
padding: 0;
width: 100%;
text-align: center;
}
#navbar li {
/* float: left; // Remove this */
padding: 0 9px;
text-align: center;
left: 0px;
display: inline-block; /* Add this */
}
Related
I found similar topics, but it did not work.
1) I am trying to show an image when I hover over each item on the navigation bar, but it is not showing up.
2) I want to create a single line of repeated images, but it is not showing up under this tag:
<div id= "coffeeBean"></div>
Example: https://jsfiddle.net/RE006/LLo4246b/
jsfiddle and Stackoverflow won't let me upload my image.
CSS:
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
}
#coffeeBean {
background-image: url(images/beans.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
body {
background-color: #c4c7c6;
color: #000;
font-family: "Times New Roman", Times, serif;
font-size: 62.5%;
position: relative;
}
.container {
background-color: #fff;
margin: 0px auto;
width: 80%;
}
nav ul {
background-color: #dcedec;
float: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 1rem;
list-style: none;
padding-left: 1em;
padding-top: 1em;
width: 100%;
}
nav li {
float: left;
padding: .5em;
}
nav a, nav a:visited {
color: #000;
padding: 5px 5px 5px 15px;
text-decoration: none;
}
nav a:hover, ul.nav a:active, ul.nav a:focus {
color: #fff;
position: relative;
}
nav li a:hover::after {
background-image: url("http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png");
background-repeat: no-repeat;
background-size: cover;
border-top: 1px solid red;
content: "";
display: block;
height: 40px;
position: absolute;
top: 0;
width: 40px;
opacity: .5;
z-index:-1;
}
nav li a{z-index:9999;}
header, main, footer {
display: block;
}
header h1 {
background-color: #858070;
color: #fff;
font-size: 2rem;
letter-spacing: 2px;
padding: 1.25em .5em .25em 1em;
width: 100%;
}
img {
filter: alpha(opacity=35); /* For IE8 and earlier */
height: 200px;
margin: 0px auto;
opacity: 0.35;
position: absolute;
left: 30%;
top: 200px;
}
main {
font-size: 1rem;
padding: 1.5em;
}
label, input, select {
margin: 10px 0px;
}
#coffeeBean {
background-image: url(http://www.tutomarket.com/wp-content/uploads/2017/03/H-I-W-1.png);
background-repeat: repeat-x;
height: 30px;
position: absolute;
}
footer {
clear: both;
font-size: 1rem;
margin-top: 50px;
padding: 1em;
position: relative;
text-align: center;
}
Please insert content:'' and width property like below will work
nav li a:hover:after { border-top: 1px solid red;
background-image: url("images/bean.png");
background-repeat: no-repeat;
display: block;
position: absolute;
top: 0px;
content:'';
width:100%;
}
I am having an issue with a sub menu. You can see at http://responsiveradio.radiobrandbuilders.com by hovering over the Home link.
The padding does not show up for the sub menu li a items but as soon as you hover over them the padding works.
I'm sure it is something simple I am overlooking but any help would be appreciated.
nav {
height: 60px;
}
nav ul {
list-style: none;
margin-top: 19px;
padding: 0;
}
nav li {
display: inline-block;
margin: 0;
position: relative;
}
nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
}
nav li:last-child {
margin-right: 0;
}
nav li a:hover {
color: #fff;
cursor: pointer;
}
.sub-menu {
display: none;
left: 0;
padding: 0;
position: absolute;
top: 10px;
width: 200px;
}
.sub-menu li {
display: block;
margin: 0;
padding: 0;
}
.sub-menu li a {
color: #fff;
width: 100%;
}
.sub-menu li a:hover {
background: #fff;
color: #000;
}
Changes in your css to be made... A tag is inline tag ...so you have to make is display block.
nav li a {
color: #000;
font-size: 16px;
font-weight: 500;
padding: 15px;
text-transform: uppercase;
display: block; /*changes done */
}
nav ul {
list-style: none;
padding: 0;
margin-top: 0; /*changes done */
}
.sub-menu{
display: none;
left: 0;
padding: 0;
position: absolute;
top: 52px; /*changes done */
width: 200px;
}
in css
.sub-menu li{
padding:15px;
}
In your css you set padding:0px;
modify your style like
.sub-menu li a {
color: #fff;
width: 100%;
display: inline-block;
}
.sub-menu li a{padding:0}
add this style and refresh your page.
So I have a div that is supposed to have 100% height. It's only parent element is <body>, so 100% should be the height of the window. But instead of spanning the height of the screen, it only is as high as the container element inside it. The funny thing is, if I use fixed positioning, it does what I want it to. Alas, I can't use fixed in the site layout. Here is my css. If you would like to see what the site looks like right now, here is the link: http://ion.comli.com/projects/
body, ul {
margin: 0;
padding: 0;
}
body {
background: url('/images/background.png') no-repeat fixed;
}
/* CONTENT */
.content{
margin-left: auto;
margin-right: auto;
position: absolute;
top: 50px;
left: 15%;
height: 100%;
width: 70%;
background-color: #ffffff;
}
/* END CONTAINER*/
/* CONTAINER */
.container{
background: #ffffff;
margin: 5% 10%;
text-align: center;
}
.container .title a {
font-family: Franchise, "sans-serif";
font-size: 48px;
color: black;
line-height: 48px;
text-align: center;
text-decoration: none;
}
.container .date {
font-family: Ubuntu, "sans-serif";
font-size: 12px;
color: #666666;
line-height: 12px;
text-align: center;
text-decoration: none;
}
.container .body {
font-family: Ubuntu, "sans-serif";
font-size: 16px;
text-align: left;
}
/* END CONTAINER */
/* PROJECT */
.project {
display: block;
margin: 5% auto;
height: 100px;
width: 500px;
border-radius: 10px;
background: url("/images/background.png");
opacity: 0.5;
}
.project h2 {
font-family: Franchise;
font-size: 48px;
color: white;
text-align: center;
}
/* END PROJECT */
/* NAVIGATION */
nav ul {
background-color: #1b1b1b;
display: table;
list-style: none;
position: fixed;
top: 0;
height: 50px;
width: 100%;
box-shadow: 0 0 6px #888888;
z-index: 1;
}
nav ul li {
float: left;
}
nav ul li a {
display: table-cell;
height: 50px;
line-height: 50px;
padding: 0 65px;
font-family: Ubuntu;
font-size: 16px;
color: #ffffff;
text-decoration: none;
background-color: #292929;
}
nav #title {
font-family: Lobster;
font-size: 36px;
line-height: 50px;
border-right: 1px solid #ffffff;
background-color: #1b1b1b;
}
nav #menu {
padding: 0 25px;
background-color: #1b1b1b;
}
nav #menu:hover {
box-shadow: none;
background-color: #292929;
}
nav li:hover #menu {
box-shadow: none;
background-color: #292929;
}
nav ul ul {
background: #292929;
display: none;
position: absolute;
top: 100%;
right: 0px;
width: 15%;
}
nav ul ul li {
background: #292929;
float: left;
position: relative;
clear: both;
}
nav ul li:hover > ul {
box-shadow: none;
display: block;
}
/* END NAVIGATION */
/* SCROLLBAR */
/* END SCROLLBAR */
Any way I can get this div to span the whole 100%? I'm pretty sure there is a simple answer to this question, but I can't find it. Thanks in advance!
You have to make sure all parents of .content have a height defined.
So in your case what is missing is:
html, body {
height: 100%;
}
Alternative
Or you could position .content as fixed and you'd have the same effect but with a different approach
.content {
position: fixed;
top: 0;
left: 0;
height: 100%;
}
Make body 100% high
html, body {
height: 100%;
}
So basically I need to produce a menu like this in Wordpress:
Where the red bar is the width of the page and not fixed so can shrink with resize.
And the submenu is centred
I currently have:
And the CSS is:
#access {
clear: both;
display: block;
margin: 0 auto -10px;
width: 100%;
text-align:center;
}
#access ul {
font-size: 13px;
list-style: none;
margin: 0 0 0 -0.8125em;
margin-top: 0.3em;
padding-left: 0;
display:inline-block;
/*Font*/
letter-spacing:1px;
text-transform:uppercase;
color: #FFF;
}
#access li {
float: left;
position: relative;
}
#access a {
color: #eee;
display: block;
line-height: 2.333em;
margin: 0 1.2125em;
margin-bottom: 0.5em;
padding-top: 0.5em;
text-decoration: none;
/* Same colour as background */
border-bottom: 1px solid #000;
}
#access ul ul {
display: none;
position: inherit;
top: 0; left: 0;
margin: 0 auto;
width: 100%;
z-index: 9999;
float: left;
}
#access ul ul a {
color: #444;
font-size: 13px;
font-weight: normal;
height: auto;
line-height: 1.4em;
padding: 10px 10px;
display: inline-block;
}
#access ul ul li {
display: inline-block;
}
Any help
Check this jsfiddle created for you
I had defined a new division sub-menu-bg after the menu code and given a red background to it. Also i had edited your CSS to achieve correct horizontal drop-down menu.
Hope this will solve your problem.
My navigation looks fine in Chrome but in Firefox and IE, the list items appear below (about 15 pixels below) the nav container div. Can someone please help me?
Here is the link: http://jwstudio.us/bkpa/
The CSS:
nav {
position: relative;
background-image: none;
background-repeat: no-repeat;
float: left;
background-color: #DBD0CA;
z-index: 3;
margin-top: -115px;
margin-left: -2px;
height: 29px;
width: 945px;
margin-right: 10px;
background-position: left;
}
nav ul {
position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;
}
nav ul li a {
position: relative;
height: 27px;
float: left;
z-index: 5;
text-align: left;
padding-left: 11px;
list-style-type: none;
text-decoration: none;
color: #8F181B;
font-weight: normal;
font-size: 16px;
font-family: Verdana, Geneva, sans-serif;
padding-top: 3px;
padding-right: 10px;
padding-bottom: 0px;
background-color: #DBD0CA;
}
nav ul li a:hover, a:active {
position: relative;
height: 27px;
color: #FFF;
background-image: url(images/nav_rollover.png);
z-index: 6;
padding-top: 3px;
}
You need to reset the padding on the ul as it is the left padding that is causing the element to go to the next line:
nav ul {
position: relative;
display: inline;
list-style-type: none;
height: 27px;
z-index: 4;
padding-top: 3px;
margin-top: -115px;
padding: 0; // added
}