Member Avatar for suavedesign

Hello
I have a question for all the coding geniuses on Daniweb.
I am a newbie, and I am about to start building my third website.
Being that I had some problems with the layouts of my first two websites, I am asking this question before I start on my third:
What measurement is it best to use for the css elements? Percents,EM's or Px? Which form of meaurement will ensure that I have a site that will not get distorted on different browser sizes/resolutions? Is there anything else that I have to be careful of when building my site so that it will not get distorted when a user zooms, or looks at the site from a different browser size/ resolution?(as was he case on my other sites)

Thanks for your time, guys. Any help would be greatly appreciated!!
Thank you.

  • 3 Contributors
  • 5 Replies
  • 488 Views
  • 3 Days Discussion Span
  • Latest Post Latest Post by suavedesign
Member Avatar for suavedesign

Percentages and 'em's are sometimes better than 'pixels', it depends. Read: http://www.w3.org/Style/Examples/007/units

thanks for your response. I read the link you sent me to, but I don't see any mention of percent there.
I built a site using mostly px, and one page gets distorted when a user zooms when browsing with firefox. The link to this page is http://newstylesignsusa.com/sign_types.html.
When I saw that it gets distorted, I tried changing to ems and percents, and nothing really helped. Any idea why?
Thanks again.

Member Avatar for almostbob
Edited by almostbob because: n/a
Member Avatar for suavedesign

I just built the first page of my website, and all is fine until I zoom in/out. This causes the nav bar to be distorted. I tried changing my measurements from px to em and percent, but that did not help. I am posting the code here, and I would greatly appreciate any help offered.

HTML:

<body>
	<div id="wrapperDiv">
    	<div id="header">
        	<img class="logo"src="images/logo.gif" />
        	<p class="slogan">The only advertiser <br />distributed weekly in NW London</p>
        	<div id="nav">
            	<ul>
                	<li> <a href="index.html">Home</a></li>
                    <li> <a href="#">About Us</a></li>
                    <li> <a href="#">Ad Prices</a></li>
                    <li> <a href="#">Policy</a></li>
                    <li> <a href="#">Contact</a></li>
                </ul>
        	</div>
            <div class="clear"></div>
        </div>
        
        <div id="mainContent">
        	<h1>Welcome!</h1>
            <p class="introPara">We are pleased to bring you our publication online, where you can view the latest issue from wherever you are.</p>
            <div class="thisWeeks">
            	<span class="thisWeeksSpan">This Weeks</span>
            	<a href="#"><img class="magazine"src="images/magazine.jpg" /></a>
                <span class="issue">Issue #55</span>
                <div class="clear"></div>
            </div>
            <img class="advertise" src="images/advertise.gif" />
            <a class="click"href="#">Click Here</a>
              <div class="clear"></div>
        </div>
        
        <div id="footer">
        <span class="footer">The local news &copy; 2011</span>
        <span class="footerDesign"><a class="design" href="mailto:suavedesign1@gmail.com"> Design by Suave Design</a></span>
        </div>
    </div>
</body>

CSS:

.clear{
clear:both;
}

body{
background: url(images/bg.jpg)repeat-x top left #d5d2d2;
}

#wrapperDiv{
margin: 0 auto;
/*border:3px solid blue;*/
width:826px;/*51.625em;*/
}

/*=========header==========*/

#header{
border-bottom:5px solid #827f76;
background: url(images/header_bg.jpg) no-repeat;
}

.logo{
margin:35px 0px 0px 10px;
/*border:1px solid green;*/
}

.slogan{
font-family:Arial, Helvetica, sans-serif;
font-weight:bold;
margin:-10px 0px 7px 50px;
/*border:1px solid red;*/
}

ul{
list-style-type:none;
margin:-30px 0px 0px  280px;
}

li{
float:left;
margin-bottom:-0.125em;
padding:0px 20px 0px 20px;
text-align:center;
background: url(images/nav_bg.gif) no-repeat;
color:white;
font-family:Arial, Helvetica, sans-serif;
font-size:/*14px;*/0.875em;
line-height:/*30px;*/2em;
/*border:1px solid red;*/
width:/*60px;*//*4.3em;*/12%;
}

ul a{
color:white;
text-decoration:none;
}

/*=============main content=================*/
#mainContent{
background:#eee6e6;
margin-top:-29px;
padding-bottom:15px;
}

h1{
font-family:bebas;
padding:60px 0px 0px 30px;
font-size:43px;
}

.introPara{
width:600px;
font-family:Arial, Helvetica, sans-serif;
font-size:15px;
margin:-12px 0px 0px 35px;
font-weight:bold;
}

.thisWeeks{
width:190px;
margin:12px 0px 0px 50px;
padding:20px 30px 12px 50px;
background: url(images/span_top_image.gif) no-repeat top left black;
}

.thisWeeksSpan{
color:#518da1;
font-family:bebas;
font-size:30px;
margin:0px 10px 0px 17px;
width:190px;
/*border:2px solid red;*/
}

.issue{
color:#518da1;
font-family:bebas;
float:left;
font-size:30px;
margin:0px -33px -12px -50px;
padding:0px 73px 20px 72px;
background: url(images/span_bottom_image.gif) no-repeat bottom left;
/*border:1px solid red;*/
}

.magazine{
float:left;
padding:19px 0px;
}

a{
text-decoration:none;
color:black;
/*border:1px solid red;*/
}

.advertise{
float:right;
margin:-330px 50px 0px 0px;
}

.click{
float:right;
text-decoration:underline;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font-weight:bold;
margin-top:-80px;
margin-right:190px;
}

.click:hover{
color:blue;
}

I would appreciate any help... Thanks for your time!

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.