Search the Community
Showing results for tags 'percent'.
Found 2 results
-
Hi! I'm experiencing a wierd thing when I open my website in Firefox and Opera. The images loading in with a preloader is shown at actual size shortly before resizing to percentage-size according to my CSS. In Chrome the images appear as they should right from the start. What's the problem here?http://mace.macework.se/trycksaker/ Grateful for help!Thanks
-
Hi W3, new member over here. I'm in a bit of a bind right now with a project I've been working on for the past few months, and it's now come down to developing html content (using jQuery Mobile framework) to be deployed on mobile devices of varying size. The main problem is resizability and readability of text (which I'm not even sure if this would be a problem or not, however I'd rather be safe than sorry when the deployment phase happens). Currently I've managed the following on this page: http://i.imgur.com/p9JZ6jo.png The final result should look like this: http://i.imgur.com/lRLooXq.png The problem is, as I see it, that everything's clearly too big to be deployed on a mobile device. It's relatively big even for small desktop monitors and I doubt this will be useable on a device since everything will be compressed to extremely tiny values. I need to make this as dynamic as possible based on resolution (so everything should scale properly, including the image, which gets centered in the div (don't know how to pull that off) as well as the text, which takes up just the amount of space available in the div, and adjusts itself in the form of a ratio if possible. The layout must be kept as is, that is 4 divs which take up a quarter of each, with content that's yet to be further added in the middle of each div. I had a problem with making the divs take an equal amount of height so I set the CSS to be exactly 240px long, which is too much for a mobile device in most cases... I've played about with relative/absolute positioning which sent all the content inside the divs flying to the footer or the left margin and other weird results... I appreciate any help possible to make this dynamic and neat looking. CSS being used for the divs specifically is: /*Power Storage*/.batteryZone { width:45.5%; background-color: #878787; border-radius:10px; border: 1px solid #5C5C5C; float: left; margin:1%; padding:1%; min-height:240px;} This allows me to float 2 boxes together next to one another and the remaining two float below it through a clear:both; div tag which separates them. HTML for the page is as follows: <body> <div id="powerStorage" data-role="page"> <div data-role="header"> <a href='index.html' class='ui-btn-left ui-btn-back' data-icon='arrow-l' data-transition="slide" data-direction="reverse">Back</a> <h1>Power Storage</h1> </div> <div data-role="content"> <div id="content"> <div id="title"> <h1>Power Storage</h1> </div> <div class="batteryZone"> <!-- Battery description and general Info--> <h3>Auxiliary Battery 1</h3><br /> <h6>Location: Bridge, Upper Deck</h6> <br /> <h3>Status:</h3> <span id="battStatus1"></span> <br /> <h3>Operation:</h3> <span id="battOp1"></span> </div> <div class="batteryZone"> <!-- Battery level code here--> <img src="/images/battery/Battery5.png" alt = "Battery Low!" width=300px /> <br /> <br /> </div> <div class="extend"></div> <div class="batteryZone"> <!-- Time Code Here --> <h3>Load</h3> <div id="battLoad1"> </div> <br /> <h4>Time Remaining</h4> <br /> <div id = "battTime1"></div> </div> <div class="batteryZone"> <div class="source"> <h3>Current</h3> </div> <div class="source"> <h3>Voltage</h3> </div> <div class="source"> <h3>Temperature</h3> </div> </div> </div> </div> <div data-role="footer"> <h4>Footer content</h4> </div> </div> <!-- / page --> </body>
