I am trying to use <span> to address some tabular data which I want to position relative to the container edge, the container being a WordPress Toggle.
I have tried this in CSS
.px_update_number {
position: relative;left: 2em;
}
.px_update_date {
position: relative;left: 4em;
}
.px_update_notes {
position: relative;left: 6em;
}
and this in the HTML
<span class="px_update_number">SP1</span><span class="px_update_date">2015.04.16</span>
and the spacing is relative to the "column" before. If I use Absolute in the CSS then alignment is relative to the page edge, not the Toggle. And I need the toggle because there is going to be a ton of data, and at any one time someone is going to be looking only for a very specific bit.
So, am I just implementing this wrong? Or am I barking up an empty tree and I need to reconsider some aspect of what i am trying to do?
OK, so nesting s helped, but I am still having an issue. I would expect this
<span class="px_update_number">#<span class="px_update_date">DATE<span class="px_revitupdate_build">BUILD</span></span></span>
<span class="px_update_number">FCS<span class="px_update_date">2016.04.18<span class="px_revitupdate_build">20160225_1515</span></span></span>
to produce a header row with good alignment. But instead the alignments are off. Despite now getting multiple rows of the actual data to seemingly work right.
And, not sure I have it right yet, as this
<span class="px_update_number">R2<span class="px_update_date">2015.10.22<span class="px_revitupdate_build">20151007_0715</span><span class="px_revitupdate_notes">All Updates after R2 are subscription only</span></span></span>
<span class="px_update_number"><s>1</s><span class="px_update_date">2015.12.17<span class="px_revitupdate_build">20151209_0715<span class="px_revitupdate_notes">Expired</span></span></span></span>
still shows a misalignment in the second column, as if it's being aligned to the right side of the first column, not the left, so when the number of characters in the first column changes it throws everything off.
link to MCVE
span tags are inline by default. But left settings (as well as top, bottom and right) only affect block elements (which also need to have a defined position other than static). So in your CSS those left settings do nothing.
As a quick fix you can add display: inline-block to the CSS classes you posted above.
ADDED AFTER COMMENT:
Here's a codepen:
http://codepen.io/anon/pen/YWEEbg
position: relative; plus a left setting will move the element by the given value. But the space kept free for the element is not moved. So if you give your first element left: 2em; and the second element also left: 2em;, it will look as if there is no space between them.
So if you want the second element to be 4em right of the first one, you actually have to give it left: 6em; (as in my codepen)
2nd ADDITION:
Here http://codepen.io/anon/pen/rLYYXz I used margin-leftinstead of left, which does what you probably want: It creates space between the elements, without the complication of the left setting as described above.
3rd ADDITION:
Cange the position: relative to absolute and again use left (not margin-left). Now the distances are measured in relation to the parent elements upper left corner, so the second element will stay at the same position regardless of the contents of the first one:
http://codepen.io/anon/pen/grXopb
If all that is in a parent container, it will have to have `position: relative:
http://codepen.io/anon/pen/zBPpqa
You should use table tag, or grid layout to solve your problem.
So your layout would relate to column width, but not to left element.
Related
In the CSS code below, it appears that the background of divTwo has moved behind divOne. But the content of divTwo appears to have been left behind - why does the background of the div appear to move independently of the content?
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
margin:5px;
float:left
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
<div id="divOne">Div01</div>
<div id="divTwo">Div02</div>
result in Chrome
The content of divTwo is not moving independently. The content is text, so it's rendered in a line box.
Now while unfloated, uncleared blocks ignore the presence of floated elements that precede them, the line boxes that they contain don't. The line boxes will avoid the floated element and go either alongside the floated element or, if there's no space for them there, underneath the floated element.
In your example, there is no space alongside, so the text has gone underneath the floated element. But since you've set a fixed height for divTwo, there's not enough space underneath and yet inside divTwo for the line box either. So the text content overflows divTwo, hence the text appears without divTwo's background behind it.
From Mozilla provided Float Documentation
How floats are positioned
As mentioned above, when an element is floated it is taken out of the
normal flow of the document. It is shifted to the left or right until
it touches the edge of its containing box or another floated element.
So I imagine when you declare float for divOne but not divTwo, then divTwo is following the normal flow of the document which is the same position as divOne.
You may also find Documentation for CSS Display useful.
If you do want these inline, but do not want to declare float for divTwo you can use:
#divOne {
width: 300px;
height: 100px;
background-color: yellow;
float:inline-start;
}
#divTwo {
width: 300px;
height: 100px;
padding:5px;
background-color: green;
}
This is something quite frequently met in just simple HTML. In you current code, you are not using any containers, wrappers or rows. This leads for the elements to overlap, if you want them not to overlap, you should give them some positioning or padding. In the provided fiddle, I have added a padding of 50 px for the divTwo in order to increase it's box show it is seen better.
The main idea is that you never start simply writing code but carefully think about the positioning of each element on your webpage. A good practice would be to learn how to "stack" elements( That's how I call it, the term might not be correct). Another thing is that there are some certain front end frameworks which could teach you better by example how to do this.
Bootstrap, Zurb Foundation (But Bootstrap...I'm not sure how many people use Zurb)
Here's the JS Fiddle to see how exactly the div has changed:JS Fiddle
Like #ZobmbieChowder said, the logic of CSS float property is that you have a huge box which contains two smaller boxes, and now you want one is located on the left and another on the right. If you don't have the huge box first, the complier doesn't get human's logic which one shall be the left or right. It only makes sense for machine that you "define" a container first, then talk about its element position left or right.
Alternative to #jpat827 answer would be to either set div two's clear property to left or add an empty div after div one and set it's clear property to left. What
The clear property, if there is no space left for the unfloated element, prevents the unfloated element from going under the floated element.
When you clear the div two to left, then what it really does is that it places div two below the floated element.
let's say, div one was floated to right, then you would have to clear div two to the right, in order to bring it below div one.
If, there were three divs, out of which two were floated to left and right, then the clear property for the third unfloated div must be set to both so that it can clear past elements floated in either direction.
I hope this was helpful.
Thank You
I know this question has been asked multiple times, but I can't get it to work.
I have 1 screen container, in which I want 2 div's (1 content, 1 menu) next to each other.
1 div is positioned relative,
left:-830px.
So I can create a slide in effect using overflow:hidden and jQuery.
Here is a JSFiddle: http://jsfiddle.net/XWsS8/4/
Does anyone know why this isn't working?
I've seen more examples using inline-block which causes two div's to be next to each other, why does it not work in my example?
Thanks in advance :)
P.S. I don't want to use float
Has nothing to do in this case with inline-block but rather that you have #menu as position: relative instead of position: absolute. See fiddle with change.
A position: relative still causes the element to occupy the same space in the layout as it would if it were static (here's a good explanation), it just shifts the element's display rendering by the adjusted amount (-830px in your case) relative to itself (where it would have been if static).
So the second element in your case is being displaced by the "void" left from where the first element is still taking up layout space, but has been shifted outside it for rendering.
Another solution would be to keep the relative on #menu and set margin-left: -830px on the #content div to "pull" it over the space the #menu layout is taking up, as seen in this fiddle.
Both solutions offered, when the menu animates, will "overlay" the #content assuming #menu is given a z-index: 1 (see 1st solution fiddle and 2nd solution (with menu at -430px), whereas if you wanted the second solution offered to "push" the #content down below the menu on animation, then you would also have to change the margin-left back to 0 at the time of menu animation, like this fiddle shows.
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 asked this question: google chrome issue with fixed position and margin-top which finally got me to realize that top and margin-top are not the same thing. I don't know how I've missed that all these years.
Anyways that got me thinking what is the difference exactly between margin-top and top, which is how I found this question: CSS: Top vs Margin-top.
I already knew what margin-top did. But I had never extrapolated that out to think "hmm, this element is not in the DOM flow so what exactly is margin-top pushing it away from?"
From the question I asked I know that margin-top behaves in very unexpected ways when applied to an element with a fixed position. And that in Chrome at least this can lead to some crazy rules (like margin-top: -273%;).
So my Question is: How do browsers apply margin rules to elements not in the DOM flow (i.e. elements with a position value of fixed or absolute . And what about the way they are applied and rendered leads to rules, like the one described above, actually rendering the element inside the view-port?
The top property simply determines how far from the top of the containing element that the box-model should start being rendered. In the case of position: fixed, that is the window itself. In the case of position: absolute, it is the next parent element with a non-static position.
Margin, on the other hand, is part of the box-model itself. Adding margin to the top of the box increases the empty space present above the box.
Consider the following layers for a position: fixed box:
top:10px
margin-top:10px
------------border-top:1px------------
padding-top:10px
content
All of the margin, border, and padding are part of the box model. That entire element, or "piece", is just one big square when positioning. So, if you have a margin of 10px on the top of the box, and position the element 10px from the top, it will have the appearance of having 20px of margin between the top of the window and where the visible box starts.
I've also made a very simple example in jsFiddle.
If you like graphics, take this example, where the red box has a position: fixed:
As you can see in the first section, only setting position: fixed on the element doesn't actually move it anywhere. It just removes it from the flow of the document.
In the section section, adding a margin-top: 10px makes the element move down 10px because the box now has 10px of margin on the top of it. However, it hasn't actually moved anywhere. The box has just gotten taller because the box model has changed.
In the third section, using a top: 10px actually moves the box to be 10px from the top of the window container. It has the exact same box model as in the first section.
Section four is like the second section above it, except the negative margin causes it to move up ten pixels. The box model is still taller and the box still hasn't moved.
When you set an absolute position on an element, the element doesn't move at all if you don't set any other position properties. So, without a top, right, bottom, or left property set, the element stays in the position it would have been in if it had been rendered as part of the flow, it's just now removed from the flow. So adding a margin, either positive or negative, makes it appear to move up or down from that position. In reality, you're just changing the element's box model though.
You also have to realize that using a percentage on top and bottom margins (and even paddings) has nothing to do with the height. It actually uses the width to figure out how much margin is there. Saying margin-top: 10% will make that value 10% of the available width, not the available height, and making it negative will just negate that value. I mentioned this because it is relevant to that first question you linked where you were using percentages for margin-top.
I hope this covered what you were looking for. I couldn't tell what exactly you were confused about so I just explained as much as I could.
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 :-)