I am needing help creating code that includes a div for a #header, #footer, and #main. I'm just not sure where it goes in the code. I have created a simple html page with a css style sheet. I'm not asking for anyone to write the code for me as I am really trying to actually learn this for my class, but some guidance would be awesome. The page is a resume with my contact info in the header and a copyright notice in the footer. The resume content will go in the main section. Thank you so much for any help you can offer!
Here is what I had for the previous assignment that we are to build on.
CSS Style Sheet...
body {
background-color: rgb(184, 179, 173);
}
.header{
h1{
font-family:"Impact", Charcoal, "sans-serif";
color: rgb(217, 89, 0);
margin-left: 20px;
font-size:65px;
text-align: center;
}
h2{
font-family:"arial black", gadget, "sans-serif";
color: rgb(242, 125, 0);
margin-left: 20px;
font-size:40px;
text-align: center;
text-decoration: underline;
}
p{
font-family:"arial", arial, "sans-serif";
color: rgb(51, 53, 36);
margin-left: 32px;
font-size:20px;
text-align: left;
text-indent:-32px
}
img {
display: block;
margin: 0 auto;
width:230px;
height:320px;
}
HTML page...
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="JillBowman2.css">
</head>
<body>
<h1>Jill Bowman</h1>
<img src="https://s26.postimg.org/9p6vuu5i1/JBowman.png" alt="Jill-Bowman-Photo">
<br>
<h2>Education</h2>
<p>Bachelor of Science - Elementary Education<br>
Oklahoma State University - Stillwater, OK<br>
May 2010</p>
<br>
<p>Master of Education - Educational Technology <br>
University of Arkansas - Fayetteville, AR<br>
Anticipated December 2018.</p>
<h2>Educational Experience</h2>
<br>
<p>6th Grade Math Teacher - McKinney, TX<br>
From August 2015 - June 2017 I was employed by McKinney Independent School District as a 6th grade math teacher at Dowell Middle School. During my time at Dowell I taught on-level, Pre-AP, and GT. I was the NJHS sponsor and coordinated a fundraising campaign that raised over $10,000 for the Leukemia and Lymphoma Society. I was also the Academic UIL coach for Calculator Applications and Number Sense. My students consistently placed in the top 5 in both events. In the 2016-2017 school year, 59% of my students scored at the highest level on the STAAR test.</p>
<br>
<p>8th Grade Math Teacher - Carrollton, TX<br>
From August 2014 - June 2015 I was employed by Carrollton-Farmers Branch Independent School District as an 8th grade math teacher at Dan F. Long Middle School. While at Long, I taught Algebra 1 and 8th grade math. I implemented a blended classroom with the use of 1-to-1 iPads. I was also the head cheer coach and StuCo sponsor at Long.</p>
<br>
<p>Middle School Math Teacher - Tulsa, OK<br>
From August 2012 - June 2014 I was employed by Tulsa Union Public School as a math teacher at the Union 6th/7th Grade Center. While at U6/7 I taught all levels of math to 6th and 7th grade. I was also the leader of two after school clubs. One of my clubs talked about current events and the other taught the students how to cook easy and healthy meals for their families. I was also the afternoon detention teacher. </p>
<br>
<p>7th Grade Math Teacher - Liberal, KS<br>
From August 2011-May 2012 I was employed by Liberal USD 480 as a 7th grade math teacher at West Middle School. While at WMS, I taught various levels of 7th grade math. I was also responsible for security at all sporting events. </p>
<br>
<p>6th Grade Core Teacher - Liberal, KS<br>
From August 2010 - May 2011 I was employed by Liberal USD 480 as a 6th grade core teacher at Cottonwood Intermediate School. I was responsible for teaching my students math, science, social studies, and language arts. While at CIS I worked for Project BEST which was an after school enrichment and remediation program. </p>
<br>
<h2>Showcase</h2>
<br>
<p>As a requirement for one of my master’s classes, I built a website with various technology tutorials. Please visit my page by clicking here.
<h2>Contact Me</h2>
<p>Feel free to contact me via Email.</p>
</body>
</html>
From my understanding, you already have the style sheet referenced in your HTML file. All you need to do here is add a div element, which is just a container, and "call" the various css definitions. I think your intial attempt worked fine but you weren't exactly calling the header CSS definition:
<div class="header">Header</div>
At the end of the day, I'd just recommend you take a look at this if you still need help: Simple div with header,footer and body
Related
<!doctype html>
<html lang="en">
<head>
<title>My Resume</title>
<meta charset="utf-8" />
<!-- prgWebPage.html - My Resume Site
Written by: Rob Nelson nelsonj15#csp.edu
Written: 3/10/17
Revised: ???
-->
</head>
<body>
<h1>Rob Nelson</h1>
<!-- This is where my photo will be displayed -->
<img src="graphic/myPortrait.jpg" alt="A portrait of myself." />
<hr>
<h1>Professional Goal</h1>
<p>Greetings To All,</p>
<p>My name is Rob Nelosn, and a professional goal of mine is to gradute with my B.S. in Computer Sciences here at Concordia.
I believe this goal will not only enrich my personal development, but will give me tools I can implement into my career in the future.
I am currently working with a non-profit in Saint Paul, MN and I have used a few computer oriented skills since I was hired in 2014.
I hope to take the skills from this program to bolster my resume, and overall work portfolio, and ability.
<hr>
<h2>Work Experience</h2>
<hr>
<p><strong>New Lens Urban Mentoring Society Saint Paul, Minnesota 08/2014-Current Outreach and Partnership Coordinator</strong>
<br>Recruiting/Retaining Mentors for the program, Office Management, Website development, Social Media Development (Facebook, various blog sites)
</p>
<p><strong>Green Iowa AmeriCorps Dubuque, Iowa 08/2013-08/2014 Marketing Coordinator</strong><br>
Maintaining, and managing all fascists of social media.(Facebook, Instagram, Twitter, Monthly Newsletter, Company Website) My job also consisted of our primary focus which was Home Energy Audits, and Weatherizations. In addition I also helped with education events, outreach events, and other volunteer management projects.
<p><strong>The Busted Lift Dubuque, Iowa 08/2013-08/2014 Bartender</strong> <br>
Serve drinks, and cater to patron's needs as they arrive at the bar.
<p><strong>United States Army National Guard 06/2005-06/2009 46QPublic Affairs Specialist Journalist</strong><br>
Research, prepare and disseminate news releases, articles, Web-based material and photographs on Army personnel and activities.
<hr>
<h3>Education</h3>
<p><strong>York Technical College Rock hill, SC 2007 - 2009</strong><br>
Art with a focus on Music, GPA: 3.6
<p><strong>Concordia University Saint Paul, MN 2015 - Present</strong><br>
Computer Science Major, GPA: 3.54
</p>
<h4>Skills</h4>
<hr>
<p>
Public Speaking : Public Speaking 101, 102
Fund raising/Grant Writing : Wrote several grants for Green Iowa AmeriCorps (one for the company’s first billboard)
Writing/Editing : Creative writing for 4 years in High School Creative Writing 101-110
Business/Entrepreneur : Micro Econ, Macro Econ
Fine Arts/Crafts : Music History 101, Art Theory
Proficient in Microsoft Word, Power Point, and Publisher
2 years experience performing Energy Audits, and Low Impact Home Weartherizations
<hr>
<style type="text/css">
table{
border: 1px solid black;
font-family: times new roman;
}
td, th {
padding: 10px;
text-align: center;
vertical-align: bottom;
}
</div></style>
<table>
<tr>
<td><strong>My Hobbies</strong></td>
<td><strong>My Current Classes</strong></td></tr>
<tr>
<td>Video Games</td><td>Modern Web Design CSC 135</tr>
<tr>
<td>Guitar</td><td>Introduction to Psychology Psy 101</tr>
</table>
</body>
The error is here:
<hr>
<style type="text/css">
table{
border: 1px solid black;
font-family: times new roman;
}
td, th {
padding: 10px;
text-align: center;
vertical-align: bottom;
}
</div></style>
<table>
You have close tag </div> before close that is not allowed. additionally try to put your styles in head section instead inside the body
I am trying to create an about page for a personal website. I am wondering how to wrap the text around the picture. I want this kind of effect. http://alexbudak.com/about/
The code I have right now is:
<div class="about_content">
<img src="placeholder.jpg" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>
and the css is:
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
}
.about_content p: last-child{
margin-bottom: 0;
}
What you have now will cause the content to wrap around the image. The trick to doing this is applying float: left; to the image, which you have already done.
What I'm suspecting is happening is your image is too wide. If it's 500px or wider, the image will take up the entire width of .about_content, so you need to limit the size of the image. Here's an example utilizing max-width on the image.
h2{
margin: 0 0 1.2em 0;
font-family: 'Raleway', 'sans-serif';
font-weight: normal;
}
.about_content{
width: 500px;
overflow: hidden;
}
.about_content img{
margin-right: 15px;
float: left;
max-width: 250px;
}
.about_content p: last-child{
margin-bottom: 0;
}
<div class="about_content">
<img src="https://static1.squarespace.com/static/541ff355e4b03f1e8815bc58/t/54b43e30e4b0ad2aad39a7f2/1421098552235/budak?format=500w" alt="">
<h2>The Brand</h2>
</p>
The Tailory New York is an appointment only custom clothing company that combines the modernity of Fashion Design with the heritage art of Custom Tailoring. We are unique in that we cater to both the Men and Women market.
</p>
<h2>The Concept </h2>
<p>
Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. At The Tailory New York, we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind. The end result?—clients get the best of both worlds, impeccable custom fit and custom designed pieces that works seamlessly with their lifestyle.
</p>
<h2>A Note From the Founder</h2>
<p>
The idea for The Tailory New York began when I decided to direct my years of fashion design and men’s tailoring experience towards my own wardrobe. As a pant suit aficionado and a lover of men’s fashion and tailoring, I was always drawn to tailored clothing and strived to create fashion that conveyed the same message of confidence that a perfectly custom tailored suit did for men. Style icons like Sean Connery and Cary Grant, as well as modern day 007 Daniel Craig (shaken not stirred) were always my style inspirations. To me, they are the epitome of refinement and sophistication, true gentlemen in style.
My passion for fashion and tailoring led me through the Fashion Design program at Parsons followed by stints in custom tailoring, fashion design, fashion styling and brand development. But the more I integrated myself in the industry, the more I realized that impeccable fit, for men and women, was almost impossible to find in ready to wear clothing. So, I launched The Tailory New York, a way for me to combine my two passions, Fashion Design and Custom Tailoring. Everyone wants to look their best and having a wardrobe curated to your body and lifestyle not only enables you to look your best but makes you feel your best.
At The Tailory New York, “we believe that your wardrobe should not only fit perfectly, but should be designed with only YOU in mind.” Providing personally designed, fitted and curated collections for each individual client is the essence of who we are. Let us curate and design the wardrobe fit for YOU! </br>
<br> </br>
Sincerely,</br>
Shao Yang, Founder
<br> </br>
</p>
</div>
Hi all I'm trying to style the large bit of <p> code in this html
<section id="about">
<div class="container-fluid post-1">
<div class="row">
<h1 class="text-center">Welcome to our Dance-O-Thon for 2016!</h1>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p>Carolyn Glover</p>
<p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o Come to raise more funds for ovarian cancer research
o Come if you have ovarian cancer, or wish to support someone who does
o Come if you wish to know more about the disease
o Come to celebrate life!
</p>
But I can't seem to target just the one with the id="1". I've tried
#about p #1 {
font-size: 1.3rem;
}
#about p {
font-size: 1.3rem;
}
#about #1 p {
font-size: 1.3rem;
}
Remove the spacing between p tag and your id name like this. There can not be any space between the tag name and id/class name if the id/class is defined in the specific tag.
#about p#1 {
font-size: 1.3rem;
}
Two suggestions from my side -
Using integer as id is not convenient. Try at least appending a string with it. Like p1 or para1.
As it is an id, it is unique in the whole html document already. You don't need #about p#1, only #1 would have been enough
Just
#1 {
font-size: 1.3rem;
}
Is enough, since if you're doing it correctly there should be only 1 element with the id 1. Or if you need to increase the strength of your style (usually not needed) use
p#1 {
font-size: 1.3rem;
}
This is enough:
#1 {
font-size: 1.3rem;
}
you can try this one:
#about p#1 {
font-size: 1.3rem;
}
#about p {
font-size: 1.3rem;
}
#about #1 p {
font-size: 1.3rem;
}
DEMO HERE
You may just use this:
#1 {
font-size: 1.3rem;
}
As mentioned in my comment, CSS identifiers cannot start with a digit.
According to the W3 CSS specification:
In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-zA-Z0-9] and ISO 10646 characters U+00A0 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, two hyphens, or a hyphen followed by a digit...
Even the syntax is correct but because it is a digit identifier, it doesn't apply.
See code snippet:
p#1 {
font-size: 1.3rem;
}
p#one {
font-size: 1.3rem;
}
<div class="container-fluid post-1">
<div class="row">
<h1 class="text-center">Welcome to our Dance-O-Thon for 2016</h1>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<p id="1">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o Come to raise more funds for ovarian cancer research
o Come if you have ovarian cancer, or wish to support someone who does
o Come if you wish to know more about the disease
o Come to celebrate life!
</p>
<p id="one">My name is Carolyn Glover and it is so exciting to be working on our second event to raise much needed funds for ovarian cancer research. It was in early 2014 that my friend Millicent came up with the idea of a dance-related event to support me, and women like me, who are having to deal with the challenge of ovarian cancer. The idea of the Dance-‘O’-Thon was born because I love to dance – though poorly I might add!
I was diagnosed with ovarian cancer over four years ago and, once you have it, it is very difficult to get rid of. Though I am currently under treatment, I am happy to say I am well and active thanks to the excellent oncologists and medical infrastructure we have here in Melbourne.
Our last Dance-O-Thon raised $32,000+ towards the Australian Ovarian Cancer Study (AOCS) , the program which Ovarian Cancer Australia is supporting as the key focus of its research fundraising efforts. So join us in May 2016 to make the event even bigger and better than last time……
o Come to raise more funds for ovarian cancer research
o Come if you have ovarian cancer, or wish to support someone who does
o Come if you wish to know more about the disease
o Come to celebrate life!
</p>
</div>
</div>
</div>
I am trying to accomplish something like this:
The can't seem to emulate the one above where the centered image is being surrounded by texts. I've tried using floats but something is just lacking and I have no idea what.
And this is what I currently have:
here is my code:
https://jsfiddle.net/eqs6e1db/
section{
text-align: center;
}
section p{
-webkit-column-count: 3;
-moz-column-count: 3;
-ms-column-count: 3;
-o-column-count: 3;
column-count: 3;
text-align: justify;
}
section article:first-child{
float: left;
}
section article:last-child{
float: right;
}
Well, you can not achieve really your layout. But you can hack it a little bit.
For each column, you can set a spacer, a filler, and another spacer.
The first spacer reserves space from the top, just to push the filler to the required position. The filler really reserves the space. And the reamining spacer consumes the remaining space so that we go the other column.
You need to have a height set on the container
.base {
width: 100%;
height: 1000px;
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
}
.pushtop {
background-color: rgba(200,0,0,0.2);
width: 10px;
height: 17%;
float: right;
clear: both;
}
.pushbottom {
background-color: rgba(200,0,0,0.2);
width: 10px;
height: calc(83% - 200px);
float: right;
clear: both;
}
.insert {
background-color: lightblue;
height: 200px;
clear: both;
margin: 0px 10px;
}
.insertleft {
width: 100px;
float: right;
}
.insertcenter {
width: 100%;
float: right;
}
.insertright {
width: 100px;
float: left;
}
.container {
width: 735px;
position: relative;
}
.image {
position: absolute;
border: solid blue 1px;
width: 485px;
height: 200px;
left: 123px;
top: 170px;
}
<div class="container">
<div class="image"></div>
<div class="base">
<div class="pushtop"></div>
<div class="insert insertleft"></div>
<div class="pushbottom"></div>
<div class="pushtop"></div>
<div class="insert insertcenter"></div>
<div class="pushbottom"></div>
<div class="pushtop"></div>
<div class="insert insertright"></div>
<div class="pushbottom"></div>
<p>Another 4-storey structure will soon be under construction to add new classrooms and laboratories for the High School and Grade School.</p>
<p> Part of the reason for this attention to the North Campus is to help FU’s marketing strategy for the high school in response to the implementation of the K to 12 Program. First, we want to attract more enrollees. Second, we invest in the facilities in our aim to increase not just the quality of our education but to boost our enrollment capacity from 700 students to 1500 students. And of Course, thanks to our new solar panel installation, we will also be providing all the new classrooms with air conditioning for those sweltering months.</p>
<p>Corporate Social Responsibility or CSR, as viewed by the University, should also have a significant space in the academe's achievements and obligations.</p>
<p>Estudio Damgo, for instance, is now on its third iteration of touching people's lives through sustainable and life-changing architecture. Its buildings and designs, since its first project in 2013, serve as prototype structures that cater to the various needs of society. The University sees Estudio Damgo as a catalyst for creating a transformed, more developed, and more meaningful way of living not just in Dumaguete but through out the Philippines. Read more about the current project here. (note to Entheos; link the word “here” to full Estudio Damgo article)</p>
<p>In terms of agriculture, FU's Aquaponics sets the example in the use of completely natural and organic farming techniques, which enhance not only the environment's safety but boost farmers' production capabilities and livelihood as well. Aquaponics provides agriculturists the answer to sustainable food production and a sustainable ecosystem for both fish and plants. For more specifics on our organic farm click here. (Note to Entheos: Link the word “here” to full organic farming article)</p>
<p>A forest and wildlife protection program called “Ayungon Forest Reserve” has also been pushed by the College of Arts and Sciences in partnership with local government units and the Department of the Environment and Natural Resources (DENR). The program calls for protecting the natural resources of the Reserve from causes of declining population, degradation of wildlife habitat, deterioration of soil and river quality, and the cave’s carrying capacity.</p>
<p>The College of Business Administration (CBA), on the other hand, is seriously pursuing a strong “Entrepreneurship Program” that caters to all levels of participants from students to MSMEs (Micro, Small, Medium Enterprises). In fact, the CBA in partnership with DTI will soon launch an “Entrep Hub”—a one-stop business center for start-up entrepreneurs—during the University Expo in which high school students will compete for the best business plan. The prize will be an Incubation Program for the winning plan to become a real business.</p>
<p>The University Expo, formerly the Digital Expo, of the College of Computer studies is a major University event that showcases innovative technology. The annual event, which includes robotic challenges, quiz bowls, film festivals, etc., is an avenue for students from different academic institutions to participate in and learn from the latest IT breakthroughs.</p>
<p>Barangay constituents also have the opportunity to learn computer skills such as basic PC operations, Internet use, word processing, spreadsheet and presentation through the university's Computer Literacy Program for adopted barangays.</p>
<p>Moreover, “The Queue” coffee shop, run by the College of Hospitality Management ‘s Culinary Arts students, draws customers from in and outside the campus because of its delicious food and beverages.</p>
</div>
</div>
Note that the filler and spacer elements should not be visible. I have given the a background and a width (in the case of the push elements) so that you can see how it works
CSS as it stands, cannot do this yet (reliably). However, there is in working, a CSS Shapes Module that can do this.
http://demosthenes.info/blog/898/Wrapping-Text-Around-A-Curved-Image-With-CSS-Shapes
Only supported in Chrome and Safari it seems:
http://caniuse.com/#feat=css-shapes
I have created my own method to make your style image in centre of page so i made this following method
note: check this in you page here in demo it doesn't works
div{
margin: 15px
}
p{
float:left;
margin: 10px;
}
.left{
float:left;
width:30%;
}
.centre{
display: inline-block;
width:30%;
}
.right{
float:right;
width:30%;
}
.right, .centre, .left p{
text-align:justify
}
<div class="left">
<p>Another 4-storey structure will soon be under construction to add new classrooms and laboratories for the High School and Grade School.</p>
<p>In terms of agriculture, FU's Aquaponics sets the example in the use of completely natural and organic farming techniques, which enhance not only the environment's safety but boost farmers' production capabilities and livelihood as well. Aquaponics provides agriculturists the answer to sustainable food production and a sustainable ecosystem for both fish and plants. For more specifics on our organic farm click here. (Note to Entheos: Link the word “here” to full organic farming article)</p>
<p>Have you also heard of Greyhound Events and Tours? Well, it is Foundation University’s student-run functional travel agency that caters to the travel needs of both the FU community and outside clients.</p>
<p>Integrating CSRs in the various programs is our chance to give back to the community as well as gain the respect of the members of the society, young and old. It also helps garner the public's appreciation for the importance of community involvement by producing tangible projects everybody can benefit from.</p>
<p>Expanding the University’s Information Technology (IT) to meet the demands of a digital age is another factor in FU’s “micro” to “macro” plan. Aside from the existing iPad program, the University is determined to create digital classrooms that can be accessed by local towns like Bacong, Dauin and Zamboangita. There is also a movement to encourage students, even at the high school level, to learn useful skills such as computer programming so they can be competitive in an IT driven world.</p>
<p>On the infrastructure side, FU is also updating the “bare bones” of FUs communication network to fiber optic cables and high-end routers and equipment. You can read a comprehensive explanation of these updates in a separate article in this issue of CQ here.
(Note to Entios: link the word “here” to full IT article)</p></div>
<div class="centre">
<p> Part of the reason for this attention to the North Campus is to help FU’s marketing strategy for the high school in response to the implementation of the K to 12 Program. First, we want to attract more enrollees. Second, we invest in the facilities in our aim to increase not just the quality of our education but to boost our enrollment capacity from 700 students to 1500 students. And of Course, thanks to our new solar panel installation, we will also be providing all the new classrooms with air conditioning for those sweltering months.</p>
<p>Estudio Damgo, for instance, is now on its third iteration of touching people's lives through sustainable and life-changing architecture. Its buildings and designs, since its first project in 2013, serve as prototype structures that cater to the various needs of society. The University sees Estudio Damgo as a catalyst for creating a transformed, more developed, and more meaningful way of living not just in Dumaguete but through out the Philippines. Read more about the current project here. (note to Entheos; link the word “here” to full Estudio Damgo article)</p>
<img src="http://animalia-life.com/data_images/cat/cat4.jpg" style="height:300px;width:100%;" alt="">
<p>The College of Business Administration (CBA), on the other hand, is seriously pursuing a strong “Entrepreneurship Program” that caters to all levels of participants from students to MSMEs (Micro, Small, Medium Enterprises). In fact, the CBA in partnership with DTI will soon launch an “Entrep Hub”—a one-stop business center for start-up entrepreneurs—during the University Expo in which high school students will compete for the best business plan. The prize will be an Incubation Program for the winning plan to become a real business.</p>
<p>The University Expo, formerly the Digital Expo, of the College of Computer studies is a major University event that showcases innovative technology. The annual event, which includes robotic challenges, quiz bowls, film festivals, etc., is an avenue for students from different academic institutions to participate in and learn from the latest IT breakthroughs.</p>
<p>Aside from all the projects mentioned above, our overview of the 2015 Master Plan wouldn’t be complete if we didn’t tell you about one more core component.</p>
</div>
<div class="right">
<p>Corporate Social Responsibility or CSR, as viewed by the University, should also have a significant space in the academe's achievements and obligations.</p>
<p>A forest and wildlife protection program called “Ayungon Forest Reserve” has also been pushed by the College of Arts and Sciences in partnership with local government units and the Department of the Environment and Natural Resources (DENR). The program calls for protecting the natural resources of the Reserve from causes of declining population, degradation of wildlife habitat, deterioration of soil and river quality, and the cave’s carrying capacity.</p>
<p>Barangay constituents also have the opportunity to learn computer skills such as basic PC operations, Internet use, word processing, spreadsheet and presentation through the university's Computer Literacy Program for adopted barangays.</p>
<p>Moreover, “The Queue” coffee shop, run by the College of Hospitality Management ‘s Culinary Arts students, draws customers from in and outside the campus because of its delicious food and beverages.</p>
<p>It needs to be emphasized that at the core of the FU Master Plan is the campaign for everyone’s right to quality education. This advocacy, started by Foundation University’s founder Dr. Vicente G. Sinco, has been passed down to each new FU president. It is why FU is proud to be known as a school that caters to students with financial challenges to hurdle as they work towards their educational goals.</p>
</div>
if this work happy
https://jsfiddle.net/x0ugLbo4/
I'm using CSS columns, but seem to have an issue where the beginning of the text has an extra space at the top, making the subsequent second and third columns appear higher than the first column.
I thought I had it all pretty basic. I did already try removing the margin-bottom for the h2, but that didn't seem to affect the columns. So I put the h2 into its own div, but that also didn't affect them. Oddly, it looks fine in DreamWeaver, just not when live on the server.
It seems to do this in Safari, FireFox, and Opera. I do not have Chrome or IE.
Here is the link to the site so you can see it: www.jordanmiller.newbedesign.com/coast/academics.html
Below is the CSS that is used with the columns:
h2 {
font-weight: 300;
margin-bottom: -.5%;
font-color: #003;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
div.text {
margin: 2% auto;
max-width: 900px;
}
div.texthead {
margin: 0 auto;
}
div.col {
-webkit-column-count: 3;
-webkit-column-gap: 1%; /* Saf3, Chrome*/
-moz-column-count: 3;
-moz-column-gap: 1%; /* FF3.5+ */
column-count: 3;
column-gap: 1%; /* Opera 11+*/
text-align: left;
}
And below here is the HTML for the content:
<div class="texthead">
<h2>Academics: Not Just Books</h2>
</div>
<div class="text">
<div class="col"><p>Coast Middle School is a community of active learners working in concert for the development of individual success and self-esteem. It employs a comprehensive curriculum that seeks to develop the whole child--intellectually, physically, spiritually, socially, aesthetically, and emotionally. Teachers and students in Coast Middle School hold themselves and each other to the highest expectations. The Middle School academically challenges its students in foreign language, math, social studies, language arts, and science, while at the same nurturing emotional and creative development through our acclaimed fine arts and athletic programs.</p>
<p>Coast Middle School is developmentally responsive to the needs of its students. The Middle School provides the students with teachers and specialized professionals who are readily available to offer the assistance students need in negotiating their lives, both in and out of school. As a complement to their academic classes, students discuss issues relevant to their lives through our comprehensive character education and guidance curriculum. The student-led vestry program allows the students to develop a sense of leadership and responsibility as they aid the chaplain in the development of chapel messages.</p>
<p>Coast Middle School seeks to conceptualize and promote the healthy growth of young adolescents as ethical citizens and increasingly competent, self-sufficient young people who are optimistic about the future. To achieve these goals the Middle School is structured on a team concept. Each grade level is split into two teams--blue and white, representing our school colors--consisting of four academic core classes. Coast Middle School believes academic success and personal growth increase markedly when young adolescents' affective needs are met. Therefore, all adults in the Middle School are advocates, advisors, and mentors for each student. Each team works together on service-learning activities and experiential learning opportunities.</p>
<p>Coast Middle School feels strongly that the most successful learning strategies are ones that involve each student personally. Therefore, we offer after-school tutorials so students can get personalized help with homework or as preparation for a test or quiz. Other after-school possibilities include intramurals, clubs, and an Extended Day Program, which runs until 6:00 p.m. Students are also encouraged to participate on school athletic teams. Students in both grades can participate in drama performances.</p>
<p>Coast Middle School is also actively invested in the impact media and digital activities have on our students’ lives. Students in both grades participate in a Digital Citizenship curriculum provided by Common Sense Media, which encourages them to be safe, responsible, and savvy citizens of the digital world.</p>
<p><strong>Seventh Grade:</strong> While enjoying a similar daily schedule in seventh grade, the students make a choice from four languages (Chinese, French, Latin, or Spanish) for daily study. Additionally they choose one elective (see course descriptions). The seventh grade takes a class trip to Washington, D.C. Each of the three sports seasons includes at least one no-cut sport.</p>
<p><strong>Eighth Grade:</strong> The daily class schedule includes civics, physical science, algebra or geometry, and English. Interdisciplinary activities include Mock Congress and a social issues research project. All classes emphasize critical and creative thinking. The focus of this grade is leadership training and service learning, as well as preparation to move successfully into the Upper School. The eighth grade travels to New York City in the spring.</p>
<p>Students in both grades have a morning fruit break and break for a brief recess to socialize and develop friendships that are vital in the development of a young adolescent. Band, chorus, and orchestra are offered in bith grades, along with visual and theater arts opportunities.</p>
</div>
I think adding this to your css solves the problem:
div.col p{
margin-top:0px;
}