I'm pretty new to HTML and I decided to make a small sign up page as practice. For some reason, it won't scroll (There is no scrollbar and it just cuts off at the bottom of the screen). The HTML code can be found here: http://jsfiddle.net/7sukbe0t/1/. I have a hunch that the reason for the problem is
table-layout:fixed
but without that line, I'm unable to get my column sizes to be of equal size. How can I fix this?
Change the table position to:
relative
<table style="width:300px; min-height: 100px; position:relative; top:300px; left:200px; table-layout:fixed;">
or
absolute
<table style="width:300px; min-height: 100px; position:absolute; top:300px; left:200px; table-layout:fixed;">
Edit:
Check these out to see the differences between the position values
https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://www.yorku.ca/nmw/facs1939f13/week02/css_relVSabsVSfixed.html
You should change the position to relative instead of fixed, like so:
<table style="width:300px; position:relative; top:300px; left:200px; table-layout:fixed;">
Related
I have a dashboard left, and need that dashboard to be in the same size of the page, everytime it needs to get bigger i want to apply the scroll, at the moment i am doing something like this:
style="overflow-y: scroll; height:450px;"
this is applied to all my section, the thing here is that i set the height a value, i tried with height auto and 100%, but without success, any help with this?
my page is getting bigger because of that dashboard if i cant mantain the page size and give it a scroll it would help a lot
Thanks
you can try to set the min-height:100%
Is something like this appropriate.
body{
padding:0;
margin:0;
}
.a{
display:block;
position:absolute;
top:0;
left:0;
width: 20%;
height:100vw;
overflow:auto;
background-color:purple;
padding:0;
margin:0}
.b{display:block;
width:80%;
background-color:pink;
padding:0;
margin-left:20%;
min-height:100vw}
<div class="a">
</div>
<div class="b">
content
</div>
Use height: 100vh; // viewport height
Check compatibility here
http://www.caniuse.com/#search=vh
And if you want to support old browsers calculate "$(window).height()" and assign it to this div
How do I make a whole <table> have a transparent grey effect whilst a loading image shows in the middle?
I want to run some AJAX calls and have the table inaccessible and overlayed with a grey background with a loading GIF in the centre whilst the ajax context is being loaded.
This should work! Here is the fiddle, I cheated with the ajax, its not that hard. I simulated an ajax call with my Timeout function.
Other things to note, you don't give that parent div a height or width, because my table is tiny it looks crap with out it. It does need that position:relative because that allows the .page-loader guy to fill that space only.
You can obviously play around with it.
HTML:
<div style="position: relative">
<div class="page-loader">
<img src="/Content/loader.gif" style="position:absolute; margin:auto; top:0; left:0; right:0; bottom:0;" width="100" alt="Loading">
</div>
<table>
</table>
</div>
CSS:
.page-loader {
position:absolute;
height:100%;
width:100%;
background:gray;
-ms-opacity:0.5;
opacity:0.5;
z-index:1000000;
display: none;
margin-left: -40px;
margin-top: -19px;
}
I have an image that fixes itself to 100% of the page width. It stays the same size (on the screen) no matter what resizing the user does in their browser.
I now need to add a single Enter Your Name form field on top of the image. However, I want the text and form field sizing and position to stay the same no matter what the user does to resize their browser window. This is important because I need to overlay the form field table just perfectly on top of the image or else it will look bad.
Here's my current CSS:
.fixedimage img{
width:100% !important;
height:auto;
display:block;
}
Here's my current HTML:
<TABLE WIDTH="100%" CELLPADDING="0" CELLSPACING="0" BORDER="0">
<TR>
<TD WIDTH="100%">
<div class="fixedimage">
<center><img src="FixedImage.jpg"></center>
</div>
</TD>
</TR>
</TABLE>
How would I overlay the table in a particular spot on top of the FixedImage.jpg? And how would I keep it being the same size when a user resizes or zooms in/out in their browser window?
Thanks for your help with this!!!
See this fiddle:
http://jsfiddle.net/nV7tP/1/
CSS:
.fixedimage{
width:100% !important;
height:auto;
display:block;
background:url(http://www.hdwallpaperspick.com/wp-content/uploads/2013/06/beautiful-autumn-scenery-723-2.jpg);
background-position:50% 50%;
background-size:cover;
}
.fixedimage form{
width:100%;
color:white;
font-size:40px;
text-align:center;
}
.fixedimage form input{
width:250px;
height:30px;
}
Response to the comment below:
Try this fiddle to show the entire background image:
http://jsfiddle.net/nV7tP/2/
.fixedimage{
position:absolute;
width:100% !important;
height:auto;
display:block;
font-size:40px;
}
.fixedimage img{
position:absolute;
}
.fixedimage form{
position:absolute;
width:100%;
color:white;
text-align:center;
}
.fixedimage form input{
width:250px;
height:30px;
}
Note : It would be better if you use the CSS of first posted fiddle.Its the type of CSS mostly used in present popular sites.
Set the image width to 100% .This will give the output you asked:
See this fiddle: http://jsfiddle.net/nV7tP/5/
or if you want a container with minimum width see this http://jsfiddle.net/nV7tP/6/ .
I am trying to create a header-container layout. The header height is variable and the container should always fill the rest of space (width, height).
IE (9,10) and latest Opera computes the height of the layout table wrong so as scroll bars appear. The rest of the browsers computes it right (Safari, Chrome, Firefox).
<div class="header-container-layout">
<table border="0" cellspacing="0" cellpadding="0">
<tr class="layout-hdr">
<td style="background:#aaa">
asdasdas asdasd
</td>
</tr>
<tr class="layout-content" >
<td style="height:100%;">
<div class="layout-content-inner" style="background:#ccc;">
</div>
</td>
</tr>
</table>
</div>
.header-container-layout{
height:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
}
.layout-content-inner{
height:100%;
position:relative;
overflow:hidden;
}
table{
width:100%;
height:100%;
}
You can see here the situation: http://jsfiddle.net/95und/9/
Is there a solution for this without javascript ?
Thanks!
EDIT: My problem does not have to do with scroll bars appearence, I could avoid them with overflow:hidden. The problem is that I want to position content absolute to the bottom of the container.
Well, adding overflow:hidden to the .header-container-layout makes the scrollbar go away in Opera:
.header-container-layout{
height:100%;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
***overflow:hidden;***
}
I can't actually test on IE terribly easily right now but I suspect it would probably behave the same.
The only problem with this, of course, is that if your content is particularly long, it could get cut off. Depends what your plans are I guess.
http://jsfiddle.net/yochannah/95und/10/
I have a curious issue that's proving difficult. I have five divs stacked vertically in a table cell. I'd like the even-numbered divs to fold behind the middle div but in front of the others with z-indexing so that the stack appears as 1-3-5 by default (and all touching, no whitespace), with the even divs' placement and movement not affecting those of the odd-numbered divs. However, if I put the even divs into the middle div, the z-indexing of the evens is completely ignored and they appear on top of the middle guy instead of under it.
I need everything here positioned relative to the containing table cell. Absolute positioning sends any one of these elements travelling to places they shouldn't go. The cell alignment specs are needed as well. Ultimately I want to be able to expand out and contract in the even items with a mouseover (javascript) without moving the odd ones.
<style type="text/css">
.oddStationary {
position:relative;
width:100px;
height:120px;
z-index:1;
border:solid red;
}
.evenMover {
position:relative;
width:100px;
height:120px;
z-index:2;
border:solid yellow;
}
.middleStationary {
position:relative;
height:300px;
width:200px;
z-index:3;
border:solid orange;
background-color:pink;
}
</style>
<table width="600">
<tr>
<td valign="top" align="center">
<div class="oddStationary"></div>
<div class="evenMover"></div>
<div class="middleStationary"></div>
<div class="evenMover"></div>
<div class="oddStationary"></div>
</td>
</tr>
</table>
You need to establish a common reference point for your absolute positioning. By default absolutes go up the HTML tree until they encounter the first "position:relative", which becomes the new origin. If you don't have one defined, the "origin" becomes the BODY tag. You can either set TD as "position:relative" or wrap the whole thing in a DIV that has "position:relative". That's a good start.
set evenMover position to absolute and then put the evenmover tag inside the div tag of those divs where u want it.
<td valign="top" align="center">
<div class="oddStationary">
<div class="evenMover"></div></div>
<div class="middleStationary">
<div class="evenMover"></div></div>
<div class="oddStationary"></div>
</td>
I didn't get your question properly:
while this is the answer to your question whatever I understand from this article:
May be it's helpful:
<style type="text/css">
.oddStationary {
position:relative;
width:100px;
height:120px;
z-index:1;
border:solid red;
}
.evenMover {
position:absolute;
width:100px;
height:120px;
z-index:2;
border:solid yellow;
}
.middleStationary {
position:relative;
height:300px;
width:200px;
z-index:3;
border:solid orange;
background-color:pink;
}
</style>
<table width="600">
<tr>
<td valign="top" align="center">
<div class="oddStationary">
<div class="evenMover"></div></div>
<div class="middleStationary">
<div class="evenMover"></div></div>
<div class="oddStationary"></div>
</td>
</tr>
</table>