CSS Help - Wrap

Discussion in 'CSS' started by dapinheiro, Oct 8, 2009.

0
Page 1 of 2
  1. #1
    Hello guys,

    I'm using the following .css, it was fixed width and i wanted a design with a larger width so I have modified the .css. The problem is the #Wrap is not looking right.



    Any idea in what im doing wrong ?

    
/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
	TEMPLATE NAME:		Envision
   TEMPLATE CODE: 	S-0013
   VERSION:          1.1
	LAST MODIFIED     Nov-14-2007 	
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

body {
	background: #CCC;
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #555; 
	text-align: center;
}

/* links */
a, a:visited {
	text-decoration: none;
	color: #2180BC;
	background: inherit;
}
a:hover {
	color: #88ac0b;
	background: inherit;
	text-decoration: underline;
}

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;	 		
}
h1 {
	font-size: 150%;	
	font-weight: normal;
	color: #006699;
}
h2 {
	font-size: 140%;
	text-transform: uppercase;
	color: #88ac0b;
}
h3 {
	font-size: 120%;
	color: #666666; 
}

/* images */
img {
	background: #FAFAFA;
   border: 1px solid #E5E5E5;
	padding: 5px;
}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
}
acronym {
  cursor: help;
  border-bottom: 1px dotted #777;
}
blockquote {
	margin: 10px;
 	padding: 0 0 0 28px;  
   border: 1px solid #f2f2f2; 
  	background: #FAFAFA url(/App_Themes/EnvisionCSS/images/quote.gif) no-repeat 5px 5px;    
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th {
	background: #93BC0C;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;
	color: #FFF;
	text-align: left;
	border-left: 1px solid #B6D59A;
	border-bottom: solid 2px #FFF;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;
}
/* end - table */

/* form elements */
form {
	margin:10px; padding: 0 5px;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	font: bold 12px Arial, Sans-serif; 
	height: 24px;
	margin: 0;
	padding: 2px 3px; 
	color: #FFF;
	background: #8EB50C url(/App_Themes/EnvisionCSS/images/button-bg.jpg) repeat-x 0 0;
	border: none;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 120px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	width: 1020px;
	background: #CCC url(/App_Themes/EnvisionCSS/images/contentedit13.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 760px;
	padding: 0; 
	margin: 10px auto;
}
#header {
	width: 1020px;
	position: relative;
	height: 103px;
	background: #CCC url(/App_Themes/EnvisionCSS/images/header1.jpg) no-repeat center top;
	padding: 0;	
	color: #FFF;
    top: 0px;
    left: 0px;
}
#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	color: #FFF;
	text-transform: none;
	text-decoration: none;
	background: transparent;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 47px;	
}
#header p#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #FFF;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 70px; left: 55px;		
}

/* header links */
#header #header-links {
	position: absolute;
	top: 20px; right: 30px;	
	color: #C6DDEE;
	font-size: 10px;	
}
#header #header-links a {	
	color: #FFF;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #D4E59F;	
}

/* Menu */
#menu {
	clear: both;	
	margin: 0 auto; padding: 0;
	background: url(/App_Themes/EnvisionCSS/images/menu.jpg) repeat-x 0 0;	
	font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
	height: 37px;
	width: 969px;	
}
#menu ul {
	float: right;
	list-style: none;
	margin:0; padding: 0;
}
#menu ul li {
	display: inline;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 0 12px;
	color: #FFF;	
	text-decoration: none;
}
#menu ul li.last a {
	padding-right: 20px;
}
#menu ul li a:hover {
	color: #D4E59F;	
}
#menu ul li#current a {	
	color: #D4E59F;
}

/* Main Column */
#main {
	float: left;
	width: 70%;
	padding: 0; margin: 5px 0 0 5px;
	display: inline;
}
#main h2 {
	margin-top: 10px;
	font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;
	color: #88ac0b; 
	padding: 5px 0 5px 25px; 	
	border-bottom: 1px solid #EFF0F1;
	background: #FFF url(/App_Themes/EnvisionCSS/images/square-green.png) no-repeat 3px 50%;	
	text-transform: none;
}
#main h2 a {
	background: none;
	color: #88ac0b;
	text-decoration: none;
}

#main ul li {
	list-style-image: url(/App_Themes/EnvisionCSS/images/bullet.gif);
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 10px 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(/App_Themes/EnvisionCSS/images/clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(/App_Themes/EnvisionCSS/images/comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(/App_Themes/EnvisionCSS/images/page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */	
#sidebar {
	float: right;
	width: 26.5%;
	padding: 0; margin: 0;	
	color: #68774A;	
}	
#sidebar h3 {
	margin-top: 10px;
	padding: 5px 5px; 
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #728D26;	
}
#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 7px 4px 8px 0; padding: 0;
	text-decoration: none;		
	background: url(/App_Themes/EnvisionCSS/images/dots.jpg) repeat-x left top;
}
#sidebar ul.sidemenu li {
	list-style: none;
	background: url(/App_Themes/EnvisionCSS/images/dots.jpg) repeat-x left bottom;
	padding: 4px 0 4px 5px;
	margin: 0 2px;	
	color: #68774A;	
}
* html body #sidebar ul.sidemenu li {
	height: 1%;
}
#sidebar ul.sidemenu li a {
	text-decoration: none;	
	background-image: none;	
	color: #666666;			
}
#sidebar ul.sidemenu li a:hover {	
	color: #1773BC;	
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { background: none; }


/* Footer */	
#footer {
	color: #C6DDEE;
	background: #CCC url(/App_Themes/EnvisionCSS/images/footer1.jpg) no-repeat center top;
	clear: both;
	width: 1020px;
	height: 65px;
	text-align: center;	
	font-size: 92%;	
}
#footer a { 
	color: #FFF;
	text-decoration: none; 
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
    Code (markup):
     

    Attached Files:

    dapinheiro, Oct 8, 2009 IP
  2. goliath

    goliath Active Member

    Messages:
    308
    Likes Received:
    11
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Most of the widths in this layout are set in pixels. Assuming you understand the interaction between the #wrap_content and #menu (it's not obvious in the CSS/screenshot, then this tag might be your problem:

    
#sidebar {
	float: right;
	width: 26.5%;
    Code (markup):
    Have you tried adjusting that percentage, or using a fixed width there instead of a percentage?

    I wouldn't be able to tell anything else without some HTML
     
    goliath, Oct 8, 2009 IP
  3. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Thanks for your reply.
    Even with fix width, the problem persists.

    Here, you have my code:

    
#sidebar {
	float: right;
	width: 184px;
	padding: 0; margin: 0;	
	color: #68774A;	
}
    Code (markup):
    

<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Envision.master.cs" Inherits="UserAccessSchedulerv4.Envision" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
   <meta name="Description" content="Information architecture, Web Design, Web Standards." />
<meta name="Keywords" content="your, keywords" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="Distribution" content="Global" />
<meta name="Author" content="Erwin Aligam - ealigam@gmail.com" />
<meta name="Robots" content="index,follow" />

<link rel="stylesheet" href="App_Themes\EnvisionCSS\Envision.css" type="text/css" />

<title>Envision</title>
</head>
<body>
<!-- wrap starts here -->
<div id="wrap">
		
		<!--header -->
		<div id="header">			
				
			<p> &nbsp;</p>		
			&nbsp;<div id="header-links">
			<p>
				<a href="home.aspx">Dashboard</a> | 
				<a href="http://webdesk/">Helpdesk</a>		
			</p>		
		</div>		
						
		 </div>

		<!-- menu -->	
		<div  id="menu">
			<ul>
				<li id="current">
				    <asp:Label ID="LabelAdmin" ForeColor="LightGreen" runat="server" Text=""></asp:Label>&nbsp;|
				</li>
                <li>
                    <asp:Label ID="LabelDateTime" ForeColor="White"  runat="server" Text=""></asp:Label>&nbsp;&nbsp;
                </li>	
			</ul>
		</div>
		
		<!-- content-wrap starts here -->
		<div id="content-wrap">
				
			<div id="sidebar">
				<h3>Menu</h3>
				<ul class="sidemenu">				
					<li><a href="home.aspx">Dashboard</a></li>
					<li><a href="WebForm1.aspx">Utilizador</a> </li>
					<ul class="sidemenu">
                        <li><a href="/User/adduser.aspx">Novo</a></li>
                        <li><a href="/User/edituser.aspx">Editar</a></li>
                        <li><a href="/User/deluser.aspx">Eliminar</a></li>
                        <li><a href="/User/userintogroup.aspx">Inserir em Grupo</a></li>
                    </ul>
                    <li><a href="WebForm1.aspx">Grupo</a> </li>
                    <ul class="sidemenu">
                        <li><a href="/Group/addgroup.aspx">Novo</a></li>
                        <li><a href="/Group/editgroup.aspx">Editar</a></li>
                        <li><a href="/Group/delgroup.aspx">Eliminar</a></li>
                    </ul>
                     <li><a href="WebForm1.aspx">Schedule</a></li>
                     <ul class="sidemenu">
                        <li><a href="/Schedule/addschedule.aspx">Novo</a></li>
                     </ul>
                    
				</ul>	
				
			
				<h3>Links</h3>
				<ul class="sidemenu">
					<li><a href="http://intranet/">Intranet</a></li>
					<li><a href="http://www.nbs.pt">NBS</a></li>
					<li><a href="http://www.randstad.com/">Randstad</a></li>
					<li><a href="http://webdesk/">Helpdesk</a></li>
				</ul>							
			</div>
				
			<div id="main">
        
				
				<h3>Work Space</h3>
				<form id="formMain" runat="server">			
				<p>			
		<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
						
				</p>		
				</form>				
				<br />	

			</div>
		
		<!-- content-wrap ends here -->	
		</div>
					
		<!--footer starts here-->
		<div id="footer">
			
			<p>
			&copy; 2009 <strong>NBS</strong> | 
			Design by: <a href="http://nbs.pt/">NBS</a> | 
			Valid <a href="http://validator.w3.org/check?uri=referer">XHTML</a> | 
			<a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>
			
   		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
			
			<a href="home.aspx">Dashboard</a>&nbsp;|
   		<a href="http://webdesk/">Helpdesk</a>&nbsp;
   		</p>
				
		</div>	

<!-- wrap ends here -->
</div>
</body>
</html>
    Code (markup):
     

    Attached Files:

    dapinheiro, Oct 8, 2009 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Whatever the large white box with the blue sides is, is obviously too wide. is that contentWrap?
     
    Stomme poes, Oct 8, 2009 IP
  5. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Its the Wrap.. The size is 1020px; As well the image it contains..contenteedit13!
    I've tried to put it smaller but doens't fit as well !

    
#wrap {
	width: 1020px;
	background: #CCC url(/App_Themes/EnvisionCSS/images/contentedit13.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
    Code (markup):
     
    dapinheiro, Oct 8, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Could you pls post a copy of this HTML and CSS on a server somewhere so we can see it? It can be a copy of the page, doesn't have to be the full site.

    Or, you've posted the HTML, could you post the CSS? Hopefully it's not hundreds of different stylesheets, but someone is too wide. You helped your sidebar by limiting its width a bit (184px must be smaller than whatever 26% came out to)...

    when going from a smaller to a wider design, first look and write down somewhere the widths of all your large elements! How wide the header, footer, main body etc are. You seem to have changed one and not the other or something.
     
    Stomme poes, Oct 8, 2009 IP
  7. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #7
    The .css is in the first message.
    I have changed all to 1020px. Probably I'm missing something..
     
    dapinheiro, Oct 8, 2009 IP
  8. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Sorry, I skimmed right over it!

    Well, I copied it, and posted it on my server, of course I don't have your images, but in both Firefox and IE7 it isn't being goofy (with CSS from original post).

    http://stommepoes.nl/testpage.html

    So on the one hand, this rules out a lot of things. Your main boxes are good to go.

    Do you have Firefox? Can you see what highlights when you use Aardvark (or Firebug's Inspect Element) or any other highlighting plugin on that page? It should point out who is getting too side, so that it's easier to figure out who inside that box is getting too wide.
     
    Stomme poes, Oct 8, 2009 IP
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Ah, slight correction: all is not well in non-IE browsers. Your floats aren't being enclosed (that's not the cause of your problem but it will be "a" problem if content-wrap is supposed to hold a background image or colour or border who is supposed to wrap around #main and #sidebar). You can see this in any non-IE browser and I think also in IE8.

    http://gtwebdev.com/workshop/floats/enclosing-floats.php for more explanation.
     
    Stomme poes, Oct 8, 2009 IP
  10. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #10
    try with the images..pls.
    And try with this .css, meanwhile i could have chaged it !
    
/********************************************
   AUTHOR:  			Erwin Aligam 
   WEBSITE:   			http://www.styleshout.com/
	TEMPLATE NAME:		Envision
   TEMPLATE CODE: 	S-0013
   VERSION:          1.1
	LAST MODIFIED     Nov-14-2007 	
 *******************************************/
 
/********************************************
   HTML ELEMENTS
********************************************/ 

/* Top Elements */
* { margin: 0; padding: 0; outline: 0 }

body {
	background: #CCC;
	font: 70%/1.5em Verdana, Tahoma, arial, sans-serif;
	color: #555; 
	text-align: center;
}

/* links */
a, a:visited {
	text-decoration: none;
	color: #2180BC;
	background: inherit;
}
a:hover {
	color: #88ac0b;
	background: inherit;
	text-decoration: underline;
}

/* headers */
h1, h2, h3 {
	font-family: 'Trebuchet MS', Tahoma, Sans-serif;	 		
}
h1 {
	font-size: 150%;	
	font-weight: normal;
	color: #006699;
}
h2 {
	font-size: 140%;
	text-transform: uppercase;
	color: #88ac0b;
}
h3 {
	font-size: 120%;
	color: #666666; 
}

/* images */
img {
	background: #FAFAFA;
   border: 1px solid #E5E5E5;
	padding: 5px;
}
img.float-right {
  margin: 5px 0px 10px 10px;  
}
img.float-left {
  margin: 5px 10px 10px 0px;
}

h1, h2, h3, p {
	padding: 10px;		
	margin: 0;
}
ul, ol {
	margin: 5px 20px;
	padding: 0 20px;
}

code {
  margin: 5px 0;
  padding: 10px;
  text-align: left;
  display: block;
  overflow: auto;  
  font: 500 1em/1.5em 'Lucida Console', 'courier new', monospace ;
  /* white-space: pre; */
  background: #FAFAFA;
  border: 1px solid #f2f2f2;  
}
acronym {
  cursor: help;
  border-bottom: 1px dotted #777;
}
blockquote {
	margin: 10px;
 	padding: 0 0 0 28px;  
   border: 1px solid #f2f2f2; 
  	background: #FAFAFA url(/App_Themes/EnvisionCSS/images/quote.gif) no-repeat 5px 5px;    
}

/* start - table */
table {
	border-collapse: collapse;
	margin: 10px;	
}
th strong {
	color: #fff;
}
th {
	background: #93BC0C;
	height: 29px;
	padding-left: 12px;
	padding-right: 12px;
	color: #FFF;
	text-align: left;
	border-left: 1px solid #B6D59A;
	border-bottom: solid 2px #FFF;
}
tr {
	height: 30px;
}
td {
	padding-left: 11px;
	padding-right: 11px;
	border-left: 1px solid #FFF;
	border-bottom: solid 1px #ffffff;
}
td.first,th.first {
	border-left: 0px;
}
tr.row-a {
	background: #F8F8F8;
}
tr.row-b {
	background: #EFEFEF;
}
/* end - table */

/* form elements */
form {
	margin:10px; padding: 0 5px;
	border: 1px solid #f2f2f2; 
	background-color: #FAFAFA; 	
}
label {
	display:block;
	font-weight:bold;
	margin:5px 0;
}
input {
	padding:2px;
	border:1px solid #eee;
	font: normal 1em Verdana, sans-serif;
	color:#777;
}
textarea {
	width:400px;
	padding:2px;
	font: normal 1em Verdana, sans-serif;
	border:1px solid #eee;
	height:100px;
	display:block;
	color:#777;
}
input.button { 
	font: bold 12px Arial, Sans-serif; 
	height: 24px;
	margin: 0;
	padding: 2px 3px; 
	color: #FFF;
	background: #8EB50C url(/App_Themes/EnvisionCSS/images/button-bg.jpg) repeat-x 0 0;
	border: none;
}

/* search form */
.searchform {
	background-color: transparent;
	border: none;	
	margin: 0; padding: 5px 0 15px 0;	
	width: 190px;	
}
.searchform p { margin: 0; padding: 0; }
.searchform input.textbox { 
	width: 120px;
	color: #777; 
	height: 18px;
	padding: 2px;	
	border: 1px solid #E5E5E5;
	vertical-align: top;
}
.searchform input.button { 
	width: 60px;
	height: 24px;
	padding: 2px 5px;
	vertical-align: top;
}

/********************************************
   LAYOUT
********************************************/ 
#wrap {
	width: 1020px;
	background: #CCC url(/App_Themes/EnvisionCSS/images/contentedit13.jpg) repeat-y center top;
	margin: 0 auto;
	text-align: left;
}
#content-wrap {
	clear: both;
	width: 949px;
	padding: 0; 
	margin: 10px auto;
}
#header {
	width: 1020px;
	position: relative;
	height: 103px;
	background: #CCC url(/App_Themes/EnvisionCSS/images/header1.jpg) no-repeat center top;
	padding: 0;	
	color: #FFF;
    top: 0px;
    left: 0px;
}
#header h1#logo-text a {
	position: absolute;
	margin: 0; padding: 0;
	font: bolder 44px 'Trebuchet MS', Arial, Sans-serif;
	letter-spacing: -2px;
	color: #FFF;
	text-transform: none;
	text-decoration: none;
	background: transparent;
	
	/* change the values of top and left to adjust the position of the logo*/
	top: 25px; left: 47px;	
}
#header p#slogan {
	position: absolute;
	margin: 0; padding: 0;
	font: normal 12px 'Trebuchet MS', Arial, Sans-serif;
	text-transform: none;
	color: #FFF;
	
	/* change the values of top and left to adjust the position of the slogan*/
	top: 70px; left: 55px;		
}

/* header links */
#header #header-links {
	position: absolute;
	top: 20px; right: 30px;	
	color: #C6DDEE;
	font-size: 10px;	
}
#header #header-links a {	
	color: #FFF;
	text-decoration: none;	
}
#header #header-links a:hover {
	color: #D4E59F;	
}

/* Menu */
#menu {
	clear: both;	
	margin: 0 auto; padding: 0;
	background: url(/App_Themes/EnvisionCSS/images/menu.jpg) repeat-x 0 0;	
	font: bold 12px/37px Verdana, Arial, Tahoma, Sans-serif;
	height: 37px;
	width: 969px;	
}
#menu ul {
	float: right;
	list-style: none;
	margin:0; padding: 0;
}
#menu ul li {
	display: inline;
}
#menu ul li a {
	display: block;
	float: left;
	padding: 0 12px;
	color: #FFF;	
	text-decoration: none;
}
#menu ul li.last a {
	padding-right: 20px;
}
#menu ul li a:hover {
	color: #D4E59F;	
}
#menu ul li#current a {	
	color: #D4E59F;
}

/* Main Column */
#main {
	float: left;
	width: 78%;
	padding: 0; margin: 5px 0 0 5px;
	display: inline;
}
#main h2 {
	margin-top: 10px;
	font: Bold 140% 'Trebuchet MS', Tahoma, Sans-serif;
	color: #88ac0b; 
	padding: 5px 0 5px 25px; 	
	border-bottom: 1px solid #EFF0F1;
	background: #FFF url(/App_Themes/EnvisionCSS/images/square-green.png) no-repeat 3px 50%;	
	text-transform: none;
}
#main h2 a {
	background: none;
	color: #88ac0b;
	text-decoration: none;
}

#main ul li {
	list-style-image: url(/App_Themes/EnvisionCSS/images/bullet.gif);
}

.post-footer {
	background-color: #FAFAFA;
	padding: 5px; margin: 20px 10px 10px 10px;
	border: 1px solid #f2f2f2;
	font-size: 95%;	
}
.post-footer .date {
	background: url(/App_Themes/EnvisionCSS/images/clock.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .comments {
	background: url(/App_Themes/EnvisionCSS/images/comment.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}
.post-footer .readmore {
	background: url(/App_Themes/EnvisionCSS/images/page.gif) no-repeat left center;
	padding-left: 20px; margin: 0 10px 0 5px;
}

/* Sidebar */	
#sidebar {
	float: right;
	width: 184px;
	padding: 0; margin: 0;	
	color: #68774A;	
}	
#sidebar h3 {
	margin-top: 10px;
	padding: 5px 5px; 
	font: bold 1.4em 'Trebuchet MS', Tahoma, Sans-serif;
	color: #728D26;	
}
#sidebar ul.sidemenu {
	list-style: none;
	text-align: left;
	margin: 7px 4px 8px 0; padding: 0;
	text-decoration: none;		
	background: url(/App_Themes/EnvisionCSS/images/dots.jpg) repeat-x left top;
}
#sidebar ul.sidemenu li {
	list-style: none;
	background: url(/App_Themes/EnvisionCSS/images/dots.jpg) repeat-x left bottom;
	padding: 4px 0 4px 5px;
	margin: 0 2px;	
	color: #68774A;	
}
* html body #sidebar ul.sidemenu li {
	height: 1%;
}
#sidebar ul.sidemenu li a {
	text-decoration: none;	
	background-image: none;	
	color: #666666;			
}
#sidebar ul.sidemenu li a:hover {	
	color: #1773BC;	
}
#sidebar ul.sidemenu ul { margin: 0 0 0 5px; padding: 0; }
#sidebar ul.sidemenu ul li { background: none; }


/* Footer */	
#footer {
	color: #C6DDEE;
	background: #CCC url(/App_Themes/EnvisionCSS/images/footer1.jpg) no-repeat center top;
	clear: both;
	width: 1020px;
	height: 65px;
	text-align: center;	
	font-size: 92%;	
}
#footer a { 
	color: #FFF;
	text-decoration: none; 
}

/* alignment classes */
.float-left  { float: left; }
.float-right { float: right; }
.align-left  { text-align: left; }
.align-right { text-align: right; }

/* display and additional classes */
.clear { clear: both; }
    Code (markup):
     

    Attached Files:

    dapinheiro, Oct 8, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    Thanks.

    Here's what you've got:
    http://stommepoes.nl/dapinheiro/testpage.html

    Looks like actually they're not really as wide as the boxes themselves?

    Edit the width of the content13 one to match the others, or since you did say you want 1020 width, I guess the others need to become larger/wider instead.

    Also you'll want (ah, I still have your first css and html don't forget) contentwrap to get wider so the right sidebar can sit over the green area again (it doesn't now simply because contentwrap isn't wide enough, as you see in red outline).
    #main and #sidebar can prolly keep their % widths fine so

    *edit oops lemme try with your new css! Wait a bit pls...
     
    Stomme poes, Oct 8, 2009 IP
  12. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Edit the contente 13 was one of the things i've tried out ! doens't solve it.. and header and foter are 1020. It should be right.. dont know ! bah what bad luck !
     
    dapinheiro, Oct 8, 2009 IP
  13. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Ok yeah you widened contentwrap.

    http://stommepoes.nl/dapinheiro/testpage.html

    so, it still just looks like your other images really aren't as wide as you intended. (they may not look like they match up well on my version's left side, that's likely due to the added borders).

    Just make content-wrap enclose its floats (the easy way is overflow: hidden on contentwrap but remember overflow has a Day Job (to hide overflow) so check that it works ok and doesn't cut anything off... don't ever let contentwrap get a height set on it for instance...)) and make your header/footer images wider and I think you're good to go.
     
    Stomme poes, Oct 8, 2009 IP
  14. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #14
    No you have contentedit the width you want. Make header and footer wider.

    Header's only 820 px wide! I'll do an edit, watch:
     
    Stomme poes, Oct 8, 2009 IP
  15. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #15
    i'm using header1.jpg not header.jpg.

    But try it anyway, if you solve it I will ve apreciated !
     
    dapinheiro, Oct 8, 2009 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Yeah I realised that after i didn't see my change : )

    What I did instead is took your contentedit and header1 and put them together in GIMP so you can see how they are different:
    http://stommepoes.nl/dapinheiro/headertemp.jpg

    you can see they're a good 13 pixels off from each other : )

    So, notice contentedit had a bit less gray sidespace on the right, while header and footer you put them exactly in the middle.

    Hmm, I guess it would be easier for you to shorten one file than lengthen a bunch of others : ) So, remove 13 or so px from the middle of contentedit and get the right side to match the other files' right side.
     
    Stomme poes, Oct 8, 2009 IP
  17. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Stomme poes, Oct 8, 2009 IP
  18. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Thanks mate !! It solved the problem.. nice thinking to find it out !
     
    dapinheiro, Oct 8, 2009 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Next time you have a similar issue, adding either borders or background colours to your boxes will help you see sizing problems (especially when you have floats I've found).

    Next it's easierr when you have a browser tool like the Web Developers' ToolBar (Firefox) or Aardvark to outline elements. If the page had been live, I would have seen what we saw once I had a copy with the images and the borders... that the elements themselves were cool, but the images weren't right.

    Then I opened a header1 file in Gimp (photoshop, whatever) and the contentedit file and just pasted one right over the other, where we could see why they didn't line up.
     
    Stomme poes, Oct 8, 2009 IP
  20. dapinheiro

    dapinheiro Guest

    Messages:
    9
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    I think I will get it.. Aardvark fits ie ? I need to use ie..
    Anyway thanks for all !
     
    dapinheiro, Oct 8, 2009 IP
Page 1 of 2