homepage Welcome to WebmasterWorld Guest from 23.22.194.120
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Screen resolution and image positioning
CSS Screen Resolution
crudmuffin




msg:3736864
 11:21 pm on Sep 2, 2008 (gmt 0)

Yeah Yeah Yeah, its everyone's favorite debate topic! I chose to use CSS direct to my pages instead of a seperate file because the site is small. I am using VS2008 to develop this ASP site. I just started the UI for the site and I ran into an issue with absolute positioning. I am using percentages and that has worked well for me so far.... However 1 small glitch...

My code is working fine with 1024 X 768, however any higher resolution and this image moves to the right on the "x" axis. My "y" axis (Vertical) works perfectly. Please take a look at the code below and tell me what I am doing wrong.

<form id="form1" runat="server"></form>
<div>

<body background="test copy.jpg" class="newStyle1">
<style type="text/css">
.newStyle1
{
background-color: #000000;
background-image: url('test copy.jpg');
background-repeat: no-repeat;
background-position: center bottom;
}
.newStyle2
{
position: fixed;
width: auto;
height: auto;
bottom: 4%;
right: 14%;
z-index: auto;
}
</style>
<p><img src="phone.png" alt="Contact Information"; class="newStyle2";/></p>
<script type="text/javascript" src="imgRoll.js"></script>

/I am sure after this are the closing tags </Div> and </body> but I didn't include it because I think I have bad CSS syntax.*/

The image using .newStyle2 moves to the right no matter how I code for it. I have tried not using the .newStyle2 class and going with direct properties in the <img> tag but that had the same result.

One more note! "Position: Fixed" on .newStyle2 didn't matter. I tried absolute, relative, my mom, everything there!
I really appreciate any input and will glady pay u Tuesday for a hamburger today!

 

crudmuffin




msg:3736866
 11:26 pm on Sep 2, 2008 (gmt 0)

Oh Yeah. I am using the Web Application Developer in VS2008. When I set the position of an image to absolute and try to drag it around using the design tool, it also drags the background image? What gives on that? It is the beta version of VS2008 but I haven't heard anyone else having that issue so I was wondering if that was related?

swa66




msg:3738120
 10:24 am on Sep 4, 2008 (gmt 0)

I think you'll find that many of us out here don't touch tools to craft pages but do it directly.

The code there, well it got issues. A few obvious ones:

  • spaces in URLs (test copy.jpg) will only give you headaches, avoid spaces or learn how to code them in URLs (%20 is a space)
  • I'd put <style> tags in the header
  • if you use class="newStyle1" and it defines the background, there's no need to add a background on the body tag anymore
  • make sure your code validates, all bets are off if it doesn't as the browsers will start guessing what you meant

I only create CSS by checking it in a single browser that's not IE (IE will set you on the wrong foot). If you add something that didn't work, take it out again. After major milestone I might check it in the standards compliant browsers (FF, Opera, Safari) to make sure I'm not coding against a bug of one of them.
When it's all done I turn to IE, each version in turn and fix what needs to be fixed using conditional comments (mostly that takes about as much if not more time as the original coding did) but since it's just comments for the other browsers I don't have to go back to see how they react to all the workarounds of the bugs in the different versions of IE.
When coding in IE, you paint yourself in a corner in my experience.
When checking it often in IE you typically waste too much time on fixes instead of making progress with your design.
When coding I try to keep track of a fe needs of IE (like having a wrapper around my code as it's handy to do things on IE refuses to do on body)

As to positioning, there are 4 values:

  • static: This is the default. Sits in the normal flow of the page
  • relative: The element gets moved relative to its normal position. Use left, top, right bottom to move it. Think of it as nudging an element in a certain direction.
  • absolute: Takes the element out of the flow and puts it at coordinates relative to it's containing block. Use left, right, top bottom to position it.
  • fixed Takes the element out of the flow and puts it at a position relative to the viewport (the window) Use left, right, top bottom to position it.

Read more here: [w3.org...]

csuguy




msg:3738241
 1:40 pm on Sep 4, 2008 (gmt 0)


I only create CSS by checking it in a single browser that's not IE (IE will set you on the wrong foot)

I find if you develop in IE and FF simultaneously the end product works for all browsers. Sometimes you HAVE TO stick IE hacks in there, but I find this method greatly reduces them.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved