Member Avatar for pilipino93

Hey so I'm a bit new to html and css. I can do some basic thigns but some stuff I am starting to notice is the position of divs and my pictures / links I am placing. I am hosting this small server and I was working on a webpage earlier today. I was formatting the position of everything so it looked just perfect.

But when my friend looked at it on his computer he said some thigns were generally off. In theory I'm thinking that since his computer is literally wider than mines that that is the reason why some thigns seemed out of order on his computer. He told me the links on my nav bar were all moved leftward more than they should be and my background picture had white spaces on the left and right, this I believe is because the picture wasn't large enough to fit the resolution of his screen.

I was wondering if there were some or code to make it so that the pages fit the screen on any one person's computer no matter the dimensions of their desktop screen. If so I'd gladly appreciate the help. Thanks. This is an example of one of my pages:

<html>
<head>
<title>Atomic Gunz</title>
<link rel="stylesheet" type="text/css" href="Class.css">
<style type="text/css">
body
{ background-image:url("BKG/AtomicGunzWeb4.jpg"); background-position:top center; background-repeat:no-repeat; color: #ffffff;}
</style>

<div class="1"><span style="position: absolute; top:150px; left: 210px;">
<a href="http://5.83.176.128/Abused/index.php">Home</a><img src="BKG/bar.gif" style="position: absolute; left: 100px; top: 8px;" />
</span></div>
  • 3 Contributors
  • 6 Replies
  • 87 Views
  • 16 Hours Discussion Span
  • Latest Post Latest Post by teedoff
Member Avatar for pixelsoul

I am not really sure what the code you posted has to do with the description of the problem. Do you have an example online that can be seen? It would be a lot easier to advise on if it was.

Member Avatar for teedoff

I was wondering if there were some or code to make it so that the pages fit the screen on any one person's computer no matter the dimensions of their desktop screen.

Yes, dont use absolute position for all your elements. It has its uses, but they are rare. Think about what your telling an element when you position it using absolute.

You say "I want this element of 200x100 pixel dimension to be 100px from the top of the browser window, and 50 px from the left of the browser window." Now think about someone with a screen resolution of 800x600, there are still many who do, versus someone with a res of 1400x1100. You can see how the problems will arise.

You should do some reading on the pitfalls of using absolute positioning, and what to use instead here.

Member Avatar for pilipino93

Alright I am reading it now, thank you teedoff. And yes, pixelsoul, as you can see the website is in the code if you did not view it all. But as you can tell already it is hamachi-based.

Member Avatar for pilipino93

Alright so it goes into lengthy detail on how positioning with absolute is not well to use. I understood that from your post however, it says 'float' is better so I will be researching on that. For any of you, in your opinions, what do you think is best to use by far? I'm just putting up a simple website, I'm only working on the nav bar at the moment.

Member Avatar for pixelsoul

I hardly ever use absolute positioning, there is nothing wrong with using it but it has to be for the right reasons. I use relative positioning all the time in development of my sites. Using float is good too in certain situations but that is not really so much positioning as it is describing a behavior or an element on the page.

Member Avatar for teedoff

The natural flow of a web document is top to bottom. Floating an element takes is out of that natural flow, as in the case of two or three column layouts, elements that need to side by side, and images as well.

For example, you can have a site logo that you want inside a header div and positions all the way left of your page. FLoating that image left does just that.

When this natural flow is interrupted by a float, then to get BACK that natural flow, you need to clear your floats by one of a couple different methods.

So yes, you should do some reading on the float property: how they work and when to use them.

Edited by teedoff because: n/a
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.