html5 - Options for aside that can be after main content in mobile views, top right for tablet/desktop -


working on responsive design , i'm curious options positioning aside appears on top right of content area in widescreen views after main content in mobile browsers.

e.g.

here's article. [list of winners] article text can wrap around aside. article text can wrap around aside.

in html5 know use following html:

<div class="main"> <article>here's article</article> <aside>list of winners</aside> </div>

and following css:

@media screen , (min-width:768px) { .main article {     float:left;     width:57%; } .main aside {     float:right;     width:28%; } }

that allow me have aside next article in widescreen , below mobiles. article text not wrapped around bottom of aside , kept @ 57% width full length of page, after aside finished.

is there way achieve i'm looking or solution kludgy?

thanks.

if don't mind involving js:

http://jsfiddle.net/77nwn/2/

html:

<div class="main">     <aside class="float">list of winners</aside>     <article>         <p>here's article</p>         <p>article text can wrap around &lt;aside&gt;</p>         <p>article text can wrap around &lt;aside&gt;</p>     </article> </div>

css:

@media {     .main aside.float {         display:none;     } } @media (min-width:350px) {     .main aside.under {         display:none;     }     .main aside.float {         display:initial;         float:right;         width:28%;     } }

js:

window.onload=function(){     var aside=document.queryselector("div.main aside.float");     aside=aside.clonenode(true);     aside.classname="under";     document.queryselector("div.main").appendchild(aside); };

if don't mind using flexbox:

(inspired @dstorey)

warning: tested on chrome 26 desktop , firefox 21 desktop. compatible table / mdn guide.

http://jsfiddle.net/77nwn/3/

html:

<div class="main">     <aside>list of winners</aside>     <article>         <p>here's article</p>         <p>article text can wrap around &lt;aside&gt;</p>         <p>article text can wrap around &lt;aside&gt;</p>     </article> </div>

css:

@media {     .main aside {         float:right;         width:28%;     } } @media (max-width:350px) { /* notice change min-width max-width */     .main {         display:-webkit-flex;         display:flex;         -webkit-flex-direction:column;         flex-direction:column;     }     .main article {         -webkit-order:1;         order:1;     }     .main aside {         -webkit-order:2;         order:2;         float:initial;         width:initial;     } }

no js involved.

i'm not sure "old syntax" is, didn't pay attention on topic when they're discussing it...


Comments

Post a Comment

Popular posts from this blog

python - How to create a legend for 3D bar in matplotlib? -

Image
given ax = plt.subplot() : ax.bar()[0] can passed plt.legend() . however, ax.bar3d() returns none . how create legend displayed bars? update: passing legend="stuff" ax.bar3d() , calling ax.legend() raises /usr/lib/python2.6/site-packages/matplotlib/axes.py:4368: userwarning: no labeled objects found. use label='...' kwarg on individual plots. warnings.warn("no labeled objects found. " you need use proxy artist legends not supported. this code: from mpl_toolkits.mplot3d import axes3d import matplotlib.pyplot plt import numpy np fig = plt.figure() ax = fig.add_subplot(111, projection='3d') x, y = np.random.rand(2, 100) * 4 hist, xedges, yedges = np.histogram2d(x, y, bins=4) elements = (len(xedges) - 1) * (len(yedges) - 1) xpos, ypos = np.meshgrid(xedges[:-1]+0.25, yedges[:-1]+0.25) xpos = xpos.flatten() ypos = ypos.flatten() zpos = np.zeros(elements) dx = 0.5 * np.ones_like(zpos) dy = dx.copy() dz = hist.flatten() ax...
Read more

java - Multi-Label Document Classification -

i have database in store data based upon following 3 fields: id, text, {labels}. note each text has been assigned more 1 label \ tag \ class. want build model (weka \ rapidminer \ mahout) able recommend \ classify bunch of labels \ tags \ classes given text. i have heard svm , naive bayes classifier, not sure whether support multi-label classification or not. guides me right direction more welcome! the basic multilabel classification method one-vs.-the-rest (ovr), called binary relevance (br). basic idea take off-the-shelf binary classifier, such naive bayes or svm, create k instances of solve k independent classification problems. in python-like pseudocode: for each class k: learner = svm(settings) # example labels = [class_of(x) == k x in samples] learner.learn(samples, labels) then @ prediction time, run each of binary classifiers on sample , collect labels predict positive. (both training , prediction can done in parallel, since problems assumed ...
Read more

php - Dynamic url re-writing using htaccess -

how can rewrite http://mydomain.com/test/master.php?catid=2&subcatid=8 http://mydomain.com/test/master.php/catname/subcat using .htaccess file. once rewritten, how can access these parameters in master.php? note: untested, let me know if doesn't work. rewriterule ^master.php/([a-za-z0-9_-]+)/([a-za-z0-9_-]+)$ /master.php?catid$1&subcatid=$2 [l]
Read more