Jump to content

Luponius

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

Luponius's Achievements

Newbie

Newbie (1/7)

0

Reputation

  1. Luponius
    Not to worry, discussing it is still a big help. I've been testing from scratch some different things. I'm currently trying to set all the positions as fixed and see where that might take me. I'd be mroe than happy to use Javascript since the project contains jQuery already anyways, I'm just completely lost. This detail is killing me and I've found no proper solutions as of yet.
  2. Luponius
    That's what I'm already doing. They're all in the content div which contains them, and the percentages were adjusted a little bit to allow for margin and padding. This however doesn't really appear to do much in terms of height since the initial div has no hardcoded height set to it, so everything is floating without any actual height. What this all boils down to is that the only volume available is the text / images I write in each. Width works fine since that's pre-determined but height is a value that is, to my konwledge either defined in terms of pixels, or just some form of percentage which won't do much. If I could set everything PERCENTUALLY based on the screen size itself that would be great... this way I could set the content div to wrap between header and footer say ... 20% -> 80% top to bottom, and the batteryZone divs could be 25% to 50% and 50% to 70% in height. I don't know if fixed position could allow this, but I must make sure it's based on screen size. The one additional issue I have is to dynamically resize everything contained by the divs (text,images etc) based on the size of the div itself. Thanks for the reply however, it's better than nothing, you helped me visualize my issue better. =]
  3. Luponius
    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>
×
×
  • Create New...