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
Related
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'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 )
I have 4 Images, and for some reasons my brain stopped working and i cant figure out why i cant center those.
That's the Fiddle -> http://jsfiddle.net/theminijohn/bcMX5/
If i try to just <center> them i'm getting a Deprecated Html Tag Error in my Editor.
I tried a lot of things, till rewriting the Css and Html Code, but i'm brain stuck here.
Could some Gentleman help brake my blockade ? :)
Here is one way of doing it.
Add a wrapper block element around your div's and then apply the following CSS:
.wrap {
border: 1px solid blue;
overflow: auto;
text-align: center;
}
/* Center 4 Blocks */
.hd_b {
font-size: 13px;
font-weight: normal;
margin-top: 10px;
display: block;
text-decoration: none;
}
._hd {
margin-right: 20px;
display: inline-block;
text-align: center;
}
._hd:last-child {
margin-right: 0;
}
._hd img {
opacity: .85;
}
._hd a:hover img {
opacity: 1;
}
See demo at http://jsfiddle.net/audetwebdesign/QTxy9/
The parent .wrap block has text-align: center, and this will center the child ._hd div's that have display: inline-block.
You need to reset the right margin on the last child div using ._hd:last-child.
This works pretty well if you are willing to use the inline-block display type.
Note that any white space between inline-block elements translate into a 1ex wide space, which may not be obvious when you set the margin between blocks.
All of those divs need to be in one container div that has a fixed width. Then you can apply margin: 0 auto to the container.
http://jsfiddle.net/bcMX5/9/
Try doing this:-
Give a "main" DIV outside all img DIV "<div id="main">"
and give "margin: 0 auto;" along with some width to it.
Please refer the Fiddle: http://jsfiddle.net/aasthatuteja/6U2YJ/
Hope this should solve your issue!
would this be, want you want?
._hd {
margin-right: 20px;
display: block;
width:100%;
text-align: center;
}
Forget about margin and float ;) http://jsfiddle.net/bcMX5/8/
._hd {
//margin-right: 20px;
display: block;
//float: left;
text-align: center;
}
Depends on how you want to center the elements? If it's in a column the above answer would work. Its in a grid then wrap them in a fixed width container.
._hd_container{
width:440px;
margin:0 auto;
}
http://jsfiddle.net/RzfMP/
I'm working on this site: http://www.bedriftsdesign.no and got two things I'm struggling with:
First the floating social icons on the left in the header won't allign vertically. I'm using display:block and a bit unsure what I'm doing wrong?
Secondly (optional) I'd prefer them to be on the background element just outside the wrapper, but unsure how to make that work?
Any suggestion on how to solve this would be really welcome.
Thanks
Ans of Question 1 just remove float:left;from here #social li its working as per your requirement :- see the attached image
CSS
#social li {
display: block;
list-style-type: none;
}
Ans of Question 2
I think you are looking this :-
CSS
#social {
background: none repeat scroll 0 0 transparent;
left: 177px;
margin: 0;
padding: 0;
position: fixed;
width: 100%;
z-index: 12;
}
You are floating the list elements li and trying to undo it by setting display: block for the containing anchors a.
You shouldn't set li to be float: left; in the first place.
Find this rule
#social li { float: left; list-style-type: none; display:block; }
and remove float:left; This will align the icons vertically.
In order to align them along the header image, I would use negative margin. Find this rule:
#social{ background: transparent; margin: 0; }
and change the margin to margin: -35px;
Not sure what you mean by align them vertically. To what do you want them to align?
If you want them from up to down change:
#social li { float: none; }
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/