I am using jQuery Mobile to create my mobile application. I have a plus button which appears like this:
The issue is that it is down, touching the list item. How do I make the button positioned midway between the list item and the horizontal line above it? I attempted to use absolute positioning using css, which did not work.
Here is my code:
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span>
<span style="float:right;"></span>
<br>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(</li>
</ul>
Any help would be appreciated :D
nshah, you can always give your button a negative margin-top and play around with the numbers. But it looks like there is probably more going on with the default button styles. I would look there first.
margin-top: -15px;
The floated elements needed to be cleared.
div {
overflow:hidden;
}
<div>
<span style="float:left;color:black;font-weight:bold;font-size:24px"><label for="newpostbutton">Posts</label></span> <span style="float:right;"></span>
</div>
<ul data-role="listview" data-inset="true" id="threads">
<li>No conversations :(
</li>
</ul>
http://jsfiddle.net/g9UM4/2/
Related
I basically want to keep the nav with all of its contents at the top of the HTML, but have it moved to the bottom of the page with CSS as I am doing mobile-first approach and want the navigation to appear at the top when I resize it to tablet or laptop. I tried using minus with bottom tag but it takes forever to get it to the bottom and does not seem to be the most efficient way to do it. Is the only way to move the context to the bottom of the page is to put it at the bottom of HTML file or is there a completely different way I should approach this?
This is what I have at the moment:
I want to move the underlined links to the bottom, my code:
#topnavigationmenu li {
display: inline-block;
list-style-type: none;
font-size: 3rem;
padding: 10px;
}
<div id="mainpage">
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
The easiest solution: You can create two instances of <nav> and show one on mobile and on desktop using media queries.
Possibly better solution: You can use Flexbox (and even CSS Grid I guess) to change the order, so let's say inside the mainpage div you have two sections the nav and a div with your page content:
<nav id="topnavigationmenu">
<ul>
<li> example </li>
<li> example </li>
<li> example </li>
</ul>
</nav>
<div class="page-content">
<!-- Content here -->
</div>
You can add display:flex; to mainpage and manipulate the order these appear on mobile vs desktop/tablet using media queries.
I'd suggest checking these articles out:
Ordering Flex Items
A Complete guide to Flexbox
I am trying to do this:
and mine looks like this:
Not the most beautiful thing.
My questions are:
We have a header with logo, search bar, menus and a button. How can i stack them all inline?
On the div with the background image - how can I position the headline like the one in the original site?
1) Have a look at the Navbar component documentation. Items should already be inline if implemented correctly. You can use the navbar-left and navbar-right classes to position items in the navbar.
2) You'll notice the large centre text starts at the same position as the navbar logo. This is because of the container class. I suggest you analyse some examples to see how to correctly implement the container.
After that, if you're still struggling add your styles.css to your pastebin post or better still create a Codepen - this would allow someone to be more helpful.
1- you can write float:left; or float:right; ? look for this float
2-for position an element you must create a relative div later inside create absolute div.. and you can specify settlement coordinates with top right bottom left.. look here position
I would say float is not good practice to use . Unless you really have no choice to use.
But based on how I look at it.
It's achievable using flex.
Put a display:flex on your main div
Then as for your other elements . Use display:flex-grow
It's advantageous using flex. , not only it wil solve your problem. It makes your site responsive.
Cheers
[![if you need all navigation item in one line. you have to make display:inline-block,for navigation.
change your code to:
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 nav-wrap">
<ul class="pull-left"><li></li>
</ul>
<ul class="pull-left">
<li class="formSearch">
<input type="text" placeholder="Find Freelancers" id="searchButton">
</li>
<li>Browse</li>
<li>How it works</li>
</ul>
<ul class="pull-right">
<li>
<a href="#" class="signupHover">
<span class="icon signup"></span>
<a href="#">Sign Up
</a>
</a>
</li>
<li>
<a href="#" class="loginHover">
<span class="icon login"></span>
Login
</a>
</li>
</ul>
<button type="button" id="buttonHeader">Become a freelancer</button>
</div>
/*add below css*/
.nav-wrap ul li{display:inline-block;}][1]][1]
I am trying to add a div tag to show after the <ul>. But the div keeps showing alongside the list items.
I have tried putting the <ul> to block display, and even wrapping it with a block level div tag, but the other div element still shows along side. Can anyone please help me fix this? Thanks!
<section id="sub_nav_wrapper">
<div>
<ul class="unordered_style_nav">
<li class="sub_nav_list_item"> Job Overview </li>
<li class="sub_nav_list_item"> Job Description </li>
</ul>
</div>
<div class="job_info_container">
This element should show below the ul class above
</div>
I think you should use
#elementId {
clear: both;
}
to achieve the goal.
You could change the css of one or the other to dominate the row or just put a <br> tag underneath the first <div>.
Here is the jsfiddle for it http://jsfiddle.net/8PcxE/
<div id="container">
<div id="header">
<div id="nav-container">
<ul id ="nav-list">
<li id=nav-title>lymbo</li>
<li>Playmaps</li>
<li>Map</li>
<li>About</li>
<li>My Account</li>
<li>Log Out</li>
</ul>
</div>
</div>
It is fine on a wider page, but when I run it on a small page everything is cramped and the options get pushed together making a zipper-like pattern.
My other problem is when I type something in my headers or paragraphs it will be at the top and intersecting with my navigation bar making it look like a mess.
My goal is to make a sort of "gradient" looking navigation bar hence the shadows. But that also doesn't seem to look right. If someone can give me some input on that, it would be much appreciated.
I found that after I changed my nav-container CSS to position: relative from position: fixed it works out. Are there any negative effects of doing this?
Since you've changed all the <li> to inline, the simplest solution would be to prevent wrapping on the <ul>:
#nav-list {
white-space: nowrap;
/* ... */
}
http://jsfiddle.net/mblase75/Lt72p/
Currently I am using <span>Home<span> on hover of an anchor element within a li. However, I need a drop-down on hover. Something like the same home span but two or three more items underneath it. Any help would be appreciated. Click for jsFiddle
!
It would be easier if you use <ul> and <li> rather than using <span>. Like what Parallel 2ne said it depends on your html markup. However you could also force it via Javascript/jQuery by creating a function that triggers automatically when you hover the <span> elements individually. When it triggers it applies display:block or display:hidden for the sub <span> elements.
you can do it on css and html, without any js file.
The HTML Code you need :
<ul>
<li>
<span>Menu 1</span>
<div class="sub-menu">
<ul>
<li>sub1</li>
<li>sub2</li>
</ul>
</div>
</li>
<li>
<span>Menu 2</span>
</li>
and here is the CSS you must attach :
li .sub-menu {
visibility:hidden;
opacity:0;
/*and more custom CSS as you need*/
}
li:hover .sub-menu {
visibility:visible;
opacity:1;
}
You can use transition to animate your effects .
You should take a look at using icon fonts instead of pictures, makes the whole site much smaller if you are using many images like this and is much more efficient, making a jsfiddle for you now.