Forum Moderators: not2easy

Message Too Old, No Replies

Vertical reverse order

Swap two divs

         

TeofenGL

10:55 pm on Nov 28, 2008 (gmt 0)

10+ Year Member



Is there a simple way to reverse the vertical display order of two divs:

<div id="a">
AAA
</div>
<div id="b">
BBB
</div>

to look like:
BBB
AAA

... seems this was asked here and the implication was it was easy, but no answer has been forthcoming in 3+ years:
[webmasterworld.com...]

thanky

swa66

12:24 am on Nov 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



If you know enough of them (height mostly), try using relative positioning to shift one up and the other down.

e.g.:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>CSS Tooltip Compatibility</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
#a, #b {
position:relative;
}
#a {
top:1.2em; /* height of #b */
}
#b {
top:-1.2em; /* - height of #a */
}
</style>
</head>
<body>
<p>before</p>
<div id="a">
AAA
</div>
<div id="b">
BBB
</div>
<p>after</p>
</body>
</html>

Only tested it in FF3 (the sample is dependent on the default line height, so might it will not work properly everywhere [e.g. opera] )
But that can be fixed with a


body {
line-height: 1.2em;
}

Others might include absolute positioning etc. but something that can work in a body and not need to know the elements' height: now that would be interesting!

TeofenGL

12:31 am on Nov 29, 2008 (gmt 0)

10+ Year Member



that would be nifty, but no, i am dealing with something that will be displaying anything from about 20px to thousands as element A (it's a file list)
in structural terms, all it contains is a big PRE block, see
[webmasterworld.com...]

swa66

2:51 am on Nov 29, 2008 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hmm that seems a rather complex approach to indexing a directory.

Why not generate the index from php itself (opendir/readdir/closedir) instead of trying to control how apache does it with php things ?

An alternative might be fixed positioning: glue your header and footer to the viewport and let the scrollable area in between be used by the rest of the page.
(IE6 -as always- needs serious help to get position:fixed to work)

TeofenGL

7:30 pm on Nov 29, 2008 (gmt 0)

10+ Year Member



ok, so it seems that the answer generally is : there is no way or no one knows how to simply flip the vertical order of two divs.

not sure what's too complex about it -- could you clarify?

in the context of this question, i am just trying to prevent having to run any code after the list, but would like to throw some elements down there anyway... i have a workable-enough solution for the moment with :after but it's a little limited.
there are specialized instances in which i do have indexing from php directly but that's when i need element by eleent control of items within the list -- not the case usually.

however, there are issues with pulling the indexes from php, most of which apache autoindex has already built around. (restricted file names, 40 different icons, etc) if i were building indexing itself in php, i would have to work around all of these issues, have a custom config for restricted names, symlinks, directory handling, icons... seems like reinventing a wheel that works.