I have a html/css problem. I have a website which is made of a "wrapper" table in width: 100%. In this website there is a "results" page, which shows a table with many different products and their columns of information. Due to the fact that there are many columns, the table exceeds the size of the screen. When I use the scroller to see that information, I see a big white space next to the "wrapper" table.
If anyone could explain to me how to get rid of that unwanted white space,
I had be very thanksfull.
ThankYou.
we def need some code but perhaps you're not setting the parent objects to some height or width. White space on resizing is generally the cause of an object saving space for itself because in reality it could expand with more data.
you can try this
html, body, form
{
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
or perhaps try fixing the widths and setting position to absolute.
Related
I was having problems whit this for a while, and I know that some other people were too
image problem
As you can see in the image, there is an excessive white empty space in the bottom of the page, it's because there was a component just there, but it was moved up with "position: relative;" and of course, the element moved up but it's still taking its original space at the bottom
I was trying to define the height of the body, as well as to center the components and set a margin:auto; but it doesnt work
Any idea?? THANKS!
give your plans a margin at the bottom and you decrease the margin-bottom to reach that space that you want for example:
.image-plans-hosting{
margin-bottom: 200px;
}
You can use the inspector in your browser to find the values you like the most.
I have a table with two columns. I want the first column to be scrollable, so that my table can stay at a fixed height and not expand continuously. I only want it to be scrollable vertically though: Horizontally the overflowing parts should still be visible (In my case, the overflowing parts are on-hover tooltips which are getting hidden and add a horizontal scrollbar...), without having to scroll horizontally. My CSS/HTML looks like this:
<table class"tab1">
<td class="td1"><div class="container"><!-- Many, many, many floating elements here --></div></td>
<td></td>
</table>
CSS:
.tab1 {
table-layout: fixed;
width: 100% /*100% of the parent node*/
height: 20em;
}
.td1.container {
overflow-y: scroll;
}
2 Problems:
The height of 20em gets ignored. Even though the first column now gets a scrollbar, it still expands to its own needs.
When hovering over one of my elements, which generates a div with position:absolute, a horizontal scrollbar appears and the part of the tooltip that overflows gets hidden.
How can I fix this?
PS: The code is simplified of course, but I hope that it still illustrates my problem well.
PPS: Here is a JSFiddle: jsfiddle.net/pg0cLpjd
This question is even more difficult than I thought...
But here is a partial solution:
table-layout: fixed; only applies to the table itself and its columns; not the height. A table will always grow with its content. But there are a couple workarounds:
Set your table to display: block;, give it a specified height and set its overflow-y: scroll; (This also might solve your second problem, depending on your needs)
Place a div with a specified height around your table and set overflow-y: scroll;. The table still grows inside the div but you have a scrollbar.
Place a div in your columns with a specified height and set overflow-y: scroll;. This differs from the first attempt only in the position of the scrollbars and you can scroll every cell independently. But this has one huge disadvantage, which I am going to explain now:
As this answer says: If you set one overflow direction to something else than visible, the other overflow direction will automatically set to auto. (it's a feature, not a bug). And this is exactly where the second problem lies. Your code has the right logic, but it's just not possible. There are solutions using a wrapper div, (it didn't work for me) but you could give it a try.
I'd recommend having a look on how to make tooltips with JavaScript. There are plenty tutorials out there on the internet.
I am trying to create a div that will fill any empty space at the bottom of a page if there is any, or disappear if the content of the page extends to/past the bottom. I know this can be done using java, but I would like to stick to CSS as much as possible with as few wrappers as possible.
I have experimented with a few different methods but nothing has worked out so far and most of what I have come across is sticky footers, tables, and filling the excess on specific div elements (which this isn't since I want it to work on the whole page at the body/html level).
The furthest I have gotten (which still doesn't work) is to try absolute positioning with alternated top & bottom values, but setting top: inherit and then bottom: 0px just doesn't play well... Example: http://jsfiddle.net/V4RnC/6/
The basic problem comes down to: 1. Keep the top of the div where it would usually be just after the previous div 2. Extend the bottom of the div to the bottom of the page 3. Vary with content and page size changes 4. Disappear if there is no excess space.
Any help would be greatly appreciated!
Update: So far everyone seems to think it's a job for Javascript, so I came up with this quick jQuery solution: http://jsfiddle.net/V4RnC/7/ Feel free to rip me a new one on the code as I always appreciate the learning opportunity :)
If you want something for background purpose here, I would use a div, that stretches over the complete visible area (if the visible area is as large as the content, it's just hidden behind the content).
Then it would be something like that here: http://jsfiddle.net/V4RnC/4/ http://jsfiddle.net/V4RnC/5/
Here's the css code I used:
#content {
background-color: #F00;
/* The overflow is to keep margins of the first and last element in here. Disable it and you get what I mean ;) */
overflow: hidden;
}
#fill {
background-color: #00F;
height: 100%;
}
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
}
Here's a bit more info on that: http://codecamel.com/fullheight
I can imagine, that I sometimes had to use min-height instead of height for the body or html ... but can't remember when or why ...
I've got a CSS rule:
#map td {
border: medium none;
height: 32px;
margin: 0;
padding: 0;
width: 32px;
}
And I have a table inside an element called map. Each cell of the table is supposed to contain an image that's 32x32 pixels in size. But when I render it, either in Firefox or in Chrome, the map grid ends up severely squished under certain circumstances.
Examining it in Firebug, I find that the styles are all applied correctly, with the #map td style as the dominant rule for the cells in question, but when I look at the Computed tab, it gives the width property (under "Box Model") as 14.6167px. If I expand the width node, the only thing under it is: #map td 32 px, so I'm a bit at a loss as to what's causing all of my columns to be so much narrower than 32 px.
I'm sorry that this isn't much to go by, but I'm still fairly new to CSS so I don't know a lot of the right questions to ask. Does anyone know what can cause something like this to happen, and how I can deal with it?
UPDATE: After a bit of experimenting, trying to narrow it down to a simple, reproducible test case, it seems to be that the sidebar div is "squeezing" the main div and there's not enough room, so the browser is making the main one narrower, because when I remove the sidebar, everything goes back to the correct width. So now the question is, how do I set this up so that the width of the table is enforced as described and can't be squeezed by other elements to the side of it?
Keep your td/th with a defined width like you've already done.
For your table, set the layout to fixed, and you'll also have to define a fixed width as well.
table{
table-layout: fixed;
width: 64px;
}
Question
I'd like the CSS background texture for my content area to begin immediately after a variable-height header. The texture has a natural height of 900px and is graduated to a flat color, so if it fits in the available space between content-start and body-end, the whole texture should be displayed. The texture shouldn't artificially expand the content area or cause unnecessary scroll, but scroll should still appear when content is longer than fits in the page.
JSFiddle
On request, here's a JSFiddle of my issue. Since there's really only one DOM element in the question, I think the fiddle doesn't clarify much. http://jsfiddle.net/AbEUe/5/
What doesn't work
#contentAndBackground {
padding-bottom: 900px;
margin-bottom: -900px;
background: url('my900pxHighImage.png') repeat-x;
}
The above ensures the whole image is shown, but the negative margin doesn't keep the unnecessary scrollbars away as I'd hoped.
#contentAndBackground {
min-height: 900px;
background: url('my900pxHighImage.png') repeat-x;
}
Same problem. The whole image is shown, but scrollbars are always showing.
I'd like to avoid using JavaScript that needs to handle screen resizing.
I think I did it: http://jsfiddle.net/AbEUe/7/
I have created 2 container divs, both have a height of 100%.
The first contains header and background, and has overflow:hidden so the background is stopped at the bottom.
The second contains header and content, and because of use of positioning this one is on top of the first container, and it can stretch to more than 100% (if the amount of text requires that).
You can see you have to render the header twice, but that won't matter because the first isnt visible.
Edit:
Solved the last problem (see comment) by also setting the background to the content div. See http://jsfiddle.net/AbEUe/8/
Your question is not very clear, but this prevents your kitties from being chopped up.
#content {background: url('http://placekitten.com/g/200/300') repeat-x; min-height:300px;}