I'm trying that all the li's width to match my ul's width, here's my code:
http://jsfiddle.net/4XR5V/2/
I already saw some questions on the site and some seem to work adding
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
But it hasn't worked. My javascript function works, I dont know why in jsfiddle it doesn't work. How can I solve this issue?
Thanks!!
use flexbox. The children will fill up available area by default.
http://jsfiddle.net/4XR5V/3/
#tabs_header ul {
display: flexbox;
}
#tabs_header li {
flex: 1 1 auto;
}
Remove float: left. This declaration is not necessary when elements are displayed as table-cell. Floated elements shrinkwrap their contents.
Remove float: left; from list items:
#tabs_header li {
float: left;
}
fiddle1, fiddle2 - a working script ( by using jQuery )
Related
Hi im having trouble with centering the nav on this draft im making for a client.
Here is the link http://cjdrafts.info/germanserviceshop/
Please help thanks.
I'm not a professional, still learning coding and found a way to fix your issue.
What I did is commented the float left for .menu-wrapper
#Top_bar .menu_wrapper {
/* float: left;
z-index: 201;*/
}
Then defined 650px width and set the left and right margin to auto
.header-stack #Top_bar .menu_wrapper {
clear: both;
margin: 0 auto;
width: 650px;
}
Set width for menu_wrapper
#Top_bar .menu_wrapper {
z-index: 201;
width: 650px;
margin: auto;
}
remove float, set fixed width and set margin: auto.
Use display: inline-block instead of float for li
#Top_bar .menu > li {
margin: 0;
z-index: 203;
display: block;
display: inline-block;
}
and:
#Top_bar .menu_wrapper {
float: left;
z-index: 201;
width: 100%;
text-align: center;
}
set 100% width for parent and use text-align: center.
thanks for the help.
Doing the edits on a browser it does work but for some reason when i placed the css codes in the theme style sheet. Nothing work, i tried both solutions.
What seems to be the problem? I have been on this for atleast 7 days now.
I actually have a solution which is to use a menu plugin but this will be my last option.
After 1 hour of try and error and searching for problems like this, i try to get an answer here.
I want to include a bootstrap Nav-Bar into a Div. I centered the Nav-Bar, but now my Div is higher then the content. This problem is only available when the Nav-Bar is centered. If i let it float left, the space below the Nav-Bar isnt there.
i think it has something to do with the
ul{
display: inline-block;
}
Thats what i have.
Menu centered but to much space below
Thats what i want, just centered:
No space below but centered left
hope you can help me :)
use vertical-align: top; in .nav hope this will solve your issue
updated working code
try adding height to the header: #header {height:50px;}
http://codepen.io/anon/pen/KpvJRo
Try this: http://jsfiddle.net/m28mzk11/1/
.nav-pills{
display:table;
margin:0 auto;
}
nav ul {
display: table;
margin: 0 auto;
width: /* Set your width here */
}
nav ul li {
display: table-row;
text-align: center;
}
This should center your text and make your li width being automaticly calculated
I have made a simple corrections in your code.
.nav-pills
{
text-align: center;
}
.nav-pills li
{
display: inline-block;
*display: inline;zoom: 1;
vertical-align: middle;
float: none;
}
*display: inline;zoom: 1
is used because to even apply for IE7 browser because IE7 does not support display: inline-block
I am trying to create multiple horizontal div elements on a page http://jsfiddle.net/bss6mc5a/
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { display: inline; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
The layout is how I would like it to be displayed however when I add text (remove the comment tag) to the the div is moving down when I would like it to stay in place.
Thank you for any assistance / correction in how I achieve this.
You need to define width for the divs:
#body-left { float: left; content:url(http://placehold.it/240x930);}
#body { float: left; width: 960px; }
#body-right { float: right; content:url(http://placehold.it/240x930);}
Updated Fiddle:
http://jsfiddle.net/bss6mc5a/3/
Update 2:
http://jsfiddle.net/bss6mc5a/7/
Instead of trying to float your elements left or right, you can just set fixed location objects.
I updated your JSFiddle to do what I'm thinking will help.
Basically, your left and right content areas would normally have fixed width (though your images make up for that), and would be positioned absolutely to put them in the right place, then the content is just centered with:
margin-left: auto;
margin-right: auto;
width: 300px; /* some arbitary width */
But check out the Fiddle, see if that helps.
check this out I thing this what you want click Demo
Some changes in CSS
#body {
display: inline;
width: 960px;
float: left;
text-align: justify;
}
Hope this will help you...
give your body divs a display: inline-block;
http://jsfiddle.net/bss6mc5a/5/
#body-left {content:url(http://placehold.it/240x930);display: inline-block; vertical-align: top;} #body { display: inline-block; vertical-align: top; width: 30%;} #body-right {content:url(http://placehold.it/240x930); display: inline-block; vertical-align: top;}
I want to display the content of the div element in a single row. However the width of the ul element is unknown because it can have a number of child li elements. The h2 would always occupy the rest of the space. each li element has a width of 20px.
It would look something like this:
|----h2------------|li|li|li||
|----h2---------------|li|li||
HTML:
<div>
<h2>name</h2>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
I have found numerous solutions on the internet but not sure which to choose (proper solution vs hacks). browser compatibility is not an issue, it only needs to work on the latest version of chrome.
Update:
There will be multiple rows of div elements and the li elements should align.
The simplest, most compact and straight forward way is to use floats. If you know your elements will be different sizes, but you don't know exactly what they will be, there are 2 completely flexible ways to go about this.
This would be how to do it using display: table:
http://jsfiddle.net/8uTfp/1/
div {
display: table;
width: 100%;
}
h1, ul {
display: table-cell;
vertical-align: middle;
}
ul {
text-align: right;
}
li {
display: inline-block;
}
This would be how to do it using flexbox:
http://jsfiddle.net/8uTfp/
div {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
ul {
margin-left: auto;
}
li {
display: inline-block;
}
You could float the h2 left, and the ul right.
div h2 { float: left; }
div ul { float: right; }
If the div's height and the list items' height are fixed and known values, you could try the followihg CSS (notice I added css classes):
.container{
height: 30px;
position: relative;
}
.container ul{
padding: 0; margin: 0;
/* Other reset rules here ... */
position: absolute;
top: 0;
right: 0;
}
.container ul li{
display: inline;
float: left;
height: 30px;
/* Other format rules here ... */
}
If you don't specify the div's height, it will be set by the h2 element's metrics, since absolutely positioned elements don't force the layout. I hope this helps.
I have following fiddle: http://jsfiddle.net/BFSH4/
As you see there are two issues:
The h1 and h2 aren't vertically aligned.
The nav and the content aren't horzontal alligned.
For the 1. I already tried margin and padding. No success...
The second one also isn't that easy the common ways of floating and using inline-block don't work...
What am I doing wrong?
I finally managed floating the header. The problem was that hgroup isn't a block element.
However even it worked after all I think it is better to use a real image for the enterprise name and slogan.
Now only the issue with the horizontal alignment fails.
I don't know why:
http://jsfiddle.net/BFSH4/2/
I can do what I want there is no way that they wan't to be side by side!
Solution for your first problem (found here):
HTML
<div class="header">
<span></span><img src="images/prototype.png" /><hgroup><h1>Prototype</h1><h2>SideBySide</h2></hgroup>
</div>
CSS
.header {
height: 160px;
border: 1px solid #8a2be2;
/* text-align: center; */
}
.header span {
height: 100%;
vertical-align: middle;
display: inline-block;
}
.header img {
display: inline-block;
height: 160px;
float: left; /* added, so the image will appear left to the text correctly */
}
.header hgroup {
margin: 0;
vertical-align: middle;
display: inline-block;
}
This solution depends on display: inline-block
Solution for the second problem:
.nav {
width: 229px;
display: block;
margin: 0 auto;
}
Live demo: http://jsfiddle.net/BFSH4/4/