I've got the layout of my site mostly done. On the domain I'm testing this layout on - http://networkgenius.org/ - there is a vertical space separating the content-wrapper div and the menu div. I have the margins set to 0px for the vertical spacing, and this is the only area that is separated like it is.
I'd like the white content area to be pressed up right against the bottom of the menu, so that none of the body's background shows between them.
What am I doing wrong?
Your navigation bar (#nav, #nav ul) has a height of 35px on it, but it seems like the background image isn't actually that tall, and since you seem to have set it to only repeat-x with a transparent color, you'll get that space.
Set it to 27px or smaller and you'll be fine (in Chrome, at least).
Jeff is right. Your #nav ul has a height larger than your navbar (and background image). Also, there is vertical padding on the nav ul as well that adds to the discrepancy.
Related
So I'm trying to keep the page at 2000px in height but from this screenshot I have extra pixels worth of space after the 2000px for the container.
How can I restrain the page to the 2000px height?
I've been using position: absolute; for everything past the tabs that hover down because when those tabs are hovered over they push the rest of the content downwards. Is there a way to get rid of all the extra space at the bottom of the page?
Here is a jsfiddle link.
http://jsfiddle.net/kAX55/
You need to remove the margin,padding from your body.
body {padding:0;margin:0;}
You should use a 'reset css'.
There is a layout with central block "page" that has left, right and bottom background decorations (the light green plants on green background).
Example page
The problem is with the Bottom decoration, that is an empty bottom block, that is intended only to show its background image.
In order to be visible it must have height defined, however this height extends whole body height, and the window always scrollable to the down of the Bottom decoration block
You can change the "page" block height to something high, like 1000px or more to see the problem.
I'd like that full height bottom decoration will be seen only on short pages, where there's a lot of space beneath the page (like on initioal view). And on the long pages there should remain minimal gap of 20px height.
Shortly, it must only be visible on the remaining space, not extend the page by it's own height
I'm sure it is possible, but I'm stuck
Thanks
Found solution, simple fix
.wrapper {overflow: hidden; min-width: 1000px; }
Here's the result:
http://62.90.136.69/resultbottomdecor.html
Thanks
I am trying to edit this slide show, but I don't know how to take the space out of the images, I want minimum space.
Here is the slider:
http://littleladyenterprises.com/wp-content/themes/blackchic/FullWidthImageSlider/
and here is the CSS:
http://littleladyenterprises.com/wp-content/themes/blackchic/FullWidthImageSlider/css/component.css
How do I get the images to align next to each other without the space?
Change <li style="width:20%"> to just <li> for every listitem, what is happening currently is that you have set the width of the ul to 500%, and the width of the li's inside it to 20% of that 500%. This means that every li will be 20% of 500%, this ends up looking similar to setting the width of both the ul and the li's inside it to 100%. The difference with a setup like that is that currently there is enough space inside the 500% wide ul for all the li's to float left, instead of having them all display under each other, which will happen if you set the width of both the ul and the li's inside it to 100%
It is not entirely clear what you are trying to achieve, but getting rid of the width set on the li's will definitely get rid of the extra white space to the right of the image.
Setting display: block; on the image, as you mentioned in the comments to your question, is a good idea, but it is unrelated to the white space currently visible to the right of your image. It does get rid of some white space which is added by the browser around inline elements, for images this usually means a few pixels of white space under the image.
Just add width and text-align property to container class like this,
.container{
margin: 0 auto; /* for center align*/
text-align: center;
width: 686px;
}
I've started to write a design for my video streaming site.
http://www.xjerk.com/new.site/ [SFW]
The content area is horizontally fluid, and the white boxes in the content area are divs that are floated left. This means they all sit next to each other nicely, and flow onto a new line when there's no room left.
However, the content area often has a blank area on the right side, where there's not enough room for another white box. I would like to get rid of this; either by making the whole container div (#container_inner) shrink to remove this space, or failing that, make the blue bar above the white boxes contract (by making #content contract) so the the right edge is in line with the white boxes.
I've tried setting the left area (#content) to inline-block, but this doesn't work since the content inside is bigger than the div width (hence the overflow onto multiple lines).
Is there any way this can be achieved, or would a fixed width design be my best bet?
PS: I hope I've explained everything well enough.
Use media queries to set break points for the blue bars size.
Have you tried setting the video_box to a % of the width?
This should remove the white-space.. Remember to change the margin to percentage too, else width could start to exceed 100%+.
For exmaple:
.video_box {
margin:1%;
width:31%
min-width:100px;
height:370px;
border-radius: 10px;
-moz-border-radius: 10px;
border: 1px solid #d0d0d0;
background-color: #ffffff;
float: left;
http://phplist.xxmn.com/node/1
why the two red box which locates at the center of the page(under Tags:) doesn't have the border bottom? the two red box html label is
<span>
and i applied the
border:1px solid red;
to it. but under IE7, the border bottom isn't show, firefox is ok. the out div box (the id=vistor_comment)is too heigh than under firefox? why? how to alter it. thank you.
try giving it also display: inline-block;
I think it is because the line-height in which the span resides is lower than the height of the span including border, and so the lowest few pixels are cut off, in this case just enough for your bottom border to disappear.
Your parent container has a height: 20px;, I'm assuming that is and your various paddings are causing a height issue in IE7, therefore cropping a portion of your child container. Set an IE7 specific height to see if it rectifies the issue.