Programming Help

Web Development



What's Here?

  • Members: 109,157
  • Replies: 413,537
  • Topics: 62,856
  • Snippets: 2,285
  • Tutorials: 605
  • Total Online: 1,029
  • Members: 43
  • Guests: 986

Who's Online?

Welcome to Dream.In.Code
Getting Help is Easy!

Join 109,157 Programmers for FREE! Ask your question and get quick answers from experts. There are 1,029 online right now! We've got more than 500 tutorials and 2,000 snippets. Join and find out why Dream.In.Code is the #1 programming help community on the internet! Registration is fast and FREE... Join Now!



CSS and Screen Relsolutions

 
 Reply to this topicStart new topic

CSS and Screen Relsolutions
Israel
post 18 Jun, 2008 - 12:05 PM
Post #1


D.I.C Addict

Group Icon
Joined: 22 Nov, 2004
Posts: 588



Dream Kudos: 175
My Contributions
Got a page that looks perfect at 768x1024 but seems to change at different screen resolutions. Not much so far here is all my code:

CSS:
CODE
.top {  float:center;
        width:875px;
    height:100px;
    
     }

.left { float:left;
    width:100px;
    height:600px;
        margin-left:5.75%;
      }

.right{
    width:175px;
    height:600px;
    margin-left:-1%;
    margin-right:.5%%;
      }

.center{ float:center;
     width:600px;
     height:600px;
     margin-left:-6%;
       }

.bottom{ float:bottom;
     width:875px;
     height:100px;    
     margin-top:-1%;
    }


HTML:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<center>
<img src="./top.png" class="top" alt="picture"/>
<img src="./left.png" class="left" alt="picture"/>
<img src="./center.png" class="center" alt="picture"/>
<img src="./right.png" class="right" alt="picture"/>
<img src="./top.png" class="bottom" alt="picture"/>
</center>
</body>
</html>
User is offlineProfile CardPM

Go to the top of the page


BetaWar
post 18 Jun, 2008 - 12:20 PM
Post #2


#include <soul.h>

Group Icon
Joined: 7 Sep, 2006
Posts: 1,223



Thanked 38 times

Dream Kudos: 725
My Contributions
Okay, here is some code that seems to work nicely (in multiple browser sizes):

CODE
<style>
.top {  float:center;
        width:875px;
    height:100px;
    
     }

.left {
    width:100px;
    height:600px;
      }

.right{
    width:175px;
    height:600px;
    margin-left:-1%;
    margin-right:.5%%;
      }

.center{ float:center;
     width:600px;
     height:600px;
       }

.bottom{ float:bottom;
     width:875px;
     height:100px;    
     margin-top:-1;
    }
</style>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Test</title>
</head>
<body>
<center>
<img src="./top.png" class="top" alt="picture"/>
  <br />
<img src="./left.png" class="left" alt="picture"/>
<img src="./center.png" class="center" alt="picture"/>
<img src="./right.png" class="right" alt="picture"/>
<img src="./top.png" class="bottom" alt="picture"/>
</center>
</body>
</html>
User is online!Profile CardPM

Go to the top of the page

Israel
post 18 Jun, 2008 - 04:38 PM
Post #3


D.I.C Addict

Group Icon
Joined: 22 Nov, 2004
Posts: 588



Dream Kudos: 175
My Contributions
True that works cross-browser, but that was not my problem. I'm talking about keeping these images centered regardless of screen-resolution. But thanks...
User is offlineProfile CardPM

Go to the top of the page

Winstinology
post 18 Jun, 2008 - 05:08 PM
Post #4


D.I.C Head

Group Icon
Joined: 8 May, 2008
Posts: 208



Thanked 2 times

Dream Kudos: 75
My Contributions
Try something like this maybe..


CODE

body {
    text-align: center;
    position: relative;
}

#bodyCenter {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 1200px;
}


And then use absolute positioning with everything inside of the bodyCenter div.. I hope this helps..
User is offlineProfile CardPM

Go to the top of the page

Israel
post 20 Jun, 2008 - 04:05 PM
Post #5


D.I.C Addict

Group Icon
Joined: 22 Nov, 2004
Posts: 588



Dream Kudos: 175
My Contributions
QUOTE
And then use absolute positioning with everything inside of the bodyCenter div.. I hope this helps..


I've always been told absolute positioning is a not a good idea. Most people have told me never use it. I can do that, but if I wanted code like that I'd just use a WYSIWYG editor.
User is offlineProfile CardPM

Go to the top of the page

Winstinology
post 20 Jun, 2008 - 04:31 PM
Post #6


D.I.C Head

Group Icon
Joined: 8 May, 2008
Posts: 208



Thanked 2 times

Dream Kudos: 75
My Contributions
I've always used absolute positioning and I never use WYSIWYGs, because WYS IS NOT WYG. All I'm saying is my web sites look and work great. How about yours?
User is offlineProfile CardPM

Go to the top of the page

Israel
post 20 Jun, 2008 - 06:13 PM
Post #7


D.I.C Addict

Group Icon
Joined: 22 Nov, 2004
Posts: 588



Dream Kudos: 175
My Contributions
I'd like to think they look good? Not trying to put you down Winstinology. That statement just went against everything I've ever been told in this forum. This is the code I wrote that works, at least in IE7 and FF for Windoze. I had to make 2 separate style sheets for each browser with a redirect in the html but it works.

HTML:
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="NewStyleIE.css" />
<![if !IE]>
<link rel="stylesheet" type="text/css" href="NewStyleFF.css" />
<![endif]>
</head>
<body>
<div id="top">
<img src="./top.png" class="top" alt="picture"/>
</div>

<div id="left">
<img src="./left.png" class="left" alt="picture"/>
</div>

<div id="center">
<img src="./center.png" class="center" alt="picture"/>
</div>

<div id="right">
<img src="./right.png" class="right" alt="picture"/>
</div>

<div id="bottom">
<img src="./top.png" class="bottom" alt="picture"/>
</div>

</body>
</html>


CSS for IE
CODE
.top {  margin-left: 55px;
    margin-right: auto;
        width:875px;
    height:170px;
    
     }

.left { margin-left: 55px;
    margin-right: auto;
    margin-top: -5px;
    width:100px;
    height:600px;
      
      }

.right{ margin-left: 755px;
    margin-right: auto;
    margin-top:-638px;
    width:175px;
    height:600px;

      }

.center{
    margin-left: 155px;
    margin-right: auto;
    margin-top:-619px;
    width:600px;
    height:600px;

       }

.bottom{
    margin-left: 55px;
    margin-right: auto;
    margin-top:-42px;
    width:875px;
    height:170px;    
    
    }


CSS for FF:
CODE
.top {  margin-left: 60px;
    margin-right: auto;
        width:875px;
    height:170px;
    
     }

.left { margin-left: 60px;
    margin-right: auto;
    width:100px;
    height:600px;
      
      }

.right{ margin-left: 760px;
    margin-right: auto;
    margin-top:-600px;
    width:175px;
    height:600px;

      }

.center{
    margin-left: 160px;
    margin-right: auto;
    margin-top:-600px;
    width:600px;
    height:600px;

       }

.bottom{margin-left: 60px;
    margin-right: auto;
    width:875px;
    height:170px;    
    
    }
User is offlineProfile CardPM

Go to the top of the page

Winstinology
post 27 Jun, 2008 - 12:40 PM
Post #8


D.I.C Head

Group Icon
Joined: 8 May, 2008
Posts: 208



Thanked 2 times

Dream Kudos: 75
My Contributions
Okay, but the code you used, I could have done better with absolute positioning and did it with about 1/4th the amount of code you used.. Whatever floats your boat dude..
User is offlineProfile CardPM

Go to the top of the page

Fast ReplyReply to this topicStart new topic
Time is now: 9/5/08 05:40PM
Invision Power Board v2.1.7 © 2008  IPS, Inc.
Licensed to: MediaGroup1

Live Help!

Tutorials

Programming

Web Development

Reference Sheets

Code Snippets

Bye Bye Ads

Free DIC T-Shirt

T-Shirt Example

Related Sites

Monthly Drawing

Thumb Drive

Partners

Top Contributors

Top 10 Kudos This Month