I have 3 floated <li>, with no width determinated (responsive design). Inside each <li>, I have a floated icon + informations on the right.
As you can see, the word "route" wrap under, even if the <li> element have more than enough space on the right (The red rectangle shows the "container" <div>)
Here's the HTML (cleaned) + CSS:
<div class="row">
<div class="columns twelve">
<ul class="quick-infos">
<li>
<span class="fa fa-phone fa-2x fa-pull-left"></span>
VICTORIAVILLE<br />
819 357-2494
</li>
<li>
<span class="fa fa-phone fa-2x fa-pull-left"></span>
DRUMMONDVILLE<br />
819 479-8008
</li>
<li>
<span class="fa fa-quote-left fa-2x fa-pull-left"></span>
Service routier 24 H<br />
Camion lourd, agricole et hors route
</li>
</ul>
</div>
<div class="columns four">
Other things here...
</div>
</div>
CSS:
ul.quick-infos li {
float:left;
margin-right:3em;
}
The floated icons are generated via font-awesome, and they have the class .pull-left wich make them float. If I remove the .pull-left, the <li> works correctly.
So, I want to know why my <li> element doesn't render width correctly...
PS: I know I can work around this with a white-space:nowrap, but I really want to know the "reason" :)
Thx!
The problem seems to be caused by the nested floats: the li is floated left, and the .fa-pull-left icon inside is also floated left.
My guess is that the li's width is calculated first, as if there were no floated span inside, and then the span is applied, leaving not enough room inside the rest of the li, causing the content to wrap.
If someone can come up with a better explanation, I'd be delighted!
Anyway, the solution is to not float the inner span. One example of a working solution would be to give the li some padding and position the span absolutely inside the padding.
ul.quick-infos {
padding: 0;
margin: 1em 0;
list-type: none;
}
ul.quick-infos > li {
margin: 0 !important;
padding: 0 3em;
position: relative;
float: left;
list-style: none;
}
ul.quick-infos > li>span.fa-pull-left {
position: absolute; left: 0; top: 0;
float: none;
}
Working fiddle
(Sorry for not posting all the code in here, but I had to copy FontAwesome's css into the fiddle, so it's a bit much.)
Related
I am trying to create a responsive dropdown menu with icons and text in full mode and icons only when windows are small (for the top level). For the second level, I still want to show the names in the sub menu.
Full code On codepen:
https://codepen.io/-royqooe/pen/QWmXEKw
See the last element of the menu with sliders
My html :
<li><i class="fas fa-home"></i><span class="topbar-text">Home</span></li>
<label for="btn-1" class="show_nav"><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></label>
<a><i class="fas fa-sliders"></i><span class="nav_parent topbar-text">Admin</span></a>
<input type="checkbox" id="btn-1">
<ul class="navbar_dropdown">
<li><i class="fas fa-users"></i><span class="subbar-text">Manage users</span></li>
<li><i class="fas fa-list"></i><span class="subbar-text">manage</span></li>
<li><i class="fas fa-users"></i><span class="subbar-text">browse files</span></li>
</ul>
</li>'
My responsive css
#media screen and (min-width: 630px) and (max-width: 1080px) {
.topbar-text {
display: none;
}
.subbar-text {
font-size: 12px;
}
nav ul ul li{
position: relative;
margin: 0px;
left: 0px;
width: 150px;
line-height: 0px;
float: left;
}
}
The problem is probably around width: 150px; thing is if I remove it, the submenu will become so small, condensed, and ugly and have text divided into 3 lines but won't break out of the page.
If I add a fixed width text shows inside as I want but it breaks out on the right side...
Also, in the responsive part, if you move the mouse to the submenu directly it disappears, moving the mouse in "L" shape pattern, down to the empty area under the menu, and then to the left to the submenu works because of the padding I added. So I would appreciate if someone explains how to fix that too...
Can someone help to make the submenu still maintain a good width to show all text but restricted to the window? if needed the menu should expand to the left, instead of right outside the page
EDIT:
With somdow's answer, it improves thing for the full mode, but the second mode still has an issue (the L shape thing but reverse this time) see the following gif:
IF i understand you correctly, then all I did was, go to
nav ul ul, and add
right: 0px;
and that's it. Now obviously you can play with the numbers but this should work and your menu wont hide off page any more.
like this(I took this from your code on codepen)
nav ul ul{
position: absolute;
top: 90px;
border-top: 3px solid cyan;
opacity: 0;
visibility: hidden;
transition: top .1s;
right:0px;
}
Add the last line and you are done.
came out like this:
happy coding
I have an <a> tag (which is part of multiple <li> tags). In the <a> tag I have an <i> tag and some text - the text of the link.
What I would like to achieve is to have the icon on top and the text under it (and then centered). So it would look like:
ICON
MYTEXTHERE
However they are always placed next to each other. I tried using display: inline-block - because my <a> is inline and the content inside should be block but without success.
The fiddle is here: https://jsfiddle.net/6mg4vt77/5/
Edit: Thanks for the answers but sadly I forgot to mention that I must support IE9.
try this
<a href="/items/bluetooth" style="display: inline-block; text-align:center">
<i class="fa fa-bluetooth"></i>
<br>
BLUETOOTH
</a>
https://jsfiddle.net/6mg4vt77/7/
Quick answer, set the icon to 100% wide and center everything in the anchor.
a{
text-align: center;
}
a .fa {
width: 100%;
}
JSfiddle Demo
Modern Method
Flexbox:
a {
border: 1px solid grey;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<a href="/items/bluetooth">
<i class="fa fa-bluetooth"></i> BLUETOOTH
</a>
In your test case I'll use two nested <span> within the anchor, one for the icon and the second for the text. Then I'll give them both display:block. That way one should position itself on top of the other. Finally you can nest the <i> tag within the first <span>, like so:
<a href="/items/bluetooth" style="display: inline-block;">
<span style="display:block;"></span>
<i style="width:100%;text-align:center;" class="fa fa-bluetooth"></i>
</span>
<span style="display:block;">BLUETOOTH</span>
</a>
Live demo here: https://jsfiddle.net/6mg4vt77/10/
Wrap your code in a div like so:
<div class="link" style="width:90px;text-align:center;">
<a href="/items/bluetooth" style="display: inline-block;">
<i class="fa fa-bluetooth" style="text-align:center;"></i><br> BLUETOOTH
</a>
<ul class="dropdown-menu ddcolumns">
<li>Main3</li>
</ul>
<div class="clearfix"></div>
</div>
That should fix your problem.
PS: You can always change the width in the div to your liking, even with % :-).
To answer the question as titled, "Align elements inside an <a> tag vertically", this https://jsfiddle.net/cdLp61ad/1/ is what I use to:
middle-align linktext vertically
and horizontally
Keep the clickable area under control (full height and width)
(don't be fooled by tabley-looking stuff, it's not tables!)
ul {
display: table;
table-layout: fixed; /* all cells same width */
margin: 0 auto; /* Optional */
}
a {
display: block; /* Makes line-height work */
line-height: 4em; /* Control HEIGHT of clickable area here */
padding: 0 16px; /* Control WIDTH of clickable area here */
}
li {
display: table-cell;
text-align: center;
background: bisque; /*just for visualisation*/
border: 1px dashed orange; /*just for visualisation*/
}
HTML nesting is done the 'usual' way:
<ul>
<li>
<a ... >
Multiple-lines in linktext leaves a gap, sorry
I'm still working on this...
Negative margin doesn't seem to help
The technique uses display: heavily so playing further with that 'may cause unexpected behaviour'
I'd probably try relative positioning next but I sure did give up last time, All my horizontal menus are on-liners!
See also:
OLD tech: Alignment how-to and how-not-to at phrogz.net
NEW tech: Promising info at sitepoint.com re Giving Floasts the Flick and Migrating to Flexbox
You CAN wrap A-tags round block elements in HTML5
Put the text you want to display into another HTML element, e.g. <p>. To center the icon, wrap it into an element and style it with text-align.
<p style="text-align: center">
<a href="/items/bluetooth" style="display: inline-block;">
<i class="fa fa-bluetooth" ></i>
<p>BLUETOOTH</p>
</a>
</p>
Position absolute seems to be working different in Firefox and chrome when using float: left.
Chrome:
Firefox:
.ulfloat{
text-decoration: none;
}
.ulfloat li{
float: left;
}
.g-blue{
background-color: blue;
}
.g-red{
background-color: red;
position: absolute;
}
<div>
<ul class="ulfloat">
<li>
<a>
<i class="g-blue">as</i>
<span class="g-red">bs</span>
</a>
</li>
</ul>
</div>
Using:
Ubuntu 14.04.1 LTS
Google Chrome 39
Firefox v34
This is the structure I'm using to create a notification badge and because of this issue my notification looks the following way:
Chrome:
Firefox ( this is the behaviour I want ):
how can I fix it to ensure compatibility between browsers?
Which is the correct behaviour ?
You need to set left / right or top/ bottom that is the main reason we use position: absolute
absolute Do not leave space for the element. Instead, position it at a
specified position relative to its closest positioned ancestor or to
the containing block. Absolutely positioned boxes can have margins,
they do not collapse with any other margins.
Note:
You may want to add position: relative to the list element since you are using the position: absolute on his child.
Here is an alternative:(apply the float on i and span instead of li)
.ulfloat{
text-decoration: none;
}
.ulfloat i, .ulfloat span{
float: left;
}
.g-blue{
background-color: blue;
}
.g-red{
background-color: red;
position: absolute;
}
<div>
<ul class="ulfloat">
<li>
<a>
<i class="g-blue">as</i>
<span class="g-red">bs</span>
</a>
</li>
</ul>
</div>
This seems to be a common problem in the Bootstrap community, the process of centering and class with an odd number for the span width, class="span3" for example. I have a .row with three .span3 classes inside it. I realize it would be easier to just use three span4 classes, but I'm not a fan of how large it makes my elements.
I've tried a few things so far:
I've created a custom 15-column grid so I could give a .span3 class before and after the three elements I actually want to use, however when responsive-bootstrap.css kicks in, things act strange because the responsive file deals with a 12-column grid.
I've tried placing everything in a custom .center class which uses the following CSS:
.center {
float: none;
margin: 0 auto;
text-align: center;
}
For what it's worth, everything works when my browser width is between ~980px - ~1199px.
There has to be a simple way to fix this problem, right? I'm not worried about it looking good on older browsers either, this is a personal site. Here is where I'm currently at, working with a 15-column grid:
Here is my JSFiddle
The HTML:
<div class="row">
<div class="center">
<ul class="thumbnails" id="portfolio-links">
<li class="span3"></li>
<li class="span3" id="item1">
</li>
<li class="span3" id="item2">
</li>
<li class="span3" id="item3">
</li>
<li class="span3"></li>
</ul><!--/.thumbnails-->
</div><!--/.center-->
</div><!--/.row-->
The CSS:
#portfolio-links {
display: block;
margin: 0 auto;
float: none;
}
.center {
float: none;
margin: 0 auto;
text-align: center;
}
You just have to make the <div class="center"> with a size of span9 and remove the extra li.
The final result will be: http://jsfiddle.net/AKWqP/
I realise there have probably been a few questions with a title similar to this, but I think my question is a little different, I've tried to do some background reading and can't seem to find an elegant solution to this anywhere (although that's possibly because one doesn't exist)
Basically, I have three boxes, each with an image to the left, and some text in them, the problem is getting the text to vertical-align, having done some background reading on how vertical-align actually works (I wasn't entirely sure before) I tried implementing it to solve the problem, and it works perfectly well on all but one of the boxes, you'll see what I mean in the demo below:
http://jsfiddle.net/5vxSP/1/
The last box has a second line of text, and this line just ends up below the image, there are a few ways I can think of doing this, but most involve using a float for the image, and margins for the text of the last box, which, whilst working isn't a particularly nice way of doing it (well, I think so anyway . . .)
Is there an elegant way of doing this, so that the text will remain in the middle of the box regardless of the number of lines / font-size that I decide on using?
If I have to use my original solution I'm happy doing that, I was just interested to see if there was a better way of doing this that I have yet to discover.
HTML is very shoddy when it comes to vertical-align. The only way I've found to reliably do this is to do as follows...
<div>
<span style="display: inline-block; vertical-align: middle; height: [The height of your box here]"></span>
<span style="display: inline-block; vertical-align: middle;">Put your multi-line content here</span>
</div>
vertical-align in CSS aligns the inline element it is applied to with other inline elements around it. Only on tables does it align within the table cell.
Based on a proposed a solution for a similar problem here, you can do something like this.
Put the link texts inside spans.
Give these spans display:inline-block and the proper widths; which are the original widths of the li items minus the images and the paddings.
.main-services {
overflow: auto;
padding: 17px 0 9px 0;
}
.main-services li {
list-style: none;
float: left;
border-right: 1px dashed #E53B00;
padding-right: 14px;
}
.main-services li a {
display: block;
height: 78px;
color: #ED5D04;
text-decoration: none;
}
.main-services li a img {
vertical-align: middle;
}
.main-services li a span {
display: inline-block;
vertical-align: middle;
}
.service-1 span { width: 85px; }
.service-2 span { width: 131px; }
.service-3 span { width: 151px; }
<ul class="main-services border-common">
<li class="service-1">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>Some text goes here</span>
</a>
</li>
<li class="service-2">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text here</span>
</a>
</li>
<li class="service-3">
<a href="#">
<img src="http://farm8.staticflickr.com/7177/6928101513_9288b942e8_t.jpg" alt="blah" />
<span>More text goes here but this text overruns</span>
</a>
</li>
</ul>
Or check out the update to the fiddle (including the original reset stylesheet): http://jsfiddle.net/MrLister/5vxSP/15/
Note: this won't work in IE8.