html - Elements lose position when resizing the browser -
html - Elements lose position when resizing the browser -
i new web design , don't know how resolve next problem.
the elements in fine position when browser maximized. when browser re-sizes elements , img elements move different directions.
any tip or advice useful. want either img stand in position or shrink according resizing.
here website
and code
css
* { margin: 0; padding: 0; } html { height: 100%; } body{ width:100%; height: 100%; font-family:gillsansstd-light; } #wrapper { width:auto; overflow-x:scroll; } #header{ position:fixed;width:100%; height: 15%; background:rgb(218, 208, 185);} #blank { width:100%; height: 15%; background:white;} #messen { width:100%; height:85%; background:rgb(218, 208, 185); } #arrangorerne { width:80%; height:80%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; } #forbesogende { width:80%; height:80%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; } #forudstillere { width:80%; height:100%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; } #tidnsted { width:80%; height:100%; background:rgb(218, 208, 185); padding-top:15%;padding-left:20%; } #arrow{ width: 0; height: 0; border-style: solid; border-width: 0 200px 200px 0; border-color: transparent rgb(90, 47, 37) transparent transparent; } #menutd{ background-color:rgb(90, 47, 37); } #logotd{ position:relative; background-color:rgb(90, 47, 37); } #logo{ position:absolute; top:-10%; right:10%; width:75%; } #side_logotd{ position:relative; } #side_logo{ position:absolute; float:left; left:-170%; top:0%; } #texttd p{ vertical-align: middle; } table{ border-collapse:collapse; } table.header_table{ width:100%; position: absolute; bottom: 0px; } table.text_table{ width:100%; height:100%; } table.pricetable{ width: 20%; margin:10px; display:none; border:1px solid black; } table.pricetable td{ white-space:nowrap; padding:5px; } h1{ font-family:gillsansstd; padding-left:10px; } h2{ font-family:gillsansstd; padding-left:10px; } p{ font-family:gillsansstd-light; margin-top:20px; line-height:1.5em; padding-left:10px; } a:link { color: rgb(90, 47, 37); } /* visited link */ a:visited { color: rgb(90, 47, 37); } /* mouse on link */ a:hover { color: rgb(112, 94, 91); } /* selected link */ a:active { color: rgb(112, 94, 91); } html
<div id="header"> <table class="header_table" border="0"> <tr> <td width="10%"></td> <td width="10%"><div id="arrow"></div></td> <td width="50%" valign="bottom" id="menutd"> <ul id="nav"> <li><a href="#messen">messen</a></li> <li><a href="#arrangorerne">arrangørerne</a></li> <li><a href="#forbesogende">for besøgende</a></li> <li><a href="#forudstillere">for udstillere/partnere</a></li> <li><a href="#">tid&sted</a></li> </ul> </td> <td width="30%" id="logotd"><img src="img/logo-negativ.png" id="logo"></td> </tr> </table> </div> <div id="blank"></div> <div id="messen"> <table class="text_table" border="0"> <tr> <td width="20%" id="side_logotd"><img src="img/logo-element.png" id="side_logo"></td> <td width="50%" id="texttd"> <h1>velkommen til entrepreneur motion 2015</h1> <p>entrepreneur motion 2015 er en kombineret messe og kongress, der alvor ønsker @ sætte iværksætteriet på dagsordenen danmark. det er et professionelt forum, hvor iværksættere og mindre virksomheder bl.a. kan udveksle erfaringer, søge rådgivning og finde finansiering.</p> <p>med lanceringen af entrepreneur motion 2015 ønsker vi et opgør med de forhold, der ligger til grund for, @ dansk iværksætterkultur mistrives. vi ønsker @ sætte fokus på udfordringerne danske iværksættere samt rejse en debat om, hvordan vi kan styrke iværksætteriet danmark. på entrepreneur motion 2015 samler vi derfor de kræfter, der alvor kan finde løsninger på iværksætterkulturens udfordringer danmark. vi har som mål @ forbedre iværksætterkulturen danmark, og vi vil gøre op med lønmodtagermentaliteten.</p> <p>vi har opstillet følgende konkrete mål festivalen:<br><br> <ul style="list-style-position:inside; padding-left:30px;"> <li>vi vil øge antallet af iværksættere danmark</li> <li>vi vil få flere danske iværksættere til @ lykkedes med deres drøm</li> <li>vi vil inspirere flere danske iværksættere til @ videreudvikle deres forretning til vækstvirksomheder</li> </ul> </p> </td> <td width="30%"></td> </tr> </table> </div> <div id="arrangorerne"> <h1 style="margin-bottom:60px;">arrangørerne</h1> <table width="100%"> <tr> <td width="15%"><img src="img/uffe.jpg"></td> <td width="30%" valign="top" style="padding-left:1em;padding-right:2em;"><b>uffe just</b><br>ceo & founder - brand universe<br><br><b>brand universe</b> arbejder til daglig med @ rådgive og hjælpe iværksættere og mindre virksomheder med @ lykkes med deres idéer og forretninger. brand universe har et indgående kendskab til forholdene iværksættere og mindre virksomheder, samt hvilke udfordringer disse virksomheder kæmper med. </td> <td width="15%"><img src="img/jesper.jpg"></td> <td width="30%" valign="top" style="padding-left:1em;padding-right:1em;"><b>jesper Åndahl</b><br>ceo - copenhagen exhibition group<br><br><b>copenhagen exhibition group</b> har mere end 20 års erfaring med @ arrangere danske og internationale messer og kongresser.</td> <td width="10%"> </td> </tr> </table> </div> <div id="forbesogende"> <h1 style="margin-bottom:60px;">for besøgende</h1> <table width="100%"> <tr> <td width="80%"></td> <td width="20%"> </td> </tr> </table> </div> <div id="forudstillere"> <h1 style="margin-bottom:60px;">for udstillere/partnere</h1> <p>skab vækst din og andres virksomheder. entrepreneur motion 2015 afholdes første gang 2015, og det overordnede mål er @ forbedre iværksætterkulturen danmark og gøre op med lønmodtagermentaliteten.</p> <p>vi ønsker, @ udstillerne er:<br><br> <ul style="list-style-position:inside; padding-left:30px;"> <li>virksomheder, der arbejder med iværksættere og mindre virksomheder eller ønsker kontakt til denne målgruppe</li> <li>kapitalinstitutioner på udkig efter nye investeringsprojekter</li> <li>interesse- og brancheorganisationer, der opnår mulighed @ fremme deres synspunkter, sikre synlighed samt vise deres støtte til iværksætteri</li> </ul> </p> <h2><a href="javascript:void(0);" onclick="displaytext('facts')">facts om stande</a></h2> <p id="facts" style="display:none;">følgende er inkluderet standpriserne:<br> 2 m høje hvide stofvægge til nabo (tilkøb af yderligere væg: 180 kr. pr. løbende meter (bestilles hos onfront)). <br> strøm (1,8 kw) – et stik med 3 stikdåser<br> en lampe pr. ca. 5 m2 – 700 w gaslamper (projekttørlys<br> </p> <br> <h2><a href="javascript:void(0);" onclick="displaytext('standprice')">standpriser</a></h2> <table id="standprice" class="pricetable"> <tr> <td>op</td><td>til</td> <td> 44 m2: </td><td> </td><td>830,- kr. pr. m2</td> </tr> <tr> <td>45</td><td>–</td><td> 80 m2: </td><td> </td><td>780,- kr. pr. m2</td> </tr> <tr> <td>81</td><td>–</td><td>126 m2: </td><td> </td><td>745,- kr. pr. m2</td> </tr> <tr> <td>over</td><td></td><td> 126 m2: </td><td> </td><td>705,- kr. pr. m2</td> </tr> </table> <br> <h2><a href="">generelle lejebetingelser</a></h2> <br> <p><b>bliv partner</b> kontakt uffe på 70 70 76 70 og book et møde, så vi kan drøfte jeres mulighed partnerskab.<br> info om ledige stande kontakt jesper Åndahl på 21 27 08 14. </p> </div> <div id="tidnsted"> <h1 style="margin-bottom:60px;">tid&sted</h1> <p></p> </div>
it's because of elements rely on size of window (via percentages) compute are. due this, changing size of window changes positions of of elements.
to prepare this, seek not utilize percentage widths , heights much. create container div fixed size (around 1000px) if need utilize percentages based on fixed size, meaning elements won't move around.
edit: mark suggested, utilize min-width:
<div id="container" style="min-width:900px;width:100%"> </div> which create div grow if window above 900px, stop div shrinking below it. or fixed size, container doesn't shrink or grow:
<div id="container" style="width:1000px"> </div> html css responsive-design
Comments
Post a Comment