Jump to content


 


Register a free account to unlock additional features at BleepingComputer.com
Welcome to BleepingComputer, a free community where people like yourself come together to discuss and learn how to use their computers. Using the site is easy and fun. As a guest, you can browse and view the various discussions in the forums, but can not create a new topic or reply to an existing one unless you are logged in. Other benefits of registering an account are subscribing to topics and forums, creating a blog, and having no ads shown anywhere on the site.


Click here to Register a free account now! or read our Welcome Guide to learn how to use this site.

Photo

Positioning things with percentages


  • Please log in to reply
3 replies to this topic

#1 Ray Parrish

Ray Parrish

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:04:50 AM

Posted 03 March 2010 - 04:13 AM

Hello,

I am developing a graph in HTML div tags with colored backgrounds as elements, and am having a bit of trouble with making it dynamic by positioning things with percentages instead of hard pixel values.

Have a look at the source code of http://www.rayslinks.com/Graph.html

Note that the main enclosing div for the first graph [with class, and id set to 'graph'] has a relative position of 1% which I expected to put it really close to the left side of the browser window, but it does not, it puts it about where the second graph is, which is set with hard pixel values.

Inside the graphbody div, the first bar div is set with absolute left position equal to 0 %, and it is in it's expected extreme left position within the graphbody div.

Even using absolute on the graph div and setting left to 0% leaves it far out from the left edge instead of putting it at the extreme left edge of the page as I was expecting it to do.

Can anyone tell me why this is?

Thanks for any help you can be.

Later, Ray Parrish

BC AdBot (Login to Remove)

 


#2 Romeo29

Romeo29

    Learning To Bleep


  • Members
  • 3,194 posts
  • OFFLINE
  •  
  • Gender:Not Telling
  • Location:127.0.0.1
  • Local time:07:50 AM

Posted 03 March 2010 - 10:20 AM

Note that the main enclosing div for the first graph [with class, and id set to 'graph'] has a relative position of 1% which I expected to put it really close to the left side of the browser window, but it does not, it puts it about where the second graph is, which is set with hard pixel values.

To visually see where graph div is in your browser, add this to its style border:2px solid red; You would find it is where you wanted it to be.

#3 Ray Parrish

Ray Parrish
  • Topic Starter

  • Members
  • 91 posts
  • OFFLINE
  •  
  • Gender:Male
  • Location:Cottage Grove, Oregon
  • Local time:04:50 AM

Posted 03 March 2010 - 11:49 AM

Note that the main enclosing div for the first graph [with class, and id set to 'graph'] has a relative position of 1% which I expected to put it really close to the left side of the browser window, but it does not, it puts it about where the second graph is, which is set with hard pixel values.

To visually see where graph div is in your browser, add this to its style border:2px solid red; You would find it is where you wanted it to be.


Thank you, you are correct. I was forgetting that the outer graph div extended so much further to the left than the actual graphbody div does.

Now to convert all of the height, width, top, left, and bottom values to percentages so it will dynamically adjust to the browser's page area, and be more logically adjustable to values from more than one data set.

I am planning to generate a JavaScript that will allow the visitor to click buttons to load values into the graph for different months, and for different traffic parameters like page views, visitors, or search engine visits. This will allow me to dispense with the second bar graph, and simply change the main graph on demand to display what the user wants to see.

That JavaScript, as well as the entire page will get written to file by a Python script that reads the daily server log files, and compiles all of the data needed to generate the HTML representation of that data.

#4 lightsoff

lightsoff

  • Members
  • 4 posts
  • OFFLINE
  •  
  • Local time:07:50 AM

Posted 17 July 2010 - 12:33 AM

Hey Guys,

I'm a noob web designer and new to this forum and am trying to make a background that fits the entire page and adjusts depending on the size of the screen. The original size of the background was width= 640, height= 480. The image is a flash image that's been imported into dreamweaver. I've used the standard " <img src="#" width="100%" height="100%"> but it doesn't fully cover the entire webpage. Any help would be greatly appreciated in this matter :thumbsup:

Programs: CS3 Dreamweaver, Flash




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users