Pure css pure-menu-heading not aligning with items in Firefox? To see run this on Firefox,http://purecss.io/layouts/marketing/. 'YOUR SITE' pure-menu-heading is above the pure-menu-item items but aligns well in Chromium and Opera. Also class 'header' is not in
<link rel="stylesheet" href="/combo/1.18.13?/css/layouts/marketing.css">?
Just add float: left to .pure-menu-heading. Like:
.pure-menu-heading {
float: left;
}
Hope this helps!
you need to float:left the "your site" (.home-menu .pure-menu-heading) that fixes it
the reason this happens in firefox (according to this answer Firefox unexpected line break using floats & overflow hidden - and also checked) is that firefox set default white-space to nowrap.
so setting the wrapper div .pure-menu.pure-menu-fixed to white-space:normal also fixes this issue and might actually be a better solution for you
change your HTML like below
<div class="home-menu pure-menu pure-menu-horizontal pure-menu-fixed">
<ul class="pure-menu-list">
<li class="pure-menu-item pure-menu-selected">Home</li>
<li class="pure-menu-item">Tour</li>
<li class="pure-menu-item">Sign Up</li>
</ul>
<a class="pure-menu-heading" href="">Your Site</a>
</div>
put anchor tag after ul
Related
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/
Answered
I begin to think I am losing my mind...
Currently I'm trying to set up a simple top navigation which is margin-0-auto-ed in the header. It contains five children <li>-elements with each a width of 200px. If I can still calculate correctly, that equals 1000px in width.
But to hold all children the top <ul>-element requires 1016px width. I just don't get where this comes from. All margins, paddings etc. are removed by a CSS Reset.
Code is as follows:
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
<li class="head-menu-item">Navlink</li>
</ul>
</div>
</div>
CSS
#header-wrapper { width: 100%; height: 56px; position: relative }
#header { width: 100%; height: 56px; background: #111; position: absolute; }
#head-menu { width: calc(5*200px); margin: 0 auto;}
.head-menu-item { display: inline-block }
.head-menu-item-link { display: inline-block; padding: 20px; width: calc(200px - 40px); text-align: center }
Update 29.09.13
If anyone wonders, instead of commenting out the white spaces or going for some negative left-margins, I just used this syntax:
</li><li class="head-menu-item">Navlink
</li><li class="head-menu-item">Navlink
That has done it easily, without altering the code too much and keeps it clean.
The problem is inline elements add a extra space between each other because of the empty space on your html ( even a simple line-break ) here is your fix jsfiddle
HTML
<div id="header-wrapper">
<div id="header">
<ul id="head-menu">
<li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li><!--
--><li class="head-menu-item">Navlink
</li>
</ul>
</div> </div>
display:inline-block is inserting spaces in between the li's (that is, displaying the white space shown in the HTML). You can see this more clearly if you put a background color on the li's.
or else if you just want your html to look neat, you can add a negative margin to the display:inline-block elements (to account for the gaps between them in html code), but it would work only if you have a kinda fixed layout, which rarely changes, and you are too adamant to mess up your code by removing spaces or adding comments
I don't have enough 'reputation' to comment, but I would like to restate something VinÃcius Moraes said, WHITE SPACES in you code ie...
<div id="foo"></div>
<div id="bar"></div>
<div id="thing"></div>
as seen here by putting on different lines (creating a coded white space) can make a a dramatic effect, where putting...
<div id="foo"></div><div id="bar"></div><div id="thing"></div>
can create the desired effect, as I found after spending several hours wondering why my three 's where next lining when positioned perfectly with a jquery resize. Thank you again VinÃcius Moraes for pointing out this rookie mistake.
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/
So, I have the following HTML structure:
<div id="category-filter">
<div class="column full">
<ul class="float-clear" id="category-filter">
<li>All Categories</li>
<li>Educator Workshops</li>
<li>Exhibitions</li>
<li>Family Activities</li>
<li>Films</li>
<li>Lectures + Gallery Talks</li>
<li>Music</li>
<li>Other Activities</li>
<li>Tours</li>
<li>Workshops</li>
</ul>
</div>
</div>
Which, after styling produces the following in Firefox:
However, in Webkit, the link text wraps:
The LI tags are floated left and should grow with the size of anchor inside them and then wrap as needed inside the container which has a width set. Any ideas why the links are wrapping in Webkit?
Add white-space:nowrap; to the links to avoid break line.
And <ul> element must only contain <li>.
It's guesswork without seeing your CSS, but try this:
#category-filter a {
white-space: nowrap
}
That should stop the text from wrapping.
And as already mentioned, it's invalid to have a div as a direct child of a ul. You should change it to <li class="column full">. You might also have to adjust some of the selectors in your CSS.
This question seems to be asked freqeuently over the internet but I still can't find a solution.
I have this navigation bar (It switches between tabs using jQuery) which displays inline. I'm showing a background image on these and to make them more definitive I need to make them wider and higher.
<div id="tabs">
<ul id="tabs-nav-cont">
<li class="tabs-navs">Nav 1</div></li>
<li class="tabs-navs">Nav 2</div></li>
<li class="tabs-navs">Nav 3</div></li>
<li class="tabs-navs">Nav 4</li>
</ul>
</div>
The only way I can seem to do this is by reverting them back to block elements. Which is not what I want because they display vertically. So I tried putting divs in the anchors so I can size them up. However they seem to change them back to block elements too.
Im confused. Someone please help :)
Luckily you live in the year 2009, where inline-block is widely adopted through browsers: Cross browser inline-block.
If it's just for the height (and all the content of the lis fits each on one line), you'd like to go with line-height: 123px, which sets the height of an inline box to 123px (per line, that is).
Or, quite common, if the navigation is left-aligned, float them:
#nav li {
display: block;
float: left;
}
Cheers,
Because it was not 2009 when i first had to solve this :) i got the solution for firefox with following css class:
.ib { display: -moz-inline-block; display: inline-block;}
This is my generic inline-block class that i use where necessary...
Sinan.