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 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Responsive Web Design Questions

    I am working on this site. I am trying to make it to where it scales down to a certain point because this site will be viewed on a tablet quite a bit. I think I have everything like I want it except for the content goes under the sidebar when I scale down. How do I make it where the content doesn't go under the side bar? I would be fine with it just scaling down some and then eventually moving below the sidebar. How do I set this up? I'm fairly new to building scalable layouts so any help is greatly appreciated!

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    you would need to show the involved css and html for anyone to make an assessment

  • #3
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Oops! I forgot to link to the site. Here it is: http://www.cobb-web.net/webportal/homepage.html Sorry!

  • #4
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    it's because yoru using position absolute on the sidebar.

    my solution sucked nevermind.

    see your using % for width in some places, in others your using min-width, and using a different type of positioning for both elements and thats not going to work well for what you want to do. sorry thgouht I had a better solution but I was wrong

    Also I wanted to mention, when starting new projects I liek to Use blank templates built by this guy - http://matthewjamestaylor.com/blog/p...liquid-layouts

    hes got several sets of fixed size and liquid layouts that are jsut perfect to start with
    Last edited by DanInMa; 02-29-2012 at 09:15 PM.

  • #5
    Senior Coder Rowsdower!'s Avatar
    Join Date
    Oct 2008
    Location
    Some say it's everything.
    Posts
    2,027
    Thanks
    5
    Thanked 397 Times in 390 Posts
    As DanInMa said, you have absolute positioning in there skewing your results. I actually think you're OK to use a minwidth here though.

    This would be my recommended changes to your CSS ('css/webportal.css'):
    Code:
    /*Body*/
    
    
    h1, h2, h3, h4, h5, h6 {
    	font-family: 'Unna', serif;
    	text-shadow: #585858 0px 1px 0px;
    	padding: 10 0 5 10;
    	margin: 0;
    }
    
    p {
    	font-family: 'Cantarell', sans-serif;
    	padding: 10px;
    	font-size: 1em;
    }
    
    li, td {
    	font-family: 'Cantarell', sans-serif;
    	font-size: .9em;
    }
    
    body {
    	background: #e9e9e9;
    }
    
    a {
    	color: #66C120;
    	text-decoration: none;
    }
    
    a:hover {
    	text-decoration: underline;
    }
    
    img {
    	padding:3px;
    }
    
    
    /*Header*/
    	
    
    .pageheader {
    	background: #272727 url("/webportal/images/headerbg.png") repeat;
    	height: 70px;
    	width: 101%;
    	margin: -10px;
    	min-width: 700px;
    }
    
    #headerleft h1, #headerleft h3, #headerleft p {
    	font-family: 'Cantarell', sans-serif;
    	color: #ffffff;
    	padding: 10 0 10 0;
    }
    
    #headerleft {
    	display: block;
    	float: left;
    	padding-left: 15px;
    }
    
    #headerleft a {
    	color: #ffffff;
    	text-decoration: none;
    	margin-bottom: -10px;
    }
    
    #headerleft h3 {
    	margin-top: -20px;
    }
    
    #headerright {
    	display: block;
    	float: right;
    	padding-right: 5%;
    }
    
    #headerright a {
    	color: #bfd255;
    }
    
    /*Sidebar*/
    .sidebar {
    	display: block;
    /*	position:absolute;
    	left:0; */
    	width: 16%;
    	min-width: 215px;
    	background: #757575;
    	float:left;
    	margin-left: 1%;
    	margin-top: 1em;
    	border: solid #bdbdbd 2px;
    	border-radius: 5px;
    		-moz-border-radius: 5px; 
    
    }
    
    .sidebar h3 {
    	color: #000000;
    	background: rgb(191,210,85); 
    		background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 99%);
    		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(99%,rgba(114,170,0,1)));
    		background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    		background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    		background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    		background: linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    }
    
    .sidebar h3 a {
    	color: #000000;
    }
    
    .sidebar a {
    	color: #d1d1d1;
    }
    
    .sidebar li {
    	list-style: none;
    }
    
    
    
    /*Content*/
    @media screen and (max-width: 800px) {
    	margin-left: 250px;
    }
    
    .content {	
    	margin-top: 1em;
    	display: block;
    	background: #ffffff;
    	width: 60%;	
    	min-width: 420px;
    	float: left;
    	margin-left: 1%;
    	border: solid #bdbdbd 2px;
    	border-top-left-radius: 5px;
    	border-top-right-radius: 5px;
    		-moz-border-radius-topleft: 5px;
    		-moz-border-radius-topright: 5px;
    }
    
    .content h2 {
    	color: #000000;
    	margin-top: 0px;
    	height: 1.2em;
    	padding: .2em;
    	background: rgb(191,210,85); 
    		background: -moz-linear-gradient(top, rgba(191,210,85,1) 0%, rgba(142,185,42,1) 50%, rgba(114,170,0,1) 99%);
    		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(191,210,85,1)), color-stop(50%,rgba(142,185,42,1)), color-stop(99%,rgba(114,170,0,1)));
    		background: -webkit-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    		background: -o-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    		background: -ms-linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    		background: linear-gradient(top, rgba(191,210,85,1) 0%,rgba(142,185,42,1) 50%,rgba(114,170,0,1) 99%);
    	border-top-left-radius: 3px;
    	border-top-right-radius: 3px;
    		-moz-border-radius-topleft: 3px;
    		-moz-border-radius-topright: 3px;
    	
    }
    
    /*Categories*/
    table {
    	margin: 20px;
    	border: solid #bdbdbd 1px;
    	width: 80%;
    	min-width:400px;
    }		
    
    td {
    	padding: 5px;
    }
    
    th {
    	text-align: left;
    	border-bottom: solid #bdbdbd 1px;
    }
    
    .r01 {
    	background: #f5f5f5;
    }
    
    .r02 {
    	background: #ffffff;
    }
    Note the three or so highlighted parts of the above CSS. Nothing else really needs to be changed in order to fix this problem.
    The object of opening the mind, as of opening the mouth, is to shut it again on something solid. –G.K. Chesterton
    See Mediocrity in its Infancy
    It's usually a good idea to start out with this at the VERY TOP of your CSS: * {border:0;margin:0;padding:0;}
    Seek and you shall find... basically:
    validate your markup | view your page cross-browser/cross-platform | free web tutorials | free hosting

  • #6
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    836
    Thanks
    10
    Thanked 79 Times in 77 Posts
    Choosing Dimensions for Your Web Page Layout:

    In Search of the Holy Grail: http://www.alistapart.com/articles/holygrail/
    Introduction to Responsive Web Design: http://www.linkedin.com/news?actionB...3Z-fJK7fpockY1
    http://www.elated.com/articles/choos...b-page-layout/
    How to create flexible sites quickly using standards like CSS and XHTML: http://www.ibm.com/developerworks/web/library/wa-rapid/

    Care With Font Size: http://www.w3.org/QA/Tips/font-size
    Designing for the Web: Resolution and Size: http://sitepointcom.createsend4.com/...yd/birtthtw/h/
    Websites Shouldn’t Look The Same Across Different Browsers: http://www.noupe.com/design/websites...re-is-why.html

    Cross-Browser CSS in Seconds with Prefixr: http://net.tutsplus.com/articles/new...-with-prefixr/
    It’s Not Responsive Web Building, It’s Responsive Web Design: http://www.getfinch.com/finch/entry/...ve-web-design/
    Beginner’s Guide to Responsive Web Design: http://thinkvitamin.com/design/begin...ve-web-design/

    Mobile Website:

    Learn the Mobile Web: http://learnthemobileweb.com/2009/07/mobile-meta-tags/
    10 Ways the Mobile Web is Different: http://www.elated.com/articles/10-wa...-is-different/
    Redesigning a Site For Mobile: What's Involved?: http://www.elated.com/articles/redes...hats-involved/
    How to Validate and Test for the Mobile Web: http://designfestival.com/how-to-val...&utm_term=More

    Validating:

    Why Validate?: http://validator.w3.org/docs/why.html
    CSS Validator: http://jigsaw.w3.org/css-validator/
    HTML Validator: http://validator.w3.org/#validate_by_uri+with_options

    Those links should help.
    ☠ ☠RON☠ ☠

  • #7
    New to the CF scene
    Join Date
    Feb 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks everyone! That was all very helpful. I finally got it solved.


  •  

    Posting Permissions

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