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 3 of 3
  1. #1
    New Coder
    Join Date
    Apr 2013
    Posts
    10
    Thanks
    8
    Thanked 0 Times in 0 Posts

    Can you help me simplify my page?

    So I am a huge beginner at this and I feel like some of the things I put into my code are either excessive or more complex ways of doing things that needn't be complex. Can you please look through my code and tell me areas where I can simplify? Also, whenever i make the window smaller, my whole page gets screwed up and overlaps. Would really appreciate any tips you guys could offer me.

    html
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>CNHS Free the Children</title>
    	<link type ="text/css" rel = "stylesheet" href = "ftccss.css"/>
    </head>
    <body>
    <ul>
    	<li><strong>Home</strong></li>
    	<li><strong>Announcements</strong></li>
    	<li><strong>Events</strong></li>
    	<li><strong>About</strong></li>
    </ul>
    <div class = "backgroundimage"></div>
    <div class = "bodydiv">
    	<div class = "bodydiv2">
    		<div class = "header">
    			<img src = "http://missteenalberta.com/files/2011/05/free-the-children1.jpg" width = "80px" height = "80px"/>
    			<div class = "ftctitlediv">
    				CNHS Free the Children
    			</div>
    		</div>
    	<div class = "bodymain">
    		<div class = "insidebody">
    		<p class= "ftcp"> Welcome to the official Colts Neck High School Free the Children website.
    		On this website, you will find a plethora of useful information about the club. Use the navigation bar
    		at the top of the page to navigate the website. 
    		</p>
    		</div>
    	</div>
    	</div>
    </div>
    </body>
    </html>
    CSS
    Code:
    *{
    
    font-family: Verdana;
    }
    ul{
    padding: 0;
    margin: 0;
    list-style-type: none;
    text-align: center;
    }
    li{
    padding: 4px;
    display: inline;
    background-color: #D8D8D8;
    font-family: Georgia;
    border: 2px solid black;
    text-align: center;
    font-size:15px
    }
    
    body{
    background-color: #339933;
    background-image: url(http://i.imgur.com/CyIaJya.png?1);
    background-repeat: repeat-x repeat-y;
    
    }
    .bodydiv{
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 10px;
    padding: 4px;
    height: 800px;
    background-color: #669966;
    }
    .bodydiv2{
    margin: 5px;
    padding: 4px;
    
    background-color: #D8D8D8;
    height: 775px;
    }
    img{
    margin: 10px;
    display: inline;
    float: left;
    border: 4px solid white;
    }
    .header{
    margin: 5px;
    color:#003300;
    background-color:#B0B0B0 ;
    border: 1px solid #989898;
    height: 110px;
    }
    .ftctitlediv{
    background-color: white;
    display: block;
    margin-left: 110px;
    margin-right: 10px;
    margin-top: 10px;
    padding: 10px;
    text-align:center;
    font-size: 57px
    }
    .bodymain{
    margin-top: 8px;
    margin-left: 5px;
    margin-right: 5px;
    
    color:#003300;
    background-color:#B0B0B0 ;
    border: 1px solid #989898;
    height: 642px;
    }
    .insidebody{
    margin: 10px;
    background-color: white;
    height: 622px;
    }
    .ftcp{
    padding: 10px;
    font-family: Georgia;
    }

  • #2
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Hello dekkahs,
    I'm not sure you want to set the height on everything like you do. At least not on .bodymain and .insidebody, I understand for demo for now but later it will work better if it expands to contain what you put in it.

    Also, it may work better to put that 10px padding on the container rather than your paragraphs.

    Look at it like this -
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>CNHS Free the Children</title>
    <style type="text/css">
    html, body {
    	margin: 0;
    	font: 100% Verdana, Geneva, sans-serif;
    }
    body { background: #339933 url(http://i.imgur.com/CyIaJya.png?1); }
    ul {
    	padding: 0;
    	margin: 0;
    	list-style-type: none;
    	text-align: center;
    }
    	li {
    		padding: 4px;
    		display: inline;
    		background: #D8D8D8;
    		font-family: Georgia;
    		border: 2px solid black;
    		text-align: center;
    		font-size: 15px
    	}
    .bodydiv {
    	margin: 10px 200px 0;
    	padding: 4px;
    	background: #669966;
    }
    	.bodydiv2 {
    		margin: 5px;
    		padding: 4px;
    		background: #D8D8D8;
    	}
    .header {
    	margin: 5px;
    	color: #003300;
    	background: #b0b0b0;
    	border: 1px solid #989898;
    }
    	.header img {
    		margin: 10px;
    		float: left;
    		border: 4px solid white;
    	}
    	h1.ftctitlediv {
    		margin: 10px 10px 0 110px;
    		padding: 10px;
    		background: #fff;
    		text-align: center;
    		font-size: 3.4em;
    	}
    .bodymain {
    	margin: 8px 5px 0;
    	color: #003300;
    	background: #b0b0b0;
    	border: 1px solid #989898;
    }
    	.insidebody {
    		margin: 10px;
    		padding: 10px;
    		background: #fff;
    	}
    	p.ftcp {font-family: Georgia;}
    </style>
    </head>
    <body>
    	<ul>
    		<li><strong>Home</strong></li>
    		<li><strong>Announcements</strong></li>
    		<li><strong>Events</strong></li>
    		<li><strong>About</strong></li>
    	</ul>
    	<div class="backgroundimage"></div>
    	<div class="bodydiv">
    		<div class="bodydiv2">
    					<div class="header">
    						<img src="http://missteenalberta.com/files/2011/05/free-the-children1.jpg" alt="description" width="80" height="80">
    						<h1 class="ftctitlediv">CNHS Free the Children</h1>
    					<!--end header--></div>
    				<div class="bodymain">
    					<div class="insidebody">
    						<p> 
    							Welcome to the official Colts Neck High School Free the Children website.
    							On this website, you will find a plethora of useful information about the club. Use the navigation bar
    							at the top of the page to navigate the website. 
    						</p>
    						<p>
    							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    							aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    							sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    							nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    							duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    						</p>
    						<p>
    							Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna 
    							aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no 
    							sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam 
    							nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo 
    							duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
    						</p>
    					<!--end insidebody--></div>
    			<!--end bodymain--></div>
    		<!--end bodydiv2--></div>
    	<!--end bodydiv--></div>
    </body>
    </html>
    Also removed some odd spacing from your markup, img src does not get px measurement on width/height as that is default, .ftctitlediv is not really a div - it's a heading, some indentation and commenting will help keep things straight...
    Last edited by Excavator; 04-14-2013 at 06:17 PM.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad

  • #3
    Master Coder Excavator's Avatar
    Join Date
    Dec 2006
    Location
    Alaska
    Posts
    9,667
    Thanks
    22
    Thanked 1,827 Times in 1,811 Posts
    Quote Originally Posted by dekkahs View Post
    whenever i make the window smaller, my whole page gets screwed up and overlaps.
    When narrowing up, the content must stay inside the widths you've given the containers so it expands down. By setting heights on everything, you don't leave room to do that so your content overflows.
    The solution would be to remove the heights, and in some places maybe even widths, and let the document flow naturally.
    A min-width setting might help too.
    Validate often DURING development - Use it like a splelchecker | Debug during Development |Write it for FireFox, ignore IE
    Use the right DocType | Validate your markup | Validate your CSS | Why validating is good | Why tables are bad


  •  

    Posting Permissions

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