Pretty self explanatory. I've spent hours messing around with the code...and cannot get the multicoloured navbar to align to the left to match rest of the content.
As you can see...there's a small gap on the left of about 20px. I have no idea what's causing it.
I would like the green menu button and top navbar to move slightly to the left where the grey header starts.
I've tried adding the following to menu styles #session:
margin-left:0;
left:0;
padding-left:0;
doesn't work!
Fiddle
ul has padding, that comes into play by default
Remove padding from #session
use
#session{
padding:0;
}
you just need to take the padding off
#session{
/* other styles */
padding-left: 0;
}
use
#session{padding-left:0}
DEMO
Related
There is a white space between my nav bar and the rest of the content on my page I am trying to figure out how to get rid of it. Here is an image of the issue as well.
as MichaelvE said hard to know without seeing HTML...
You define space between nav li as margin and padding value so it should be that who set space at end of nav.
In that case you've to set margin and padding of last nav element(li?) to 0 or more acurately to margin-bottom:0; and padding-bottom:0; if the space is at bottom of nav (or left or right if you've space at left or right).
edit: you can see which element margin or padding will make unapropriate space by setting a test value as border:1px solid red; on nav and li (using a different color) and see where (in which element)the space is no wanted.
I'm having a problem about loading 2 sections in Bootstrap and as you can see here in jsfiddle there is a little white space between the page header and the top menu... So how to remove that so the both sections will stick together... Not that I also tried margin-top:0; padding-top:0; but they didn't work !
The bootstrap .navbar has a default margin-bottom of 50px. To remove that, add a new style which overrides it.
.navbar {
margin-bottom: 0;
}
I'm trying to remove the white spaces. I've research and finaly remove the white spaces on .side and .main but i cant remove the white space on top and below(when zoomed out).
Here's my FIDDLE. I appreciate any help.
What i want is (see image below). I'm tyring to create it like that, even when zoomed out there's no white space.
The another solution is to add this to .top and doesn't affect the other elements (That means, other elements' padding and margin will keep the same):
margin:0px;
display:inline-block;
Please notice that only add it to .top. Do not do this:
* {
margin:0px;
padding:0px;
}
Because it will also affect other elements.
Ok, take a look at this: http://jsfiddle.net/EH83H/
I've added a few things like
* {
margin: 0;
padding: 0;
}
to remove paddings and margins by default, i've added a position fixed to the container, and height: 100% to the main and left divs. Also main and left divs have a container div named bottom
On the site: ukrainiansecret.com
I would like to get rid of that green right margin of the banner, and to have it exactly as the left side. Have tried to stretch the banner width but it didn't work out.
Thanks
The quick and dirty way I did it was add a width:100%; to the div.banner_main, ul#portfolio, ul#portfolio li and ul#portfolio li img - that will make the image stretch all the way across the screen.
Example:
div.banner_main,
ul#portfolio,
ul#portfolio li,
ul#portfolio li img {
width:100%;
}
I'm creating my portfolio. While doing that I just come across with an error in the top menu. It's aligned to left. I tried my level best to solve that problem. I need that to be central aligned. Can anyone please help me? Url is http://jilsonthomas.com
Also footer is not extending to the stream sides. ( both left and right) please help....
Cheers...
You can center the menu by making the list an inline element with display: inline-block; and by specifying text-align:center; on it's parent div#menu.
#menu{
...
text-align:center;
}
#menu ul{
...
display:inline-block;
margin:0;
padding:0;
}
Another option would be to set a width on the list and keep it a block element and specify margins left/right auto, but that would be kinda hackish.
To solve the footer issue just remove the margin and padding on the body. It's the margin in this case, but it's good to remove them both. I'm not sure, but it may vary from browser to browser.
body{
margin:0;
padding:0;
}
Also you may want to use a CSS reset to avoid all sorts of problems like this one.
Hope this helps you,
Alin