Its been a few hours now and I cannot figure out why there is a gap in my layout.
picture:
http://dl.dropbox.com/u/4123377/gap.png
html: http://pastebin.com/7WktN5EA
css: http://pastebin.com/Fj8rukJ8
The button is "#login"
The #login ul ul seems to be setting a top value of 50, which applies to the first element as well as all the others - so the first element seems to be causing the gap.
#login ul ul {
background-image: url(../assets/loggeddarkfill.png);
background-repeat: no-repeat;
position: absolute;
top: 50px; /* this guy */
visibility: hidden;
}
The right value is 40px - that will get rid of the gap and position the list like you want it.
Looks like you need to adjust the top value for #login ul ul.
Related
I made a navigation menu 100% width fixed to the top of the page.
#nav {
height: 50px;
}
I've used line-height to put text in center of the nav before but it's not working when I do this..
#nav ul li a {
line-height: 50px;
}
It is appearing half way off the bottom of the nav
OK, You seem to have missed the fact that browsers have some inbuilt styles for the elements like <ul> etc.
And that margin for the <ul> is pushing the whole menu down.
Try "normalizing" your css by including
ul {
margin: 0px;
}
As shown HERE.
Is there a way to stop a background image from repeating after a specific(though dynamic) point?
Currently I have the following html
<ul>
<li>variable</li>
<li>amount</li>
<li>of</li>
<li>items</li>
</ul>
and css:
ul {
background-image: url('./imgs/gridlines.png');
background-repeat: y-repeat;
}
Now, the above repeats the image for the entire length of the ul element. My issue is I need the repeating to stop 8px from the bottom of the ul.
I've tried using background-position but this just shifts the background, while still repeating it to the end of the ul element.
I've also tried using background-size: 1 calc(100% - 8px); but this fails for chrome.
fiddle
You can do this in CSS...sort of. You cannot tell background-repeat to repeat a specified number of times; it doesn't work that way. So my idea is to stick an 8px white block at the bottom of the list, which should accomplish something very close to the desired effect:
ul {
background-image: url('http://i.imgur.com/B5k8FTP.png');
background-repeat: y-repeat;
padding-left:0;
color:black;
width:200px;
position:relative;
}
li:last-child{
position:relative;
z-index:10;
}
ul::after{
display:block;
background-color:white;
position:absolute;
bottom:0px;
height:8px;
width:100%;
content:"";
z-index:1;
}
<ul>
<li>variable</li>
<li>amount</li>
<li>of</li>
<li>items</li>
</ul>
The ul style sets a width for the sake of the demo. padding-left:0 removes the margin from the left side of the <ul>, also optional. The position is set to be relative, because after content will be positioned absolutely, relative to the <ul>/
The ul::after style inserts the white block after the list. position:absolute and bottom:0px place it at the bottom of the list, relative to the <ul>. The z-index is set to ensure it sits behind the bottom <li>
The li:last-child makes sure that it sits on top of the ul::after content.
You can wrap the content you want inside a frame that is set to inherit the size from parent - the 8 px you want.
If I am misunderstanding something a jsfiddle would be nice.
EDIT:
Like this?
.wrapper{
position: relative;
left: 20px;
height: 46px;
background-image: url('http://i.imgur.com/qIaw9Lc.png');
background-repeat: repeat-y;
}
So I used the example given by by w3schools to create a div with a list in it.
http://jsfiddle.net/TBsx8/
#links li {
height: 32px;
width: 100%;
display: block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
is the relevant part.
You can see that everything works fine (I took a random twitter icon for all of them in this example)
Problem is, I want them inline. So, I change it to display: inline;. no problem, right? nope, it makes eveything disappear. inline-block does not do anything either. any solutions?
Edit: sorry, did not make this clear: I want the links horizontally.
inline-block works just fine. You've got your wrapper DIV fixed to 4em in height though. So it gets cutoff:
Fiddle with inline-block and fixed height commented out:
http://jsfiddle.net/TBsx8/2/
For horizontal layout set width of LIs: (width:100% causes the LI to consume all horizontal space available)
#links li {
height: 32px;
width: 32px; /* <<----- */
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
http://jsfiddle.net/TBsx8/8/
Add float:left and width:32px, this will work
You can set the width to 32px and display to inline-block and it should work. Right now you have the width at 100% which will fill in container.
the width of your li's should not be 100%, try an exact width.
code block using 20% width that works:
#links li {
height: 32px;
width: 20%;
display: inline-block;
margin: 0;
background-repeat: no-repeat;
list-style: none;
}
As an adjunct to the calls for you to use display:inline-block;width:32px, it's worth saying that the reason for this is that you can't apply a width to any element that is displayed inline. Ever.
Alternatively you could use display:block;width:32px;float:left on the li, and overflow:hidden or a clearfix on the containing ul/ol/dl to prevent the margins from collapsing due to the floats
I'm a little bit confused. I like to center the menu items of a normal bootstrap navigation bar.
But I can't find the right class i have to edit. should I use text-align, or margin: 0 auto; to realize something like this?
Currently I tried to add this CSS-arguments in .navbar, .navbar-inner and .nav.
Nothing works.
If there are some bootstrap dev's, please help me!
Do you know if there is a Forum for bootstrap stuff?
Assign fixed height, and then asign margin: 0 auto; to element that you have to center, but remember center div should not be floated or position: absolute; and it have fixed width
for example
<div class="parent">
<div class="inn"> ... </div>
</div>
To center .inn should have fixed width, and not floated or position: absolute,
i.e.
.inn{
width: 20px;
margin: 0 auto;}
To answer your question, it looks like the selector you should be modifying is .navbar .nav
Modifying that selector, you can proceed to implement your margin approach:
.navbar .nav {
margin: 0 auto;
width: ...px; /* width of .navbar .nav */
float: none;
}
or, similar to what Nick mentioned:
.navbar .nav {
position: absolute;
left: 50%;
margin-left: ...px; /* half of width of .navbar .nav */
}
I didn't delve into this too much, but it looks like .navbar .nav is getting a width associated to it (for me, it was 1170px). Because of its width, margin: 0 auto has no impact... would be nice to come up with a solution that didn't require hard-coding a width (or half-width margin-left).
You could try doing the following:
#div-id-inside-navbar{
left: 50%;
position: absolute;
margin-left: -100px /* This should be half the width of your centered content */
}
I have centered logos on my bootstrap site and this is what I had to do. I haven't looked into the exact reason why, but I don't believe text-align: center; was working all that well. This is similar to the way people often vertically center stuff with CSS.
in the header section of my web page, the design is something like the logo and navigation div should overlap a repeat-x image(i.e bg-header).
this is the html i have used
<div id="header">
<div id="header-bar">
<p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
</div>
</div>
and this is the css
#header {
min-width: 1040px;
height: 111px;
position: relative;
}
#header-bar {
margin-top:50px;
height:53px;
}
now when in the #header-bar if i give margin-top:50px then the header div shifts the position to 50px from top. i want to achieve something like
the header div is to define the height of the header content.
i want to wrap header-bar in the header div and the elements or the div wrapped inside the header div should should have the margin of 50px from within the header.
for example the header-bar should have a margin of 50px from the top of the header div.
when i use the above code it moves the position of header div too. i want the header div to be fixed on top only the sub div or content within the header div is what i want to position.
hope i am not confusing you.
where i am going wrong?
thank you
EDIT: it works if i use padding-top but excluding the background with repeat-x property.
i want to move the image with repeat-x property. in the header-bg div
Margin doesn't affect the position of elements relative to their parents.
To achieve the effect you want, you need to use padding on the #header, for example:
#header {
min-width: 1040px;
height: 61px;
position: relative;
padding-top: 50px;
}
#header-bar {
height:53px;
}
If you add "overflow:hidden" to the #header div, it'll work like a charm! Note that there is padding, but also margin. If you remove the padding, there will still be space left, that's the margin!
Jsfiddle example here
Use padding on the header div rather than margin.
#header {
min-width: 1040px;
height: 111px;
padding:50px 0px 0px 0px;
}
#header-bar {
height:53px;
}
You're running into something called margin-collapse. In essence, adjacent margins will collapse together, and only display the larger one - that is, the one with more absolute distance from 0. Since your #header margin (0px) is adjacent to your #header-bar margin (50px), the 50px margin is the one that is displayed, and it affects both of your elements.
If you were to add even 1px of padding to the top of #header, you would get the desired effect:
#header {
min-width: 1040px;
height: 111px;
position: relative;
padding-top: 1px;
}
I'm not sure I understood the question.
Does it seem like your answer : link ?