html - Positioning a container without it moving when space is changed -

-

i'm trying position 1 container in specific place - how can , make stay proportionate place when zoom in or out screen?

html:

<?xml version="1.0" encoding="utf-8"?> <!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">  <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="test.css"> <link href='http://fonts.googleapis.com/css?family=special+elite' rel='stylesheet' type='text/css'> </head>  <body>  <div id="huvud">  </div>  <div id="nav-yttre">     <div id="nav-mitten">         <ul id="nav-inre">             <li><a href="index.html">hem</a></li>             <li><a href="om_oss.html">om oss</a></li>             <li><a href="blogg.html">blogg</a></li>             <li><a href="marken.html">m&auml;rken</a></li>                   <li><a href="hitta_hit.html">hitta hit</a></li>         </ul>     </div> </div>  <div id="main">      <p>hem</p>  </div>  <div id="right">     <p>this container</p> </div>  <div id="fot">     <div id="adress">         <p id="rub">bes&ouml;ksadress</p>         <p>v&auml;gen 1, 12345 stockholm</p>     </div>      <div id="kontakt">         <p id="rub">kontakta oss</p>         <p>telefon: 08-123 45 67</p>         <p>mail: info@hej.se</p>     </div>      <div id="tider">         <p id="rub">&ouml;ppettider</p>         <p>vardagar: 10-19<br>l&ouml;rdag: 10-17<br>s&ouml;ndag: 11-16</p>       </div>      <div id="design">         <p>webbplatsen &auml;r gjord av md</a></p>     </div>  </div>   </body>

css:

/* header */  #huvud{ width: 1000px; margin: 0 auto; }  #header{ display: block; }  /* meny */  #nav-yttre{ width: 1000px; height: 35px; margin: 0 auto; background-image: url("rusty-bar2.jpg"); }  #nav-mitten{ display: table; width: 100%; padding: 10px; }  #nav-inre{ display: table-row; list-style: none; font-family: 'special elite', cursive; font-size: 25px; }  #nav-inre li{ display: table-cell; }  #nav-inre li a{ display: block; text-decoration: none; text-align: center; color: #eeeeee; }  #nav-inre li #here{ color: #221f20; }  #nav-inre li a:hover{ color: #221f20; }  /* main */  #main{ width: 1000px; margin: 0 auto; min-height: 500px; }  #fadein {  margin: 10px auto; position:relative;  width:281px;  height:500px;  padding: 5px; box-shadow: 0 0 20px rgba(0,0,0,0.4); }  #fadein img {  position:absolute;  }  /* right */  #right{ position: absolute; left: 1450px; top: 200px; background-color: #221f20; height: 300px; width: 200px; }  #right p{ color: white; }  /* fot */  #fot{ width: 1000px; margin: 0 auto; border-top: solid #221f20 1px; text-align: center; clear: both; }  #adress{ width: 334px; float: left; }  #kontakt{ width: 333px; float: left; }  #tider{ width: 333px; float: right; }  #design{ width: 500px; margin: 0 auto; clear: both; text-align: center; background-image: url(rusty-bar-small.jpg); }  #design p{ color: #eeeeee; font-weight: bold; }  #design a{ color: #eeeeee; }  #design a:hover{ color: #221f20; }  #rub{ font-weight: bold; }  /* allmänt */  p{ font-family: verdana, arial, sans-serif; color: #221f20; font-size: 0.9em; }

fiddle: http://jsfiddle.net/nvsodsfs/1/

and result: http://jsfiddle.net/nvsodsfs/1/embedded/result/

you have div centered , 1000px wide: #huvud.

place div in #huvud:

<div id="huvud">     <div id="right">         <p>this container</p>     </div> </div>

make #huvud display: relative position absolute children position in relation it. looks this:

#huvud {     width: 1000px;     margin: 0 auto;     position: relative; }

make #right left: 100% forced outside of new parent , give left margin desired:

#right {     position: absolute;     left: 100%;     top: 200px;     background-color: #221f20;     height: 300px;     width: 200px;     color: #fff;     margin-left: 100px; /*need more?*/ }

complete example

all other content has been removed simplicity.

make example full-screen , see remain fixed in place on zoom-in/out

/* header */    #huvud {    width: 1000px;    margin: 0 auto;    position: relative;  }  /* right */    #right {    position: absolute;    left: 100%;    top: 200px;    background-color: #221f20;    height: 300px;    width: 200px;    color: #fff;    margin-left: 100px;  }
other content removed simplicity - div way >>>>>>     <div id="huvud">    <div id="right">      <p>this container</p>    </div>  </div>


Comments

Post a Comment

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

-
i have write down code showing error ma not getting it: please help: showing mat not numerical tuple: import cv import cv2 capture = cv2.videocapture("j.3gp") while(1): _, frame1 = capture.read() grayimage1 = cv2.cvtcolor(frame1, cv2.color_bgr2gray) _, frame2 = capture.read() grayimage2 = cv2.cvtcolor(frame2, cv2.color_bgr2gray) differenceimage = cv2.absdiff(grayimage1,grayimage2) thresholdimage = cv2.threshold(differenceimage,25,255,cv2.thresh_binary) cv2.imshow("difference image", differenceimage) cv2.imshow("threshold image", thresholdimage) cv2.imshow("image", frame1) k = cv2.waitkey(30) & 0xff error arising : ----------------------------------------------------------------------------------------- traceback (most recent call last): file "desk.py", line 15, in <module> cv2.imshow("threshold image", thresholdimage) typeerror: mat not numerical tuple
Read more

c# - MSAA finds controls UI Automation doesn't -

-
i'm working on automating windows application. i'm using teststack white framework. i've hit problem. program has 'window' object cannot see inside of. white shows no controls inside of it. inspect.exe shows no controls inside of either when running in ui automation mode. if switch inspect msaa see controls inside fine. there anyway me use msaa c# handle on these controls? if can identify msaa functions need, can use p/invoke call them c#. here's example article doing msaa: http://www.codeproject.com/articles/38906/ui-automation-using-microsoft-active-accessibility also, pinvoke.net can used identify iaccessible (msaa) functions: http://www.pinvoke.net/search.aspx?search=iaccessible&namespace=[all] here's answer along lines: msaa com-based? finally, alternative p/invoke, might able use tlbimp.exe create wrapper assembly oleacc.dll, , access msaa functions through it. i'm not sure if works msaa, it's worth try. as e
Read more

wordpress - .htaccess: RewriteRule: bad flag delimiters -

-
pulling hair out on one. have following .htaccess file custom redirects in addition wordpress's default settings. when tested on local wamp server worked fine after moving production i'm not getting rewriterule: bad flag delimiters error in server log , after while site goes down internal server error any appreciated. in advance! <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^rockford_weddings___welcome\.html$ /wedding/ [r=301,l] rewriterule ^blog/?$ /journal/ [r=301,l] rewriterule ^blog/(.*)$ /$1 [r=301,l] rewriterule ^portraitinvestment/?$ /portraitinvestment\.pdf [r=301,l] rewriterule ^weddinginvestment/?$ /weddinginvestment\.pdf [r=301,l] rewriterule ^holidaycards2014/?$ /holidaycards2014\.pdf [r=301,l] </ifmodule> # begin wordpress <ifmodule mod_rewrite.c> rewriteengine on rewritebase / rewriterule ^index\.php$ - [l] rewritecond %{request_filename} !-f rewritecond %{request_filename} !-d rewriterule . /index.php [l] </
Read more