I'm working on a new responsive design and I'm having an issue with my menu that I cannot figure out. Basically I want the background of the menu item to turn white when you hover over it and the text to turn blue. Right now, the text turns blue but the background will not turn white.
HTML Code:
<div class="header">
<div class="header_content">
<div class="logo">
<img src="images/new_logo.png" class="hdr_logo">
</div>
<div class="main_menu">
<ul>
<li>ABOUT US</li>
<li>OPERATIONS BRANCH</li>
<li>LOGISTICS BRANCH</li>
<li style="border-right:0;">COMMUNITY</li>
</ul>
</div>
</div>
</div>
CSS:
.header {
background: url('images/header2.png') repeat-x top left;
width: 100%;
height: 150px;
color: #FFF;
margin: 0;
padding: 0;
}
.header_content {
width: 960px;
margin: 0 auto;
height: 150px;
padding: 0;
}
.logo {
float:left;
width:120px;
}
.main_menu {
float:left;
height: 30px;
margin-top: 120px;
line-height: 30px;
padding: 0;
width: 830px;
}
.main_menu ul {
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
overflow: hidden;
height: 30px;
}
.main_menu li {
float: left;
border-right: 1px solid #FFF;
text-align: center;
padding: 0;
margin: 0;
padding-left: 2%;
padding-right: 2%;
overflow: hidden;
height: 30px;
cursor: pointer;
}
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: rgb(33,47,57);
}
EDIT: Problem Resolved
The floated li was not a block element so you could not change it's background color. As soon as I added display:block; to the li it resolved this issue.
Seems to work fine for me: http://jsfiddle.net/s3JT9/
.main_menu li:hover {
background-image: none;
background-color: #FFF;
color: red;
}
I changed the color to red to illustrate.
Related
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/
Hi and thanks in advance,
I am new to this so sorry at the outset if I have trouble explaining. I have a web page and a CSS sheet. The page has three images, one above the other on the left of the contents part of the page and I have a list to hold some text that should display to the right of each image, however the text is squashed up to just one character in width and flows down and overlaps the list items below rather than appear in a single line inline with corresponding image.
Here is the HTML & CSS:
<div style="clear:both"></div>
<div id="content">
<div id="subscribe">
<h3>Subscribe!</h3><br></br>
<ul>
<li id="phone">Call me via Phone</li>
<li id="email">Get Email Updates</li>
<li id="twitter">Follow us on Twitter</li>
<div style="clear:both"></div>
</ul>
</div>
</div>
#content {
width: 300px;
float: left;
padding-top: 20px;
}
#subscribe {
width: 300px;
padding-top: 20px;
}
#subscribe h3 {
font-size: 20px;
}
ul#subscribe li {
list-style: none;
display:inline-block;
width: 300px;
padding-bottom: 5px;
padding-left: 35px;
margin:0 0 10px 0;
}
ul#subscribe li a {
list-style: none;
font-size: 18px;
padding-left: 40px;
}
li#phone {
list-style: none;
background: url(images/phone.png) no-repeat;
width: 36px;
height: 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
li#email {
list-style: none;
background: url(images/email.png) no-repeat;
width: 36px;
height: 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
li#twitter {
list-style: none;
background: url(images/twitter.png) no-repeat;
width: 36px;
height: 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
It's because you gave a width to your li, I made a fiddle here
Instead of giving a width to your li you have to resize the background-image
li#phone {
list-style: none;
background: url(http://fakeimg.pl/300/) no-repeat;
background-size: 36px 36px;
padding-left: 40px;
margin:0 0 20px 0;
}
I'm creating an image grid. it works fine outside contentwrap but when in contenwrap all the images flow outside the contentwrap. whats wrong with my code? I'm facing one more problem is image caption. I'm unable to add caption to images.
#contentwrap {
width: 850px;
float: left;
margin: 0 auto;
}
#content {
background: #FFFFFF;
border-radius: 10px;
border: 1px solid #ebebeb;
margin: 5px;
}
ul#grid {
list-style: none;
margin: 0 0 0;
width: 550px;
}
#grid li {
float: left;
margin: 0 0 10px 5px;
}
.portfolio {
padding: 0px;
margin-left: 0; margin-right: 0; margin-top:0;
width: 513px;
font-family: arial, serif;
text-align: center;
}
#grid li a:hover img {
opacity:0.3; filter:alpha(opacity=30);
}
#grid li img {
background-color: white;
padding: 7px; margin: 0;
border: 1px dotted #58595b;
width: 120px;
height: 98px;
}
#grid li a {
display: block;
}
HTML:
<div id="contentwrap">
<div id="content">
<div class="portfolio">
<ul id="grid">
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
<li><img src="image.jpg"></li>
</ul>
</div>
</div>
</div>
Here is working
JsFiddle
simple add
height:auto;
overflow:auto;
to class = MyBox
I am trying to create a horizontal top header with a main nav stacked on top of a sub nav. Both navs are created using <ul> with floated <li> items. The sub nav has extra horizontal space to the left whose cause I cannot discern (see the circled red area in the picture below):
Here's a fiddle: http://jsfiddle.net/W3qqh/
Questions
What's causing the space?
How can I eliminate the space?
Also feel free to suggest other alternatives for achieving the desired menu, if you believe my approach could be improved.
HTML
<div class="header">
<div class="home-logo">HOME</div>
<div class="main-nav">
<ul>
<li><a>Explore</a></li>
<li><a>Earn</a></li>
<li><a class="selected">Merchants</a></li>
</ul>
</div>
<div class="sub-nav">
<ul>
<li><a>Be Secure</a></li>
<li><a>Get Help</a></li>
<li><a>Contact Us</a></li>
</ul>
</div>
</div>
CSS
* { box-sizing: border-box; }
.header { height:99px; width: 100%; position:fixed;}
.header.glass {opacity: 0.8; filter: alpha(opacity=80);}
.home-logo { background: pink; height:99px; width: 239px; position: fixed; }
.main-nav { color: white; position: relative; left:239px; background: #25c0df; height: 66px; line-height:66px; padding: 2px; width: 100%; text-transform: uppercase; font-size: 14px;}
.main-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.main-nav li { float:left; margin-left: 40px;}
.main-nav li a.selected { border-top: 2px solid white; }
.main-nav li a:hover { border-top: 2px solid white; }
.sub-nav { font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; width: 100%; text-transform:uppercase; }
.sub-nav ul { height: 0; padding: 0; margin: 0; list-style-type: none; }
.sub-nav li { float:left; margin-left: 40px;}
In .sub-nav, add:
float:left;
position:relative;
left:239px;
In .main-nav, add:
float:left;
Solution: You had to add float:left; in both .main-nav and .sub-nav and you had to add position:relative; and left:239px; because of the logo on the left.
Your problem would have been solved with just having float:left; but you needed to added position and left. Otherwise, your text would be behind the logo.
JSFiddle Demo
UPDATE
In .main-nav, you have:
padding: 2px;
If you remove that and add position and left in .sub-nav, you wouldn't need float property.
JSFiddle Demo
Is this more what you were looking for: http://jsfiddle.net/W3qqh/2/?
First, set the outermost container to 100% width. Then float the three inner container divs and assign a width. Then apply a float to all <li> items (or use display: inline-block).
.header { width: 100%; }
.home-logo { width: 33.333%; float: left; background: pink; height:99px; }
.main-nav { width: 66.666%; float: left; color: white; background: #25c0df; height: 66px; line-height:66px; padding: 2px; text-transform: uppercase; font-size: 14px;}
.sub-nav { width: 66.666%; float: left; font-size: 12px; color: #4ebeb2; background: #26b; height: 33px; line-height: 33px; text-transform:uppercase; }