html - Placing 2 divs (top bottom) behind container div -


im trying place background divs behind container. thought place 1 div @ top , 1 @ bottom. make container have position:relative. top goes behind container. looks

http://oi62.tinypic.com/2lm3mvk.jpg

and how want

http://oi57.tinypic.com/5zjjvs.jpg

both blue divs suppossed behind , brown div container. red divs header/footer. how suppossed this?

 <body>         <div id="wrapper">             <div id="top"></div>             <div class="blueleft"></div>             <div class="padding"></div>             <div id="container"></div>             <div class="blueright"></div>             <div id="bottom"></div>           </div>     </body>  #wrapper{     width:100%;     height:100%; }  #top,#bottom{     background-color: red;     width:100%;     height:200px;     clear:both; }  #container{     background-color: brown;     width:800px;     height:600px;     margin:0 auto;     position: relative; }  .blueleft{     width: 100%;     height: 200px;     background-color: blue;     float:left; }  .blueright{     width: 100%;     height: 300px;     background-color: blue;     float:right; }

see if wanted.

http://jsfiddle.net/vleong2332/pq3823tz/

<div id="wrapper">     <div id="top"></div>     <div class="bluetop"></div>     <div class="padding"></div>     <div id="container"></div>     <div class="bluebottom"></div>     <div id="bottom"></div> </div>

css

#wrapper{     width:100%;     height:100%;     position: relative; } #top,#bottom{     background-color: red;     width:100%;     height:200px;     clear:both; } #container{     background-color: brown;     width:800px;     height:600px;     margin:0 auto;     position: relative; } .bluetop{     width: 100%;     height: 200px;     background-color: blue;     position: absolute; } .bluebottom{     width: 100%;     height: 300px;     background-color: blue;     position: absolute;     bottom: 200px;     z-index: -1; }

on html, changed class bluetop , bluebottom since more accurate semantically.

on css, since don't think you'd need float, removed them. used position: absolute on blue divs. top 1 doesn't need re-adjusted because flow puts want it. bottom, need position bottom on top of red since goes against normal flow. z-index put bluebottom behind brown div.

hope helps.


Comments

Post a Comment

Popular posts from this blog

cakephp - simple blog with croogo -

i not problem, made simple blog in croogo, problem is not adding or modifying or delete, because arabic language ?? function add in controller `public function admin_add() { $this->set('title_for_layout', __('add part')); if (!empty($this->request->data)) { $this->part->create(); if ($this->part->save($this->request->data)) { $this->session->setflash(__('the part has been saved'), 'default', array('class' => 'success')); $this->redirect(array('action' => 'index'));//, $this->part->id)); } else { $this->session->setflash(__('the part not saved. please, try again.'), 'default', array('class' => 'error')); } } }` => model `class part extends appmodel { public $name = 'part'; var $belongst...
Read more

How to group boxplot outliers in gnuplot -

i have large set of data points. try plot them boxplot, of outliers exact same value , represented on line beside each other. found how set horizontal distance between outliers in gnuplot boxplot , doesn't much, apparently not possible. is possible group outliers together, print 1 point , print number in brackets beside indicate how many points there are? think make more readable in graph. for information, have 3 boxplots 1 x value , times 6 in 1 graph. using gnuplot 5 , played around pointsize, doesn't reduce distance anymore. hope can help! edit: set terminal pdf set output 'dat.pdf' file0 = 'dat1.dat' file1 = 'dat2.dat' file2 = 'dat3.dat' set pointsize 0.2 set notitle set xlabel 'x' set ylabel 'y' header = system('head -1 '.file0); n = words(header) set xtics ('' 1) set [i=1:n] xtics add (word(header, i) i) set style data boxplot plot file0 using (1-0.25):1:(0.2) boxplot lw 2 lc rgb '#8b0000...
Read more

bash - Performing variable substitution in a string -

i have string contains use of variable, , i'd substitute variable's value string. right best have is #!/bin/bash foo='$name; echo bar' name="the name" expanded="$(eval echo "$foo")" echo "$expanded" which has obvious defects: prints the name bar while i'd print the name; echo bar instead of eval can bash's regex matching bash's string replacement: foo='$name; echo bar' name="the name" [[ "$foo" =~ \$([[:alnum:]]+) ]] && s="${!bash_rematch[1]}" && expanded="${foo/\$${bash_rematch[1]}/$s}" echo "$expanded" name; echo bar
Read more