CSS
#leftFlyBanner {
position:fixed;
_position:absolute;
width: 118px;
top:180px;
left:10px;
float:left;
}
#leftFlyBanner ul {
margin:0;
padding:0;
list-style: none;
width:118px;
float:left;
}
#leftFlyBanner ul li {
display: inline;
margin:0 ;
padding:0;
float:left;
}
HTML
<div id="leftFlyBanner">
<ul>
<li><TITLE IMAGE></li>
<li id="s2">
<IMAGE1 />
<IMAGE2 />
<IMAGE3 />
</li>
</ul>
</div>
When I open in IE & Chrome there is space between TITLE IMAGE and images below.
How can I remove that vertical space?
Thanks in advance.
#leftFlyBanner img {
display: block;
}
Add
#leftFlyBanner ul li { line-height:0 }
http://jsfiddle.net/pxfunc/rY3DJ/
Related
When I resize my window and open my hamburger side menu the red menu item color is not spread over the whole menu item as you can see in the navbar. I am not a CSS expert so I decided to ask this question over here.
Here is a screenshot to clarify where I am talking about if you didn't understand.
Screenshot: https://gyazo.com/06691a8d7fca1ec8fbc9a5c5594cd596
How it has to be: https://gyazo.com/4f84faa183513f16a2eac647cdc75e25
Here is my source code:
$(document).ready(main);
var contador = 1;
function main(){
$('.menu_bar').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
};
/*------Nav-------*/
header {
width:100%;
}
header nav {
width:100%;
background:#2f354e;
z-index:11;
}
.menu_bar {
display:none;
}
header nav ul {
overflow:hidden;
list-style:none;
margin: 0px;
padding: 0px;
}
header nav ul li {
float:left;
}
header nav ul li a {
color:#fff;
padding:14px;
display:block;
text-decoration:none;
}
header nav ul li span {
margin-right:10px;
}
header nav ul li a:hover {
background:red;
text-decoration: none;
color:#ffffff;
}
#media screen and (max-width:800px ) {
header nav {
width:150px;
height:100%;
left:-100%;
margin:0px;
position: fixed;
}
header nav ul li {
display:block;
float:left !important
}
.menu_bar {
display:block;
width:100%;
background:#ccc;
text-align:center;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
background:#2f354e;
color:#fff;
text-decoration:none;
font-weight: bold;
font-size:25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.menu_bar span {
float:right;
font-size:30px;
}
}
/*--------End of the nav-------*/
/*-------- Generic styles-------*/
body{
overflow: scroll;
margin:0px;
font-family: sans-serif;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<header>
<div class="menu_bar">
<span class="fa fa-bars"></span>Fastmovie Renesse
</div>
<nav>
<ul>
<li><span class="fa fa-home"></span>Home</li>
<li><span class="fa fa-film"></span>Films</li>
<li><span class="fa fa-envelope"></span>Reserveren</li>
<li><span class="fa fa-info-circle"></span>Over ons</li>
<li style="float:right"><span class="fa fa-sign-in"></span>Login</li>
</ul>
</nav>
</header>
header nav ul li {
display:block;
float:left !important
}
This simply needs to be float:none instead, so that the items go over the full width, instead of shrinking to what their content demands only. (And no need for the !important, at least not within the example you have given.)
Just put the width:100% on li tag in smaller resolution.
Example: put width:100% on this part of your css code.
#media screen and (max-width: 800px)
header nav ul li {
display: block;
float: left !important;
width: 100%;
}
Here is jsfidle link of your code working DEMO
This worked for me, add the width: 100%; in your media query
#media screen and (max-width: 800px)
header nav ul li {
display: block;
float: left !important;
width: 100%;
}
Set width: 150px; to header nav ul li a:hover in #media screen and (max-width:800px ) {}
Here is JSFiddle:https://jsfiddle.net/k1cbfh70/1/
$(document).ready(main);
var contador = 1;
function main(){
$('.menu_bar').click(function(){
// $('nav').toggle();
if(contador == 1){
$('nav').animate({
left: '0'
});
contador = 0;
} else {
contador = 1;
$('nav').animate({
left: '-100%'
});
}
});
};
/*------Nav-------*/
header {
width:100%;
}
header nav {
width:100%;
background:#2f354e;
z-index:11;
}
.menu_bar {
display:none;
}
header nav ul {
overflow:hidden;
list-style:none;
margin: 0px;
padding: 0px;
}
header nav ul li {
float:left;
}
header nav ul li a {
color:#fff;
padding:14px;
display:block;
text-decoration:none;
}
header nav ul li span {
margin-right:10px;
}
header nav ul li a:hover {
background:red;
text-decoration: none;
color:#ffffff;
width: 150px;
}
#media screen and (max-width:800px ) {
header nav {
width:150px;
height:100%;
left:-100%;
margin:0px;
position: fixed;
}
header nav ul li {
display:block;
float:left !important
}
header nav ul li a:hover {
width: 150px;
}
.menu_bar {
display:block;
width:100%;
background:#ccc;
text-align:center;
}
.menu_bar .bt-menu {
display:block;
padding:20px;
background:#2f354e;
color:#fff;
text-decoration:none;
font-weight: bold;
font-size:25px;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
}
.menu_bar span {
float:right;
font-size:30px;
}
}
/*--------End of the nav-------*/
/*-------- Generic styles-------*/
body{
overflow: scroll;
margin:0px;
font-family: sans-serif;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<header>
<div class="menu_bar">
<span class="fa fa-bars"></span>Fastmovie Renesse
</div>
<nav>
<ul>
<li><span class="fa fa-home"></span>Home</li>
<li><span class="fa fa-film"></span>Films</li>
<li><span class="fa fa-envelope"></span>Reserveren</li>
<li><span class="fa fa-info-circle"></span>Over ons</li>
<li style="float:right"><span class="fa fa-sign-in"></span>Login</li>
</ul>
</nav>
</header>
Here's the jsfiddle:
http://jsfiddle.net/cnf6cjm2/
Here's the HTML:
<div id="header"><ul>
<li>Link 1</li>
<li>Another Link 2</li>
<li>Link 3</li>
</ul></div>
Here's the CSS:
body {
margin:10px;
padding:0;
}
#header {
height:92px;
background:#58585a;
position:relative;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
position:absolute;
top:35px;
right:16px;
}
#header ul li {
display:inline;
font-size:1.25em;
}
#header ul li a {
color:#ffffff;
text-decoration:none;
margin-left:1.5em;
padding:35px 0;
}
#selected-nav {
background:#ffa31a;
}
I have a header div that has a horizontal ul in it for a navigation. I have the ul absolutely positioned so that it is on the right side of the header div and vertically centered. What I want to do is highlight the current page in the navigation. I want the highlight to be a background color on the link and I want the link bg to fill up exactly the whole height.
The best thing I have come up with, see above jsfiddle, is to try and set just the correct padding on the link so that when you change the background color it will take up the desired height. It works on Chrome but it's off by one pixel on the top and bottom in FF and it's off by one pixel on the bottom in IE. Here's a screen shot of those:
I also tried setting the padding to go over quite a bit and then hide the overflow-y, but that did not work.
See this solution
http://jsfiddle.net/keLsc2op/
CSS
body {
margin:10px;
padding:0;
}
#header {
height:92px;
background:#58585a;
position:relative;
}
#header ul {
margin:0;
padding:0;
list-style-type:none;
position:absolute;
top:0px;
height:100%;
line-height:86px;
right:16px;
}
#header ul li {
display:inline;
font-size:1.25em;
}
#header ul li a {
color:#ffffff;
text-decoration:none;
margin-left:1.5em;
height:100%;
display:inline-block;
}
#selected-nav {
background:#ffa31a;
}
body {
margin: 10px;
padding: 0;
}
#header {
height: 92px;
background: #58585a;
float: left;
}
#header ul {
margin: 0;
padding: 0;
list-style-type: none;
float: left;
}
#header ul li {
float: left;
font-size: 1.25em;
}
#header ul li a {
color: #ffffff;
text-decoration: none;
margin-left: 1.5em;
line-height:4.6;
}
#selected-nav {
background: #ffa31a;
}
<div id="header">
<ul>
<li>Link 1
</li>
<li id="selected-nav">Another Link 2
</li>
<li>Link 3
</li>
</ul>
</div>
I built a simple dropdown menu, but in Chrome on hover the size of the tag reduced by 3px. (jump effect)
I don't understand where's the problem, here is my css:
#primary {
width:400px;
background:yellow;
height:48px;
margin:0;
padding:0;
}
#primary li {
display:table;
width:120px;
float:left;
border-right:1px solid blue;
position:relative;
}
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
}
#primary #secondary {
display:none;
margin:0;
padding:0;
}
#primary li:hover #secondary {
position:absolute;
top:48px;
left:0;
background:red;
display:block;
}
It seems Chrome adds extra hidden margin/padding.. In FF, IE it's working.
Online demo: http://jsfiddle.net/A3XDR/
Change:
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
}
to
#primary li a {
display:block;
text-align:center;
height:48px;
line-height: 48px;
}
If you want to keep your vertical alignment and table-cell you could add width: 100%:
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
width: 100%;
}
This should do the trick but I am not sure why is it behaving like this. It is surely because of secondary ul but not sure why.
#primary li a {
display:table-cell;
text-align:center;
height:48px;
vertical-align:middle;
width:100%;
}
Fiddle
Found a way to do it but it involves changing your markup, adding a span within the link:
HTML:
<ul id="primary">
<li>
<span>Nav 1 is long and wraps some</span>
<ul id="secondary">
<li>Nav 1-1</li>
<li>Nav 1-2</li>
<li>Nav 1-3</li>
<li>Nav 1-4</li>
</ul>
</li>
<li><span>Nav 2</span></li>
<li><span>Nav 3</span></li>
</ul>
CSS:
#primary li a {
display:table;
height:48px;
width: 100%;
}
#primary li a > span {
display: table-cell;
text-align: center;
vertical-align:middle;
width: 100%;
}
Fiddle | JSBin (for IE8 testing, jsFiddle doesn't work on IE8)
(You can also change #primary li to display: block if that table-in-table bothers you; seems to work: Fiddle | JSBin)
No jumping for me in the older Chrome (~v26) that has issues with just the simple width: 100%, or with the long nav entry that wraps which jumps for me even on current Chrome (~v32). Also seems happy in Firefox, IE8, IE10, Opera, and Midori.
(This solution is only possible because of the direction putvande and Lokesh pointed in. Please show your support for their efforts.)
I'm trying to achieve something quite tricky in CSS, but also quite "simple" :
Explanation:
Some element with text inside it (unknown width) with 2 elements on each side of it, both occupying the remaining space.
I thought of going with display:table for the container and for the 3 children going display:table-cell but it just doesn't work, or I don't know how to use it properly..
Demo playground
HTML
<header>
<h1>Some title</h1>
</header>
CSS
header{
display:table;
text-align:center;
width:50%;
}
header:before, header:after{
content:'';
display:table-cell;
background:red;
width:50%;
border-radius:5px;
}
header > h1{ white-space:pre; padding:0 10px; }
This is using display: table and display: table-cell to make this bar and text.
HTML
<div class="textBarContainer">
<div class="textBarBefore"></div>
<div class="textBar">Text</div>
<div class="textBarAfter"></div>
</div>
CSS
.textBarContainer {
display: table;
width: 100%;
}
.textBar {
display: table-cell;
padding: 0 10px;
white-space: pre;
}
.textBarAfter, .textBarBefore {
background: #cc0000;
width: 50%;
height: 20px;
display: table-cell;
content:' ';
border-radius: 5px;
}
Demo
<ul class="columnlayout">
<li>
<div>Left content</div>
</li>
<li class="centercontent">
<div>middle text content</div>
</li>
<li>
<div>Right content</div>
</li>
</ul>
//columns layout
ul.columnlayout
{
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
> li
{
float:left;
margin:0;
list-style-type:none;
width:200px;
&.centercontent
{
width:auto;
}
ul.xoxo
{
list-style-type: none;
li
{
list-style-type: none;
}
}
}
}
oh, pardon my .scss!
ul.columnlayout {
margin:0;
width:100%;
display:block;
clear:both;
list-style-type: none;
}
ul.columnlayout li {
float:left;
margin:0;
list-style-type:none;
width:200px;
}
ul.columnlayout li.centercontent {
width:auto;
}
I'm wondering if anyone can help me to sort out why my navigation menu appears to be in my main div, when it's not coded that way. I'm guessing the CSS is the problem. Lots of code I'm afraid, but I don't know where the problem is, so I can't isolate it....
<!DOCTYPE html>
<html>
<head>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="header"><p><img src="images/logo.png" alt="logo" /></p></div><!--header-->
<div id="navbar">
<div id="holder">
<ul>
<li>Home</li>
<li>My Approach</li>
<li>Testimonials</li>
<li>Fees</li>
<li>Contact</li>
</ul>
</div><!--holder(navbar)-->
</div><!--navbar-->
<div id="main">main</div><!--main-->
</div><!--container-->
<body>
</html>
CSS:
body {
background-image: url(images/colorful7.jpg);
}
#container {
width: 960px;
float: none;
margin: auto;
height: auto;
}
#header {
height: 350px;
width: 940px;
padding: 10px;
}
#navbar {
background: none;
height:40px;/*40*/
width:960px;
float:right;
}
#navbar #holder {
height:40px;
width:725px;/*725*/
float: right;
}
#navbar #holder ul {
list-style:none;
margin:0;
padding:0;
}
#navbar #holder ul li a {
text-decoration:none;
float:left;
line-height:20px;
font-family:Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:600;
color:#660033;
border-bottom:none;
padding:10px;
width:120px;
text-align:center;
display:block;
background:#FFC;
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
margin-left: 5px;
}
#navbar #holder ul li a:hover {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink {
background:#660033;
color:#FFC;
}
#holder ul li a#onlink:hover {
background:#660033;
color:#white;
text-shadow:1px 1px 1px #000;
}
#main{
background-color: #FFC;
height: 400px;
width: 960px;
padding: 10;
}
Here's a live jsFiddle
Add
clear: both;
to the #main-Rule to clear the floating after the nav bar. Fiddle: http://jsfiddle.net/GGSk2/2/
If you think that the problem lies in the CSS, try to deactivate the css and see what happens. You can track down the faulty bit by adding back the css piece after piece.
I usually use Firefox with Firebug to help me find out such problems. It allows you to deactivate or modify CSS and HTML on the fly. IE and safari allows it as well I reckon.
delete float:right; from #navbar
#navbar {
background: none;
height:40px;/*40*/
width:960px;
}
http://jsfiddle.net/G26TD/10/
I have made changes to CSS & its working
Working fiddle: http://jsfiddle.net/G26TD/11/
Don't use ID inside a id to style its will slow down CSS
Here is a post how to write css efficiently: https://developer.mozilla.org/en/CSS/Writing_Efficient_CSS