Centering on Twitter Bootstrap doesn't work - html

I thought text-align works in Twitter Bootstrap but it doesn't? I'm not sure what's going on. Is there an alternative to centering or am I just going to have to use margin? Sorry for the overkill with the style text-align. I just wanted to make sure I wasn't missing anything.
<div class="row-fluid span12" style="text-align:center;">
<ul class="nav nav-pills" style="text-align:center;">
<li style="text-align:center;">Skills</li>
<li style="text-align:center;">Music</li>
<li style="text-align:center;">Things I Read</li>
</ul>
</div>

I think it might be because bootstrap sets the anchors to be display: block. Text alignment works on inline and inline-block elements. Have you otherwise customized the bootstrap css? The nav pills should have the text centered anyway, unless you've specified a width, because it should just be adding even padding to the block-level anchor element.

Related

How to ensure that a DIV comes below the navbar?

I'm using Materialize to create a navbar like the code below shows. After that, I render a div element to hold my application but the topmost part of it gets hidden by NAV element.
<div class="navbar-fixed">
<nav class="nav-extended deep-purple">
<div class="nav-wrapper">
...
<ul id="nav-mobile" class="application right hide-on-med-and-down">
<li>...</li>
...
<li>...</li>
</ul>
</div>
</nav>
</div>
<div id="application">Shazoo</div>
My current workaround is to simply add a top margin to the DIV named application but it's hardly something I want to see in a printed book as a best practice. I'm guessing there's a specific hack for Materialize that I haven't found. The documentation seems a bit Spartan on the website.
To avoid adding the margin or an extra div, just add top padding to your body like this:
body {
padding-top: ABCpx;
}
Where ABCpx is the height of your fixed navbar.
If the navbar is positioned using "fixed" then I adding margin-top to the following div would, in my opinion, be the correct method, or else adding padding.

Background-color for ul/div element not rendered

I am trying to display navigation items (horizontally) in a blue colored ribbon. Somehow, the background-color property is not getting applied to the ul element. I tried to put it inside a div element with background as blue. Still, it doesn't work
Html snippet as,
<div style="background-color:blue;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li style="float:left;margin-right:10px;">mongodb</li>
<li style="float:left;">couchdb</li>
</ul>
</div>
Why is my background color not showing if I have display: inline?
This is the same issue as this. The div is coming out at height 0, same as the list as the float doesn't take up any space.
If you specify the height or tell them to display:inline-block it'll work.
Fiddle: http://jsfiddle.net/7vp4vz6f/
You are using float property for the li elements, so you need to apply some sort of clearfix for container to adjust it's size according to the content size. You can try with the overflow CSS property:
body > div { overflow: auto}
JSFiddle
<div style="background-color: blue; overflow: hidden;">
<ul style="list-style-type:none;background-color:blue;">
<li style="float:left;margin-right:10px;">cassandra</li>
<li style="float:left;margin-right:10px;">mongodb</li>
<li style="float:left;">couchdb</li>
</ul>
</div>
Your elements have no width and height, that's why.
Also, consider using a stylesheet, one of the many advantages is that you don't run into such issues very often.

twitter bootstrap margin-left -20px issue

I'm having an issue using twitter bootstrap on my webpage http://scrapp.site90.com/ . Header is wrapped in container and has .row around it, but seems that because of margin-left: -20px this row cannot align with other content. Is it possible to fix it? I tried to change value of margin-left, but then layout gets really messed up.
Instead of using the span* you could use pull-left on the H1..
<div class="row">
<h1 class="pull-left">Take a look at our work to see what we mean</h1>
<div>
<ul class="social inline pull-right">
<li>..</li>
</ul>
</div>
</div>

css automatically expand floating element (unknown widths)

My horizontal navigation bar looks like this:
| MENU-ITEM 1 | MENU-ITEM-2 | MENU-ITEM 3 | SEARCH FIELD |
The menu-items have equal width, but since the website is cms-driven, the count of items and therefore the width of the menu-item-list will change.
I'm looking for a CSS solution for automatically stretching the search-field on the right to use 100% of the remaining space inside the navigation bar. The navigation-bar's total width is static (about 950px).
html is something like this, but maybe I need wrappers anyway:
<div id="nav">
<ul id="nav-items">
<li class="nav-item">MENU-ITEM 1</li>
<li class="nav-item">MENU-ITEM 1</li>
<li class="nav-item">MENU-ITEM 1</li>
</ul>
<div id="search-cont">
<input id="search">
</div>
</div>
Here is a fiddle with the basics: http://jsfiddle.net/Qg2ag/
The idea is:
The wrapper of an input field must have display:block and overflow:hidden.
The menu near it must have the float:left and the items in it must be inline or inline-block.
So, the floated block eats it's width from the block with an overflow, so you can set width: 100% in it safely. And I've added padding-right: 6px to the input's wrapper so there is no need in ajusting it's width or using other box model. Of course the size of this padding can vary if you'd change the input's style.
Maybe it helps if you use display: inline; and float: left; on the li-elements.
This will keep them in one line. You can style these tags now. If you're using a-tags inside the lis you may consider styling these instead of the lis.
The search-bar will then be displayed in one line with these elements but also remain at a width of 100%.
Check out this fiddle.

How can I turn this into a two-column layout within the list element?

<ul>
<li><img src='/profile.jpg'><span>Name</span><span>Address</span></li>
</ul>
I want to have two columns with the image in the left column spanning two rows and the text in the right column on an upper and lower row to the right of the image.
I tried using divs with blueprint css but then the anchor tag is displayed in a weird way - it doesn't appear to encompass the entire list element on hover but instead a sliver.
I also tried with a table layout but because I can't control the padding well with CSS it looks bulky.
How can I turn this into a two-column layout within the list element?
Some of your HTML is invalid, so I've taken the liberty of cleaning some of it up. Something like this should work for you:
<ul>
<li>
<div>
<span class="item-container"><img src="blah.jpg" /></span>
<div class="item-container">
<span class="item">Name</span>
<span class="item">Address</span>
</div>
</div>
</li>
</ul>
CSS:
.item {float:left; clear:left;}
.item-container {float:left;}
Add margins/padding as necessary.
Working sample: http://jsfiddle.net/andrewwhitaker/KUaCE/
use float:left on all elements, also needs float for proper height