Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Changing width... after completion!

    Hello everyone. Just joined and I can't wait to utilize the resources here by sifting through the forums to get ideas and troubleshoot.

    I have been struggling with a really simple site that was just designed, which can be viewed here: http://www.jaredhumphrey.com/test/ and the CSS located here: http://www.jaredhumphrey.com/test/images/style.css

    Everything is basically complete, but now they possibly want images added. Ideally if I add images I'd like to widen the whole thing so it takes up more screen real estate. Adjusting it myself hasn't gone so well with keeping the layout intact. Any suggestions at all for simple fix in stretching the layout horizontally?

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    It is a very simple site. There nothing complicated going on there.

    Did you think that it might be just as well to just rebuild it? The main content area could pretty much be just copied into a new layout. You could even just apply some minor tweaks to an existing layout template to get the right style and then paste the main contents in.

    I would recommend handling the navigation differently if you make it wider though. It looks like it is currently set up to fit on an 800x600 screen (though someone forgot to take into account that browsers use a little of that space for their standard UI chrome). If you just make it wider as is, it won't fit 800x600 display resolution anymore (though if you put the nav on top instead of sticking off the side, you could make it much wider and still support 800x600).

    Anyway, I went through just as a quick test and didn't have any trouble making the site 100px wider. The changes I made are highlighted red in the code below. The only values I changed were just width: values (though not all the width values), and in every case I just added 100px to the existing value. The one that is green is not changed (I just marked it green because it might be easy to mistakenly add 100 to that value too, but it would mess things up). This seemed to work fine.

    Obviously, you could add more/less than 100px according to your own preference.

    Code:
    /* CSS Document */
    
    /*PAGE LAYOUT*/
    body {
    	background-image: url(images/bg_body.jpg);
    	background-repeat: repeat-x;
    	margin-left: 0px;
    	margin-top: 0px;
    	margin-right: 0px;
    	margin-bottom: 200px;
    }
    #toppage{
    	width:900px;
    }
    #date{
    	float:left; width:190px; height:39px; border-bottom:solid 1px #999999; border-right:solid 1px #999999;
    }
    #topbar{
    	float:left; 
    	width:708px; 
    	height:40px; 
    	background-image:url(bg_topbar.gif);
    	background-color:#CBC55C;
    	background-repeat:repeat-x;
    	border-right:solid 1px #999999;
    }
    #header{
    	width:900px;
    }
    #content{
    	width:900px;
    }
    #contenttext{
    	float:left; width:708px; 
    	background-color:#F7F7F7; 
    	border-left:solid 1px #999999; border-right:solid 1px #999999; 
    	border-bottom:solid 1px #999999; border-top:dotted 1px #CCCCCC; 
    	min-height:360px;
    }
    #logo{
    	float:left; width:290px; height:110px; background-color:#F7F7F7; border-left:solid 1px #999999;
    }
    #pagetitle{
    	position:relative; float:left; width:608px; height:110px; background-color:#F7F7F7; border-right:solid 1px #999999;
    }
    #title{
    	position:absolute; right:10px; bottom:0px; width:700px;
    }
    #menu{
    	float:left; width:190px; margin:0px;
    }
    #footer{
    	width:690px; padding-right:10px; padding-left:200px;
    }
    
    /*GRAY PANEL*/
    .panel{
    	padding:12px;
    	border:solid 1px #E4E4E4;
    	background-color:#EEEEEE;
    	margin:10px;
    	padding:10px;
    	width:650px;
    	overflow: hidden
    }
    
    /*TEXT STYLES*/
    .bodytext {
    	font: 0.7em Tahoma, sans-serif;
    	color: #666666;
    }
    .smalltext {
    	font: 0.7em Tahoma, sans-serif;
    	font-size: 11px;
    	color: #666666;
    }
    .smallwhitetext {
    	font: 0.7em Tahoma, sans-serif;
    	font-size: 11px;
    	font-weight:bold;
    	color: #FFFFFF;
    }
    .smallwhitetext a{
    	font: 0.7em Tahoma, sans-serif;
    	font-size: 11px;
    	font-weight:bold;
    	color: #FFFFFF;
    	text-decoration:none;
    }
    .smallwhitetext a:hover{
    	text-decoration:underline;
    }
    .smallgraytext {
    	font: 0.7em Tahoma, sans-serif;
    	font-size: 11px;
    	font-weight:bold;
    	color:#999999;
    }
    .smallgraytext a{
    	font: 0.7em Tahoma, sans-serif;
    	font-size: 11px;
    	font-weight:bold;
    	color:#ABC578;
    	text-decoration:none;
    }
    .smallgraytext a:hover{
    	text-decoration:underline;
    }
    .titletext {
    	font: 0.7em Tahoma, sans-serif;
    	font-size:36px;
    	font-weight:bold;
    	color: #ABC578;
    }
    .logotext {
    	font: 0.7em Tahoma, sans-serif;
    	font-size:36px;
    	font-weight:bold;
    	color: #999999;
    }
    .orangelogotext {
    	font: 0.7em Tahoma, sans-serif;
    	font-size:36px;
    	font-weight:bold;
    	color:#ABC578;
    }
    .orangetitle {
    	font: 0.7em Tahoma, sans-serif;
    	font-size:24px;
    	font-weight:bold;
    	color:#ABC578;
    }
    #linksmenu a{
    	float:right; 
    	width:183px; 
    	height:20px; 
    	background-color:#ABC578; border-left:solid 1px #FFFFFF; border-bottom:solid 1px #FFFFFF;
    	font: 0.7em Tahoma, sans-serif;
    	font-size: 11px;
    	font-weight:bold;
    	color: #FFFFFF;
    	text-decoration:none;
    	padding-top:5px;
    }
    #linksmenu a:hover{
    	background-color:#514F1C;
    }

  • Users who have thanked linehand for this post:

    jimmyjam (01-15-2010)

  • #3
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Worked like a charm. I must have missed one when I was changing them or possibly the green one. This helped a lot, thanks linehand! I'll go ahead and ask.. any CSS/HTML resources you recommend?

  • #4
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    Well, I learned a great deal about html/css in general just by researching a few specific things:

    Floats
    Pure html/css list based menus
    True equal length columns
    Sticky footers
    Positioning, and using absolute positioning relative to other elements
    HTML 4.01 vs XHTML
    progressive enhancement vs graceful degradation
    semantic html
    getting inline-block and min-width to work in IE6/7 without any JS

    Just searching google and getting one's head around some of those layout tricks can give a person a pretty good grasp of html/css in a general sense that goes far beyond the specific techniques used.

    My bookmarks are a huge disorganized mess though so as far as specific sites go.. There are just too many.

    Just off the top of my head though:

    http://css.maxdesign.com.au/listamatic/ has a fantastic list of lists. This is a great resource for learning how much can be done with simple lists. A word of warning though, a lot of their examples are leaning on a cheap trick to make it look like it does something that it doesn't really do, and thus need some clever outside the box thinking to make them really work well in many real use scenarios

    http://matthewjamestaylor.com/ Has what I have found to be the very best sticky footer technique, as well as one of the only true equal length column techniques that I have seen (not pseudo columns), along with lots of other good stuff.

    Finally I think it wise when trying to find a way of doing something tricky, to not just copy and paste code, but rather to rewrite the code and to really grasp how/why it works. Also to not just settle for the first decent solution you find, but rather to compare a selection of different methods aim at the same/similar results

  • Users who have thanked linehand for this post:

    jimmyjam (01-17-2010)

  • #5
    New to the CF scene
    Join Date
    Jan 2010
    Posts
    3
    Thanks
    2
    Thanked 0 Times in 0 Posts
    This is great info you have given me to research. I can't say thanks enough.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •