CSS - Css Layout Maintain The Design Consistence In All Kinds Of User Screens Resolution?

hi guys
I've begun trying so I finally can leave <tables>

I've started trying with a little opensource template, and now want to be how much correct I am...

The following image shows the original design, also with the layers division I've created



I'd like to know if I'm going ok with this initial design, or which would you modify, and so on.

Then I'll follow up the thread with the code, so I can see if I learned correctly

Thanks a lot in advance,

I can forsee having display issues on smaller screens and idk how to prepare for this. For example if i use the margin or padding property to say..center an image or align text. Keeping in mind that for example my wrapper div is coded in percent(other things too). So smaller screens=shrinkage, but the code thats not percent values will stay the same. The code is kind of a mess the most used components are at the top.
Code:

body {background:#white;
}
#wrap {margin-left:20%;
      margin-right:20%;
}
#header {border: 2px solid grey;
        background:white;
}
#titlearea {
          height:100px;
	      padding:4px;
	      font-family:Verdana;
		  
}
#belowimg {background:#6a7c63;
          margin:0px;
		  height:40px;
		  border-top:2px solid grey;
		  
		  
		  
}
.link {float:left;
	  margin-top:8px;
	  margin-left:5px;
	  background:#6a7c63;
	  border-right:1px solid #681300;
	  height:20px;
	  width:100px;
	  text-align:center;
	  text-decoration:none;
	  font-family:Lucida Grande;
	  padding-right:3px;
	  margin-bottom:8px

}
.linklast {float:left;
	  margin-top:8px;
	  margin-left:0px;
	  background:#6a7c63;
	  
	  height:20px;
	  width:100px;
	  text-align:center;
	  text-decoration:none;
	  font-family:Lucida Grande;
	  padding-right:3px;
	  margin-bottom:8px
	 }
#main {border:1px solid grey;
      background:tan;
      
	  padding:10px;
	  padding-right:0px;
	  margin-top:0px;
	  font-size:.80em;
	  font-family:Verdana;
	  color:#000000;
	  height:100%;
}
#rightcontent {float:right;
              border-left:1px dashed grey;
			  padding-left:0px;
			  padding-right:0px;
			  height:90%;
			  width:230px;
			  font-size:small;
			  margin-left:8px;
			  background:white;
}
.button {
        font-size:small;
		font-family:Verdana;
		border-top:1px solid grey;
		padding:8px;
		margin:0px;
		padding-bottom:0px;
		background:white;
}
.button.center {
			   padding-left:23px;
			   text-align:center;
			   
}
.button.right {float:right;
              border:1px solid red;
			  padding:2px;
			  background:blue;
			  
			  
			  
			  }

#imagescroller{width:530px;
               float:left;
               margin-right:10px;
		       margin-left:10px;
		       height:300px;
			   padding:4px;
		       border-top:2px solid #f1e1b8;
		       border-left:2px solid #f1e1b8;
		       border-right:2px solid #f1e1b8;
			   border-bottom:2px solid #f1e1b8;
			   background:blue;
}
#bottom {background:blue;
         border-bottom:2px solid red;
	     border-right:2px solid #f1e1b8;
		 border-left:2px solid #f1e1b8;
		 height:30px;
		 padding:0px;
		 color:grey;
		 margin-top:0px;
		 width:600px;
		 height:30px;
			 
}






.box {
    
	
	 
	 padding-top:0px;
	 margin:1px;
	 font-size:.80em;
	 font-style:strong;
	 float:left;
	 
	 color:grey;
	 
	 background:white;
	 font-family:Lucida Grande;
	 line-height:1px;
	 
	 margin-top:196px;
}
.left {float:left;
      padding-right:20px;
	  padding-bottom:0px;
	  margin-bottom:0px;
      
	 
}


.right {float:right;
        border-left:1px solid grey;
	    border-bottom:1px solid grey;
		
		background:white;
		
		
}

.inside {border-top:1px solid white;
      padding-left:3px;
      padding-right:3px;
      background:#ffa812;
	  font-family:Verdana;
	  font-size:.70em;
	  height:20px;
	  background:#EEC900;
	  color: #000000;
	  
	 
        
}


.bottom {height:10px;
		 background:#DEECFF;
		 border-top:1px solid grey;
		 
}




.imagebottom {background:white;
             border-bottom:2px double #f1e1b8;
			 
			 padding:3px;
			 color:grey;
            
}

		   

#blockquote {margin-left:18%;
            font-size:.60em;
			padding-left:40px;
			color:brown;
			font-family:Verdana;
			font-style:italic;
			background:white;
			border-left:4px dotted orange;
}
#topping {border-bottom:1px solid grey;
         margin-left:1px;
		 margin-top:4px;
		 }
#bottomborder {border-bottom:1px solid grey;
              margin-left:1px;
		      
}


#footer {border:1px solid grey;
        height:30px;
		margin-top:5px;
}
#test {height:20px;}
.test1 {margin-top:3px;
       border-top:1px solid #fcfcfc;
	   height:0px;
	  
	  }
.test2 {height:0px;
      border-top:1px solid #f5f5f5;
	  
	  }
.test3 {height:0px;
      border-top:1px solid #ededed;
	  
	  }
.test4 {height:0px;
      border-top:1px solid #e5e5e5;
	  
	  }
.test5 {height:0px;
      border-top:1px solid #dedede;
	  
	  }
.test6 {height:0px;
      border-top:1px solid #d9d9d9;
	
	  }
.test7{height:0px;
      border-top:1px solid #d3d3d3;
	  
	  }
.test8 {height:0px;
      border-top:1px solid #cfcfcf;
	  
	  }
.test9 {height:0px;
      border-top:1px solid #c9c9c9;
	 
	  }
.test10{height:0px;
      border-top:1px solid #c2c2c2;
	 
	  }
#testy{height:20px;
       color:000000;
	   }
h2 {font-size: 1.571em}	/* 22px */
h3 {font-size: 1.429em}	/* 20px */
h4 {font-size: 1.286em}	/* 18px */
h5 {font-size: 1.143em;}	/* 16px */
h6 {font-size: 1em; font-family:Verdana;color:brown;}	/* 14px */

h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.1;
	margin-bottom: .8em;
}

/* Anchors */
a {outline: 0;}
a img {border: 0px; text-decoration: none;}
a:link, a:visited {
	color: #c7a01e;
	padding: 0 1px;
	text-decoration: none;
}
a:hover, a:active {
	/*background-color: #C74350;*/
	color: #f09419;
	text-decoration: underline;
	text-shadow: 1px 1px 1px #333;
}
strong, b {font-weight: bold;}
060	em, i {font-style:

Thanks

look at my site. it is very boxy and almost TOO structured. is there a design trick i can use to mix it up a little? specific examples would be greatly appreciated.

In PHP I limit the heading to 35 characters. This works great and fits within the allocated width unless the heading is in all caps or mostly caps. I want to allow caps, but depending on how many are used will determine the over all width of the heading. I want to maintain constant width with Capital Letters in a table. I also don't want text used in a heading <p> to wrap, but by not wrapping it will continue beyond the borders of the cell and table. What I really need to do is cut off characters from the end if it goes beyond the border.

How can I cut off the end of a sentence (heading) to kept the heading within assigned borders without it wrapping? This is the code I am experimenting with:

Code:

<html>
<head>
<title>Fixed widths</title>
<style type="text/css">
table {
	table-layout:fixed;
	width:613px;
}
td {
	table-layout:fixed;
	width:260px;
	vertical-align:top;
	text-align:center;
}
p {
	white-space:nowrap;
}
</style>
</head>
<body>
<table border="1" cellpadding='0' cellspacing='10'>
  <tr>
    <td><p><strong>This heading can only have 35 chars</strong></p></td>
    <td><p><strong>THIS HEADING CAN ONLY HAVE 35 CHARS</strong></p></td>
  </tr>
</table>
</body>
</html>

Hello,
whats your opinion and experience?
Wich is the best way to serve diferent css depending on resolution?
Using media like this and serve several diferent stylesheets?
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="screen and (min-width: 321px) and (max-width: 768px)">

or using this:
@import url("tablet.css") screen and (min-width:321px) and (max-width:768px);

And is it posible and good or bad idea to have one .css file with diferent css depending on resolution.

Is it better to detect resolucion with only javascript?

Thanks, appreciate help as I am very stressed and have so many things to fix urgently.

I've just recently started using CSS, and unlike tables, I have no clue how the heck to autostretch the layout. Could someone to tell me how to make my page "adapt" to different resolutions for CSS? I don't want to have to make seperate styles for each resolution, is there a simple property and value that I can just insert somewhere with the position property?
thanks
(sorry i posted this again, I just felt the other post was not clear)

Hello all!

Is there a way to set a resolution % for a certain type of resolution size and any above that resolution to another specific %

For example I want it to be:

1024x 768 : width : 90%;

and anything higher than 1024x 768 to be 80% since 90% on a resolution higher than 1024 for my navigation is just too make of a banner.

Please help/advice.


Regards,
Kingofqueens.

When viewing the test version of my site apparently it has issues with lower resolutions. I'm using 1280x1024 and I guess some people are having issues with it at 1024x768. Is there a way to fix my code so there are no resolution problems, or minimal ones at that? Thanks.

Hi All,
I have a fixed div which I am using as a footer in my application. here is the screen shot of my page please have a look first so u will understand what i am talking about.

http://img192.yfrog.com/img192/5572/1280x768.gif

Problem is that if I browse the application on 1024 x 768 pixels it works great but when i change the resolution up to 1280 x 800 pixels the image inside the div change its position. I want this to appear same on every resolution...any suggestions or workaround.

the CSS code is below

Code:

#footer
{
     position: fixed;  
    top: auto;
    left: auto;
    width: auto;
}

here is the HTML

Code:

<html>
<head id="Head1" runat="server">
    <link href="../App_Themes/style.css" rel="stylesheet" type="text/css" />
    <script src="../Scripts/jquery-1.3.2.min.js" type="text/javascript"> </script>
    <title></title>
    
      <style type="text/css">
        .style1
        {
            width: 800px; background-color:White
           
        }
        .style2
        {
            height: 391px;
        }
        .style3
        {
            text-align: right;
        }
 
    </style>
</head>
<body bgcolor="#d7d7d7">
 <form runat="server">
    <div id="content" style="margin: auto; border: thin solid #C0C0C0; padding: 0px 0px 0px 0px; width: 820px; height: 595px" 
        align="center">
        <table align="center" class="style1">
            <tr>
                <td style="font-family: 'Times New Roman', Times, serif; font-size: small; color: #FF0000;" 
                    class="style3">                              
                     <asp:ContentPlaceHolder ID="StatusBar" runat="server">                   
                     </asp:ContentPlaceHolder>
                     <asp:Image ID="Image1" runat="server" ImageUrl="~/images/appHeader.png" /> 
                </td>
             </tr>       
            <tr>
                <td class="style2" align="left" valign="top">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">                 
                    </asp:ContentPlaceHolder>
                </td>
            </tr>
            <tr>
                <%--<td style="background-color: #FF9933; height: 15px;">
                &nbsp;</td>--%>
            </tr>
        </table>   
        <div id="footer">          
         </div>
<%--    <table align="center" class="style1">    
    <tr>
       <td>
         <div id="footer">
          <img src="../images/footer.png" alt=""/>
         </div>
    </td>
    </tr>
   </table>
--%>   </div>
</form>
</body>
</html>

I want a table below the container div and want to place my footer div inside that table and on every resolution it should come up the same...i did try but its not working...help need

Hi,
thanks for your time.

My problem is with screen resolution, I am currently building a website using 1280 x 1044 pixels. At this resolution the website looks fine. I have used CSS styles and the size page I have used is 80% so there is a blue background around the page.

The problem is I have 2 images sized 990 width pixels, at the current resolution they look fine, but when I drop the resolution they will stay the same size (which is now way too big) while the page size will remain a constant 80% so I am left with an image nearly twice as wide as my content.

I have thought of splitting one of the images and used a float left and right for it, but the other image is not possible to do that with, I have seen sites with big banners on so how do those images remain constant size even when you change resolution?

All help will be greatly appreciated.

Many thanks.

Craig

I am in the process of designing a website and I have dual monitors at home, one is using 1024x768, and other is using 1280x1024 resolution. The website I have designed, off course looks different from one resolution to the other. One the less resolution monitor, the site looks big (my masthead is 750x200 and the whole page is approximately 770x900), however, on the high resolution, the site looks tiny. on 1200 wide resolution my page width is only 770, so there is white (in my case blue) space both sides making it look not so good.

Because of the above reason, the site looks big on one monitor and very tiny on the other. I am sure there would be lots of people out there with those two kinds of resolutions (I am mostly concerned about these two resolutions). I wonder how do people deal with this when they are designing a website? Could one find out the resolution of the monitor ahead of time (before displaying the page) and have different css/images be loaded based on the monitor it is being viewed? Is there a concept of floating site -- what I mean by that is if there is a concept of site automatically changing appearance based on screen resolution?

Thanks!!!

I am having a very strange problem with firefox and different screen resolutions. I have just made a navigation system for a website and tested the links in I.E and F.F - no problems in my screen resolution of 1280 x 1024. I tested it at 800 x 600 and 1024 x 768 and firefox does not change to the hover status when hovering over the link. There are no problems in I.E at the smaller resolutions.

Does anyone have any ideas what is causing this problem.

After playing around with a few things i discovered that if i change my display from inline to block it works perfectly in firefox at all resolutions - In I.E it causes a step like appearance to the links.

Below is the css I am using, I have also added the xhtml at the bottom.

Code:

#top_button li {
	margin: 0;
	display: inline;
	list-style-type: none;		
}
#top_button a:link, #top_button a:visited {
	float: left;
	overflow: hidden;
	height: 0px;
}
#top_nav {
    margin: 0;    
	padding: 0;
}
#top_button {
	position: relative;
	top: 0px;
	left: 157px;
	height: 19px;
	list-style: none;
	margin: 0;
}
#t1 a:link, #t1 a:visited  {
	background-image: url(../images/top_nav_home_1.gif);
	background-repeat: no-repeat;
	padding-top: 19px;
	width: 47px;
}
#t1 a:hover, #t1 a.current { 
	background-position: 0px -19px; 
}
#t2 a:link, #t2 a:visited  { 
    background-image: url(../images/top_nav_services_1.gif); 
	background-repeat: no-repeat;
	padding-top: 19px;
	width: 63px
}
#t2 a:hover, #t2 a.current { 
	background-position: 0px -19px; 
}
#t3 a:link, #t3 a:visited  { 
    background-image: url(../images/top_nav_portfolio_1.gif); 
	background-repeat: no-repeat;	
	padding-top: 19px;
	width: 65px;
}
#t3 a:hover, #t3 a.current { 
	background-position: 0px -19px; 
}
#t4 a:link, #t4 a:visited { 
    background-image: url(../images/top_nav_resources_1.gif); 
	background-repeat: no-repeat;	
	padding-top: 19px;
	width: 72px;
}
#t4 a:hover, #t4 a.current { 
	background-position: 0px -19px; 
}
#t5 a:link, #t5 a:visited { 
    background-image: url(../images/top_nav_contact_1.gif); 
	background-repeat: no-repeat;	
	padding-top: 19px;
	width: 59px;
}
#t5 a:hover, #t5 a.current { 
	background-position: 0px -19px; 
}

{

xhtml

Code:

    <div id="top_nav">
	    <ul id="top_button">
			    <li id="t1"><a class="current" href="/" title="home"></a></li>
				<li id="t2"><a href="/services" title="services"></a></li>
				<li id="t3"><a href="/portfolio" title="portfolio"></a></li>
				<li id="t4"><a href="/resources" title="resources"></a></li>
				<li id="t5"><a href="/contact" title="contact"></a></li>
			</ul>
	</div>

I would appreciate any suggestions!

www.oakdalehosecompany.org or oakdalehosecompany.org is my website

Its perfect when you view it with firefox at 1024x768 res, but when you view it with internet explorer at 800x600 res it looks horrible. is there anyway to fix this like a program or something. bear with my this is my fire site i ever made so i dont know much. thanks for any that help

Hello, I am using an OS Commerce layout for a client's website. On this page - www.mts-diesel.com you will see how I have the homepage laid out in anticipation of design, with 3 divs of varying colors. One div with an id of #hp_left is where I want to put a nice jquery code. But when I insert that into #hp_left it breaks the whole layout, was seen here www.mts-diesel.com/index2.php I'm not sure what in the css in the code for this script is breaking my layout but Ithought someone here might be willing to shed some light. A big thank you. Tom