July 30, 200917 yr Hello, im a beginner at web design and just trying to get my head around CSS. i have set out my website in a basic structure with div tags. I have a header area, navigation bar, main content area and footer. i need the main content area to be a different size on each page depending on content (obviously) my question is, how do i make it a different size for each page. if i change the CSS rule it applies to every page. Thanks for your help!
July 30, 200917 yr Hey there We can't really help you without some html/css or, even better, a link to a 'live' site/page. Post some of your code and you'll get a better response
July 30, 200917 yr On your content div tag you should put the css style as a class which will contain all the styles which don't need to be changed. <div class="content"> And then on each of the different pages, add different id tags for each div, then in your css, add the styles which need to be changed(eg. width) to that id. Like... <style type="text/css"> .content { // Styles that are the same on every page. border: 1px solid #ffffff; } #page1 { // Styles that only effect page1. width: 900px; } #page2 { // Styles that only effect page2. width: 750px; } </style> <div id="page1" class="content"> <!-- This div will be 900px wide and have a border. --> </div> <div id="page2" class="content"> <!-- This div will be 750px wide and have a border. --> </div> Then add more for each page. I hope that helps.
July 31, 200917 yr Author hey, can i change the CSS contextual selector once it has already been created or do i need to create a new one from scratch? if so, how? im not really sure what i should be posting so here is my html followed by the CSS: (no doubt this is a mess) <!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> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>North Avon Carpentry</title> <link href="nacstylesheet.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="navbar"></div> <div id="maincontent"> <h1>Welcome to North Avon Carpentry</h1> <p>After completing his apprentiship, Ian Woodruff formed North Avon Carpentry Ltd. in 1986. Since then the comany has prided itself on providing a quality, reliable service to both the commercial and private sectors. After 20 years of trading in the Bristol are we are proud to have built a broad client base of local builders as well as private customers.</p> </div> <div id="imagebar"></div> <div id="imagerow"></div> <div id="footer">North Avon Carpentry Ltd. 46 York Close, Yate, Bristol, BS37 5XB</div> </div> </body> </html> body { text-align: center; margin: 0px; padding: 0px; background-color: #bbb; } #wrapper { background-color: #FFF; text-align: left; width: 800px; margin-top: 10px; margin-right: auto; margin-bottom: auto; margin-left: auto; border: 1px solid #FFF; position: relative; } #header { background-color: #F00; margin: 0px; padding: 0px; height: 150px; background-image: url(images/NACheader.jpg); background-repeat: no-repeat; border: 1px solid #666; position: relative; } #navbar { background-color: #999999; height: 30px; background-image: url(images/NACnaviigation.gif); background-repeat: no-repeat; border: 1px solid #666; padding: 0px; margin-top: 1px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; } #maincontent { background-color: #FFF; padding: 0px; height: 75px; width: 800px; margin: 0px; } #contactinfo { border: 1px solid #666; margin: 25px; background-color: #CCC; padding-left: 120px; } #imagebar { background-image: url(images/imagebar.jpg); background-repeat: no-repeat; height: 150px; width: 750px; margin: 25px; border: 1px solid #666; } #footer { background-color: #808080; margin: 0px; padding: 0px; height: 30px; border-top-width: 1px; border-bottom-width: 1px; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #666; border-right-color: #666; border-bottom-color: #666; border-left-color: #666; font-family: Arial, Helvetica, sans-serif; font-size: x-small; color: #FFF; text-align: center; line-height: 30px; clear: both; border-right-width: 1px; border-left-width: 1px; } h1 { font-family: Arial, Helvetica, sans-serif; font-size: x-large; font-weight: bolder; color: #808080; padding-top: 0px; padding-left: 25px; } p { font-family: Arial, Helvetica, sans-serif; font-size: small; font-weight: normal; color: #000; padding-right: 25px; padding-left: 25px; border-top-style: none; border-right-style: none; border-bottom-style: none; border-left-style: none; } #contactsections { float: left; height: 230px; width: 135px; position: absolute; left: 26px; top: 302px; line-height: 16px; }
July 31, 200917 yr Author currently on each of my pages i need the main content area to be different heights, if i set the height in CSS it applies the change to each page. i need to know how to have it a different height according to the content. thnaks
July 31, 200917 yr Just give the <body> of each page a class or id, and in your css... body#page-one #content {height: 300px} body#page-two #content {height: 600px}
July 31, 200917 yr Author can i do this to the existing body or do i have to create a new one? how do i do this? thanks
July 31, 200917 yr On your existing pages edit <body> to <body id="page-one"> or <body id="page-two"> etc.
July 31, 200917 yr Author ok i really appreciate all of your help but i dont think im getting this right. i went into the html of all my pages and changed <body> and </body> to <body id="page-one"> <?body id="page-one"> etc but nothing has changed. i cant change the CSS name from "body" so what do i have to do? if you could explain in the most basic of terms i would really appreciate it. thanks
July 31, 200917 yr Well, I'm just continuing what Mr P started, he gave the code for the css except that your div seems to be called maincontent body#page-one #maincontent {height: 300px} body#page-two #maincontent {height: 600px} and I gave the code for each page's different body tag <body id="page-one"> or <body id="page-two"> That should give different heights for different pages.
July 31, 200917 yr Author im sure im doing something wrong but this is not working for me. any chance someone could explain in even more basic terms what i have to do? step by step would be good. sorry, but i really appreciate the help.
July 31, 200917 yr I've just tested this simple page:- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="keywords" content="Wickham"/> <meta name="description" content="Test items"/> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"/> <title>Test</title> <style type="text/css"> body#page-one #maincontent {height: 300px; width: 300px; background: pink;} body#page-two #maincontent {height: 600px; width: 300px; background: pink;}</style> </head> <body id="page-one"> <div id="maincontent"><p>hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello hello</p> </div> </body> </html> If you save the page with the different body tag <body id="page-two"> the div height will be different. Note the space or lack of a space in the style body#page-one #maincontent {height: 300px; width: 300px; background: pink;}
Create an account or sign in to comment