I have a website, and I want to add a picture up in the top right corner (well 100 margin from the top and right).
I have all my content inside a table (I already know this is bad).
Here is the question: How can I position a DIV at exact the place I want, and without the table taking up the "gap" of the DIV.
For instance, if I have a table, and I place a DIV inside it and position it relatively, the amount of space the DIV "WOULD" have taken up is still taken up in the table column. Why?
How can I fix this?
Absolute positioning outside the table?
The table align is set to center, so I think absolute positioning wouldn't work outside the table...
Thanks
Try setting the table cell to position:relative;, then you can have the div as position:absolute; with the left and top as they were before.
Although, last time I tried this Firefox didn't like it, and I had to put a <div> inside the table cell first and have THAT as the relative-position block.
I wont get into the fact that you should probably recode your page...
Put the div outside the table so that body is the divs parent. Then when you absolutely position it it will be positioned relative to the body...
#id_of_div { position:absolute; top: 100px; right: 100px; }
Getting rid of that gap may not be possible. You can't control the positioning of cell elements besides the basic css for tables that is available: http://w3schools.com/TAGS/tag_td.asp
Can you convert the area to use a table-less design? I'm sure you can get plenty of help on how to do it on here :-)
Related
I created a contact form with a banner at the top of it. I created the entire thing and was planning on moving it to the right, off the screen, so that it will slide onto the screen when it is hovered over. I intended to just wrap a div around all of it and then relatively position it and move it however far I needed it to go to the right to be off the screen. However, when I tried to do this, it made the banner and the contact form box, as well as everything inside of those two elements, show up in a bunch of different random spots around the screen. I figured this was because it applied the relative positioning, as well as the left:100px value I set with it, to every element within the div and that, mixed with the other positioning I had set for each object, caused the weird displacements? Does anyone know how I can move the form and the banner so that they stay attached to each other and everything inside stays where it is?
Here's the JSFiddle where I set up the contact form box and banner: LINK
Thanks for any help
i'm not sure about all your absolute and relative positioning insde of your form - if you dont want to place the elements at very specific points you wouldnt need this.
here's a jsfiddle for what i think you want to have:
https://jsfiddle.net/spmhxteu/
basically you will need to set this for your email wrap
position: absolute;
right: -200px;
and you should set this for your body or whatever is wrapped around
overflow: hidden;
width: 800px; // example
all elements INSIDE your absolute positioned div do not have to be relative or absolute again.
UPDATE: As requested here an absolute positioning inside the element:
https://jsfiddle.net/spmhxteu/1/
Note: Ofcourse your padding etc. of the parent div will not apply on absolute positioning
How to make a div to float vertically? If there is empty space above a div then it should go up and fill up the space leaving the empty space at the bottom.
float:left // for floating horizontally
I have many div which are floating horizontally with a fixed width but not a fixed height. I want them to be arranged without leaving the empty space.
How can this be done?
A div would never leave empty space above itself. It will fill the space and then the document would go on to the bottom.
I guess, there is some sort of padding or margin there.
You can try to give the divs an absolute position as:
div {
position: absolute;
top: 0;
}
This way, div will be placed almost to the top of the page! Overlapping other elements, You can give some value to top in such a way that you're giving margin-top.
I hope it helps.
Let me assume you're experiencing the following problem: you have some divs with different heights one after another in several rows. Say, there's a very tall in the first row, forcing all the divs of the second row to "dive" deeper. I have a strong feeling, that there's no cross-browser pure-css way to improve this look much at the moment. However, you can achieve at least something with
display:inline-block;
vertical-align:top
instead of
float:left.
It will look like this:
http://jsfiddle.net/wHTQ2/
if you need something better looking, please, see this question:
css float elements with unequal heights left and up in grid
I believe it's the same thing that you're looking for. Unfortunately, there's not much you can do with pure css
Generally speaking, HTML layout is flow-based. Each element gets positioned after the one before it, either to the right of it or beneath it. There are plenty of exceptions, of course, that you can get by playing with styles, but even then, if you change the order of something, most things "flow" around it and make room for it.
But occasionally I see things that behave very differently, such as pages coming up with "dialog boxes" that float in the middle of the screen, that aren't constrained by the dimensions of the div they're parented by and don't displace other layout elements around them.
I'm trying to figure out a way to do something similar, but not quite the same. I've got a table that I'm using to display a grid (yes, actually using tables correctly) and I'd like to place an image on top of one of the grid cells. I can't put it in the cell, because it's larger than the cell and I don't want to stretch my grid out, but I want it to always display at the same position relative to the grid, even if the browser window scrolls or is resized.
I figure there has to be some way that I can do this. If I put an ID or Class on one of the <TD> cells, how do I create an <Image> that is not part of the <TD> or even the <TABLE> that it belongs to, but will always position itself over the top of that <TD> cell without displacing anything or affecting its layout?
To expand on both CJGreen and Napolux's suggestions, you can still place the image in the table cell, but position it absolutely.
[Edit] Since defining the position of table cells is supposedly illegal (therefore ignored by Firefox), you can wrap the content of each <td> in a <div> element (preferably with JS so you don't have to make massive changes) and then set the <div> position to relative:
CSS:
table td > div {
position: relative;
}
table td > div img {
position: absolute;
z-index: 999;
}
JS:
$(document).ready(function() {
$("td").wrapInner('<div />');
});
See the (updated) fiddle here - http://jsfiddle.net/teddyrised/qyu3g/
If you use
table {position:relative;}
then you can use:
table img {
position:absolute;
top: #px;
left: #px;
}
This will offset the image to a particular location within the containing table and take it out of the flow of the rest of the table around it.
If I understand it correctly you need to use offset properties together with position:absolute.
The absolute position takes your image out of the flow, the offset can give you the position of the element you want to overlay (the TD in your question).
Having the offset (px from left and top of the page for the TD) you can the move the image to the correct position.
Look here: http://jsfiddle.net/jrUsM/
jQuery documentation explains it very well.
So, I am working on a fansite, and I can't figure out why my "content" class div will not stretch. It's supposed to be 100% min-height, but it's not doing that. Also, I can't get it to stretch to the "column2" div, which is seated inside of it. Sorry if this is a simple fix, I'm very new to this. I wouldn't know where to start as far as posting coding for you guys to reference, so if you want, just go to here and view the page source.
Actually, it does stretch to the bottom --- the bottom of the html element. The problem is that your right column is position: absolute. Whenever you set an element to absolute positioning, it is detached from the normal flow, and so its container will not strech to contain it (which is a desired effect in drop-down menus and such).
Instead, you should use the float: right property on the right column and then add an empty div at the bottom which is clear: both, to ensure that the div stretches correctly.
I have a table with many rows.
I want to have an on hover effect on the rows. When someone hovers over a row a popup div displays with some additonal information about that row.
I was planning on doing this with a div and on hover making the div visible/invisible.
Now my problem is with the html/css.
How do I make the table with a div that appears on hover but does not affect the look of the table.
I was thinking z index, with position relative. But I cannot get it working.
You should use position:abolute; top: 10px; left: 20px; z-index: 1 for the div and position: relative for the tr. (top and left are only assumptions. use these for positioning the div relative to your row)
Relative positioning the row, holds it in the context. Absolute positioning the div makes its position absolute to its parent (here the row). If the row doesn't have relative the div would be positioned absolute to the body or an parent element which has set a position.
If the elements have the same z-index then the browser will display them in the order they appear in the html. So you don't have to set z-index at all. You can do something like this DEMO. (Hover over the top left cell, or the 3rd from top in the second column.) So long as the divs you want to display are below the table in which you wish to highlight.
Is it important to use only html and css in your project ? If not you could handle the hover functionality over to Javascript.