I make a hybrid mobile app with PhoneGap and jQuery Mobile.
I made a footer navbar, and my problem is that the list elements of the navbar don't fill the available space of the navbar, only the 4th list element, the other 3 is shorter a bit, and remains a little white line at the bottom of the navbar. Here is the HTML code:
<div data-role="footer" data-position="fixed" data-tap-toggle="false">
<div data-role="navbar" class="ui-custom-navbar">
<ul id="navbarul">
<li><img src="img/lips.png" /><p>thing_1</p></li>
<li><img src="img/lips.png" /><p>thing_2</p></li>
<li><img src="img/lips.png" /><p>thing_3</p></li>
<li><img src="img/lips.png" /><p>thing_4</p></li>
</ul>
</div>
</div>
The problem hasn't appeared until I had put for the images the max-width: 100%; property in the CSS file, because without it the images would be too large.
Here is the CSS code:
.ui-custom-navbar a {
background-color: #3BA6D2 !important;
}
.ui-custom-navbar a:hover{
background-color: #317996 !important;
}
.ui-custom-navbar p {
color: #ffffff !important;
text-shadow: none;
margin-top: 0;
margin-bottom: 0;
text-align: center;
}
.ui-grid-c > .ui-block-a, .ui-grid-c > .ui-block-b, .ui-grid-c > .ui-block-c, .ui-grid-c > .ui-block-d {
max-height: 6em !important;
}
.ui-block-a .ui-btn-active, .ui-block-b .ui-btn-active, .ui-block-c .ui-btn-active, .ui-block-d .ui-btn-active{
border-color: #ffffff !important;
}
#navbarul li img{
border: 0;
padding: 0;
margin: 0;
max-width: 100%;
}
The result is here on the picture: image
What would be the solution?
Thank you for the answers in advance.
jQM has a CSS rule that applies a negative right margin to the last ui-btn in the navbar. You can override it by adding this CSS:
.ui-navbar li:last-child .ui-btn {
margin-right: 0;
}
Here is a working DEMO
Related
This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 6 years ago.
I can't figure out how to remove this space from my navbar and the picture..
The CSS code I have for the navbar and the image is:
a {
text-decoration: none;
color: white;
padding-right: 5px;
padding-left: 5px;
padding-top: 0;
}
a:hover {
color: black;
}
header {
background-color: #C0C0C0;
margin: 3px 60px 0;
}
li {
display: inline;
border-right: 1px solid black;
border-left: 1px solid black;
border-bottom: 1px solid black;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
nav {
position: relative;
text-align: center;
}
ul {
list-style-type: none;
}
#bikebanner {
position: relative;
left: 65px;
}
#bikebanner is the image id.
And the html goes like so:
<header>
<img src="images/bicyclebanner.jpg" id="bikebanner" alt="People riding bikes." title="Biking">
<h1 id="pagetitle">Cycling Tours</h1>
<nav>
<ul>
<li>About Us</li>
<li>Ask Us</li>
<li>Destinations</li>
<li>FAQ</li>
<li>Reviews</li>
<li>Seminars</li>
<li>Trip Prep</li>
</ul>
</nav>
</header>
Looking for a universal fit as I have other things with white space between them as well.
Thanks.
Try adding this to your css:
img{
display:block;
}
img is of type inline-block which adds a little space which is hard to find.
setting it to block should fix it.
what space you are talking about ?
Keep in mind h1 by default has white space around it
every h1-h6 tag has a margin top and bottom by default. i think if you overwrite this in your css you have what you want.
h1 {
margin: 0;
padding: 0;
}
look at this jsfiddle https://jsfiddle.net/zn7wtdLp/
This drives a lot of people crazy initially and the solution is not obvious, but images, lists and list items end up with a small space like this due to the font size inherited by or set on the img or ul. If you do nothing, the img and ul inherit the body font size (often 14px - 16px) with results in this 0.25rem (or 3.5px - 4px) space issue.
Nav Items
There are two popular solutions:
Float your list items left and make sure that you add a clearfix to your ul or its container, or
My preferred solution: Set the font-size on the ul to 0 and then the font-size on the li to 1rem (or whatever).
So my CSS would look something like this:
ul {
font-size: 0;
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
font-size: 1rem;
}
Images
If you set the image to display: block, this would kill the space below the image. This comes with its own caveats as well. For example, if you want it centered after you switch it to display: block;, you'll need to set the side margins to auto. Something like this:
header img {
display: block;
margin: 0 auto;
}
The problem is display:inline. This treats the elements like text, so if you have
<li>...</li>
<li>...</li>
you have the problem you mentioned, because the linebreaks cause a space.
Try to put your list elements like this:
<li>...</li><li>...</li>
For other solutions see here
I have a Logo at the top of my page that is designed that it has letters that hang down over the menu bar(a 'y').
With no real special coding (just setting the heights of the containers I have gotten this to look fine.
My problem is that the img blocks the links in the menu from being clickable as the links are sitting behind the transparent background of the logo.
I hope that made sense.
I will include my code, but as I said its pretty simple.
<header>
<asp:Image ID="Image1" CssClass="logo" runat="server" ImageUrl="/media/1001/logo.png" />
</header>
<menu>
<ul>
<li>Home</li>
<li>How To Order</li>
<li>Products</li>
<li class="noBorder">Blog</li>
</ul>
</menu>
CSS:
header { background-color: #3a8c86; border-bottom: solid 4px #20716b; height: 52px; }
header img.logo {margin-left:5px;}
menu { background-color: #e78898; height: 21px; }
menu ul li { float: left; list-style: none; margin: 3px 0 0 14px; padding-right: 14px; border-right: solid 1px white; }
menu ul li a { color: white; text-decoration: none; }
Thanks in advance.
Position the image and then give it a lower z-index value
header img.logo {
position:relative;
z-index:-1;
}
http://jsfiddle.net/8ydvmedr/
So, I'm working on quickly building a website theme (Wordpress) with the aid of Twitter bootstrap, and I'm running into a problem.
I've got a header thrown together, and I've got this weird gap going on inside the "pull-right" section, not sure why:
I'm not sure what the deal is, I want them sitting on the line right at the same height of the text on the left.
Anyway, I've got the following relevant sections of code:
(HTML for header section):
<!-- Header -->
<div class="row header-container">
<div class="col-md-8 col-md-offset-2">
<div class="pull-left">
<h3>CharlesBaker.net</h3>
</div>
<div class="pull-right">
<ul>
<li>Test1</li>
<li>Test2</li>
<li>Test3</li>
</ul>
</div>
</div>
</div>
(CSS for the same section):
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
}
.header-container h3 {
margin: 0;
padding: 0;
font-family: 'Montserrat', serif;
}
.header-container ul {
margin: 0;
padding: 0;
}
.header-container ul li {
display: inline;
margin: 0;
padding: 0;
}
.header-container a {
padding: 3px;
color: black;
}
.header-container a:hover {
text-decoration: none;
background-color: #880000;
color: white;
}
Not sure what the issue is, unless it's related to the fact that I'm using a tag instead of just styling a <span> or something, but since I removed the padding/margin using CSS, I wouldn't think that would be the problem.
Any help would be great. The idea is that when I hover over the links on the right, that they're enclosed in a scarlet colored box that "extends" from the 5px bottom border.
Thanks in advance!
Are you looking for this?
You need to set your .header-container as display: inline-block to align all elements inside. Therefore, you need to float your pull div elements (float and left).
Just one last change, set the width size of your header: I set 100%, but you can set whatever you like :)
CSS:
.header-container {
padding-top: 50px;
background-color: #c0c0c0;
border-bottom: 5px solid #880000;
width: 100%;
display: inline-block;
}
.pull-left {
float: left;
}
.pull-right {
float: right;
}
There is a particular line-height property for h3 tag with bootstrap.
h1, h2, h3 {
line-height: 40px;//line 760
}
So you will have to add style to negotiate this additional height.
Also another set for your ul as :
ul, ol {
margin: 0 0 10px 25px; //line 812
}
Solution :
Over-ride the ul margin as follows :
.pull-right ul{
margin: 0;
}
Over-ride the line-height for the h3 as follows :
.pull-left h3{
line-height:20px;
}
First one is pretty straight forward and gives you correct alignment straighaway. Second solution will need you to work some more with tweaking the negative-margins for .pull-right.
Debugging URL : http://jsbin.com/oToRixUp/1/edit?html,css,output
Hope this helps.
I'm creating a rounded box for a nav list in a sidebar. The issue I'm having is that I've created an extra long partially transparent image to act as the bottom of the sliding door, but no matter which element I set it as the background for- it doesn't seem to want to extend properly over the whole list, starting and stopping at the first link when used as the background for the tag. I've provided the code below:
CSS:
#sidebar{float:left;
width: 200px;
text-align: center;
margin: 0 0 0 0;
}
.nav {
} /*Attempting to display it here leads to evil. As you might expect from the code below*/
ul.nav {font-family: arial, san serif;
margin-left:auto;
margin-right: auto;
margin-top:0;
margin-bottom: 0;
text-align: left ;
width: 200px;
padding: 0;
height: 1.35em;
list-style: none;
background-image:url(headbutt2.png); /*Here, it only exists as background for the first link*/
background-repeat:none;
background-position:top;
}
#navwid{background-image:url(head2.png); /*This is the extra long image. Here, it does not display at all*/
background-repeat:none;
background-position:bottom;}
ul.nav li {
overflow: hidden;
}
ul.nav a {
text-align: center;
font-weight: bold;
font-size: 1em;
padding: 0 1em 0 1em;
height: 1.35em;
text-decoration: none;
color: black;
}
.sidetop {margin:0 auto 0 auto;
background-image:url(head3.png); /*Caption background. Displays fine with no issues.*/
background-repeat: no-repeat;
display:block;
width:200px;}
HTML:
<div id=sidebar>
<div class="navwid">
<!--Nav widget container-->
<div class="sidetop">
<!--Caption-->
</div>
<div class="nav">
<ul class="nav">
<li>Dummylink</li>
<li>Dummylink</li>
<li>Dummylink</li>
<li>Dummylink</li>
<li>Dummylink</li>
<li>Dummylink</li></ul>
</div> <!--nav end-->
</div><!--navwid end-->
</div> <!--sidebar end-->
It's because you have the nav class on both the ul and all the lis. Duplicate the css for ul.nav and change one of them to ul li.nav. For the same one, remove all the background attributes.
(What you're doing is saying "Apply this css to any ul with class nav as well as its children with class nav.")
The answer to the question, as I just realized, lies in my setting a height of 1.35em to the ul tag. It was sitting there in front of me the whole time while I spent a few hours bashing away at the keyboard. Just goes to show you can't overlook the small stuff when things get buggy.
I want to align menu text at the bottom of image how to i achieve it?
Expected output:
Image Image Image Image
[menutext] [menutext][menutext] [menutext]
Actual output :
Image[menutext] Image[menutext] Image[menutext] Image[menutext]
my Css Code:
#vilaniHeader
{
margin: 0;
padding: 0;
height: 80px;
background-color: Black;
}
#vilaniHeader h1
{
padding-left: 15%;
font: Arial;
font-size: 30px;
color: #ffffff;
font-weight: bold;
float: left;
}
#vilaniHeader #menu
{
color: #ffffff;
font: Arial;
font-size: 18px;
font-weight: bold;
padding-top: 30px;
padding-left: 30%;
}
#vilaniHeader #menu ul
{
list-style: none;
margin: 0;
padding: 0;
padding-right: 300px;
padding-bottom: 300px;
}
#vilaniHeader #menu li
{
display: inline;
margin: 0 15px 0 15px;
float: none;
text-align:center;
}
#vilaniHeader #menu a
{
text-decoration: none;
color: #ffffff;
}
#vilaniHeader #menu .menuHome
{
color: red;
clear:both;
padding-top:50px;
background-image:url:("Styles/menuHome.png") ;
vertical-align:text-top;
}
and My HTML code
<div id="vilaniHeader">
<h1>
Comany name
</h1>
<div id="menu">
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li><a href="About.aspx">Car</li>
<li><a href="About.aspx">Mobile</li>
<li><a href="About.aspx">OldThings</li>
<li><a href="About.aspx">Matrimoni</li>
</ul>
</div>
</div>
I want menu text should be align at the bottom of the image plese help me to do that.
I came up with this solution building upon the answer here from tejash. My answer validates and is search engine friendly.
I prefered to use links within a div but I imagine this will work with an ul
I use a background image that does not show if CSS is disabled
I use a span set displayed as block because a div inside an a tag does not validate
I use a class to place the image but use ids if you want different pics for each link
Change the width + heights to suit your needs
HTML
<div id="nav">
<span class="image"></span><span>About Us</span>
<span class="image"></span><span>Investors</span>
</div>
CSS
#nav a {
display:block;
float: left;
width:100px;
}
.image {
display:block;
background: url("myimage.jpg") no-repeat scroll center center transparent;
height:40px;
width:100px;
}
Make the img a block element so it takes the full width / line-breaks afterwards.
#menu li { display:block; }
That’s all.
I would suggest add some wrapper on text and make image and wrapper both display:block;
You can use span tag as an wrapper for text.
HTML
<ul>
<li><a><img src="Styles/menuHome.png" /><span>Home</span></a></li>
</ul>
CSS
li img, li span
{
display:block;
}
If you want your text to overlay your image, but at the bottom, you should try to play around with the line-height property. That will cause your text to move down, so it will be in the center of it's line.
I have two solutions for you. style1 works for items with text smaller than the image. style2 works for items with text wider than the image. Easiest is to make sure that the images are always wider or smaller than the text, so that you need only one style.
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
#menu .style1 img, #menu .style2 span {
overflow:hidden
}
#menu .style1 span, #menu .style2 img {
display:block
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li class="style1"><img src="Styles/menuHome.png" width="10" alt="" /> <span>Home</span></li>
<li class="style2"><img src="Styles/menuHome.png" width="100" alt="" /> <span>Car</span></li>
</ul>
</div>
I'm not a span-fan but it seems like you can't do it without here.
BTW, why don't you just add a br?
CSS:
#menu {
list-style:none
}
#menu li {
float:left;
text-align:center
}
HTML:
<div id="vilaniHeader">
<h1>Comany name</h1>
<ul id="menu">
<li><img src="Styles/menuHome.png" width="10" alt="" /><br />Home</li>
<li><img src="Styles/menuHome.png" width="100" alt="" /><br />Car</li>
</ul>
</div>
I guess that's the most easy and reliable solution.
You can do this way, obviously replacing the image sample I used. For the link to work, you can use a jQuery click event on LI, so it searches for the link inside the clicked LI and then opens the desired link.
http://jsfiddle.net/WcePK/
HTML
<ul>
<li class="menuHome"><img src="Styles/menuHome.png" />Home</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Car</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Mobile</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">OldThings</li>
<li style="background-image: url('http://jsfiddle.net/img/logo.png')">Matrimoni</li>
</ul>
CSS
LI {
float: left;
margin: 5px;
padding: 50px 10px 10px;
min-width: 100px;
background-repeat: no-repeat;
background-position: center 10px;
background-color: #366D93;
text-align: center;
cursor: pointer
}