Related
anchor does not work, but if a move the anchor to the top it works. I don't understand whats going on. this is my first time asking a question in StackOverflow. thanks in advanced.here is the full html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet" >
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
Send me an email
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content
for the book, which includes a complete subset of usable skills. After the core
content, each section of the book is designed as an independent module. This
means that these sections don't have to be taught in sequence. As a result, you
can customize your courses by assigning just those sections that you want to
teach.</p>
<p>Whenever possible, each of the chapters is also designed as an independent
module. When this is true, you can assign just those chapters that are right
for your courses. This approach also makes the chapters better for on-the-job
reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a
unique top-down design that moves from the simple to complex. This makes it
easier for trainees to learn. It also means that you can present the topics at
the start of a chapter to make sure everyone understands the essential details,
without presenting all of the topics in a chapter. Then, your trainees can
learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information
is presented in "paired pages." In each pair, the right page is a
figure that contains the syntax, guidelines, and examples, and the left page is
text that contains the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace.
If, for example, you're a novice, you'll probably want to read the text on the
left as you refer to the figure on the right. But if you have experience, you
may be able to get all the information you need from the figure. Either way,
our customers tell us that they love this presentation method because it helps
them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our
paired-pages format makes it easy for your trainees to access all the
information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the
expanded table of contents or the index to find the topic they're looking for.
Then, the figure on the righthand page will give them the details they need to
apply what they learned in your course.</p>
<p>This type of quick reference is absolutely essential when you're working
with the hundreds of classes, methods, and properties of an OO language like
Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on
experience without wasting any time. That's because we provide the starting
code, either from our web site or the Instructor's CD, so that trainees don't
have to enter routine code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of
what they've just learned. Sometimes, they challenge the trainees to apply what
they've learned in new ways. And you can assign the exercises so your trainees
do them in class or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text
and exercise design. Curiously, though, the exercises in some books do present
new skills. Unfortunately, this means that (1) trainees who don't do the
exercises don't learn the new skills, and (2) there's no easy way for trainees
to find the information they need if they're having trouble since the skills
haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books
teach by presenting complete, real-world applications that include design,
code, and all related components. These applications help your trainees get
started quickly and also help them reach new skill levels. As we see it,
studying applications like these is the best way to learn how all of the parts
of an application work together, so this is an essential part of the learning
process.</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD
for one of our books, you'll see that our CDs provide everything else you need
for an effective course...except the busywork. That's why you should be able to
plan and implement a course that's based on one of our books in record time.
Once that's done, our books and instructional materials will help ensure the
success of your course.</p>
</div>
</body>
</html>
here is the full css
section{
height: 100vh;
vertical-align: middle;
background-color:#f794f2;
}
.section_text {
color:#f7eb94;
font-size:15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
.content{
display:inline;
/*relative so it would move to the left*/
position:relative;
}
--------here is where I have the trouble
<div class="aside">
<!--if a move anchor here it works-->
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
<!--here it does not work-->
Send me an email
<form></form>
<h3>Hello! My name is Salvador
Sandoval, I'm a programmer on this website I will show you projects a did
in college, also some of my personal projects and programming concepts I
learn in college. visiting.</h3>
</div>
This is the css the use this part of html
.aside {
width: 240px;
float: left;
/*relative to it would move to the side*/
position:relative;
/* background-color:#5bde47; */
}
.image_myself{
margin-left: 25%;
}
.anchor_Send_Email{
margin-left: 25%;
}
By using position relative on the content and sidebar you were overriding some of the features of float, so the content div was actually over the sidebar even though the contents looked to be positioned correctly. I just removed the position: relative; rules and it seems fine now. To see what was happening, right click and inspect the link in your code and you'll see .content is actually being selected.
section {
height: 100vh;
vertical-align: middle;
background-color: #f794f2;
}
.section_text {
color: #f7eb94;
font-size: 15vh;
display: table-cell;
vertical-align: middle;
font-weight: 700;
text-align: center;
}
.aside {
width: 240px;
float: left;
/* background-color:#5bde47; */
}
.image_myself {
margin-left: 25%;
display: block;
}
.anchor_Send_Email {
margin-left: 25%;
}
.content {
display: inline;
}
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Salvador Portfolio</title>
<link href="index.css" rel="stylesheet">
</head>
<body>
<!--this is for the introduction in portfolio-->
<section>
<div class="section_text">
<h1>Welcome to my portfolio</h1>
</div>
</section>
<!--aside where my info and some nav links-->
<div class="aside">
<img src="my_self.jpg" class="image_myself" alt="my self" width="100" height="100">
Send me an email
<form></form>
<h3>Hello! My name is Salvador Sandoval, I'm a programmer on this website I will show you projects a did in college, also some of my personal projects and programming concepts I learn in college. visiting.</h3>
</div>
<!--this is where all show explanation & code -->
<div class="content">
<h3>7 reasons why trainers like our books</h3>
<h2>Modular book organization</h2>
<p>In the first section or two of all our books, we present the core content for the book, which includes a complete subset of usable skills. After the core content, each section of the book is designed as an independent module. This means that these
sections don't have to be taught in sequence. As a result, you can customize your courses by assigning just those sections that you want to teach.
</p>
<p>Whenever possible, each of the chapters is also designed as an independent module. When this is true, you can assign just those chapters that are right for your courses. This approach also makes the chapters better for on-the-job reference later on.</p>
<h2>Top-down chapter design</h2>
<p>Unlike many competing books and products, most chapters in our books have a unique top-down design that moves from the simple to complex. This makes it easier for trainees to learn. It also means that you can present the topics at the start of a chapter
to make sure everyone understands the essential details, without presenting all of the topics in a chapter. Then, your trainees can learn the other topics on their own or as they're needed on the job.</p>
<h2>Paired-pages format</h2>
<p>If you page through one of our books, you'll see that all of the information is presented in "paired pages." In each pair, the right page is a figure that contains the syntax, guidelines, and examples, and the left page is text that contains
the perspective and extra explanation.</p>
<p>One benefit of this format is that it lets trainees learn at their own pace. If, for example, you're a novice, you'll probably want to read the text on the left as you refer to the figure on the right. But if you have experience, you may be able to
get all the information you need from the figure. Either way, our customers tell us that they love this presentation method because it helps them learn faster and better.</p>
<h2>Performance on the job</h2>
<p>On-the-job performance is the measure of a successful course. And our paired-pages format makes it easy for your trainees to access all the information you've covered long after the course is over. </p>
<p>Instead of having to dig through the text or handouts, they can use the expanded table of contents or the index to find the topic they're looking for. Then, the figure on the righthand page will give them the details they need to apply what they learned
in your course.</p>
<p>This type of quick reference is absolutely essential when you're working with the hundreds of classes, methods, and properties of an OO language like Java, Visual Basic, or C#...and yet no other books offer this unique format.</p>
<h2>More practice in less time</h2>
<p>The exercises for our books give trainees a chance to get valuable, hands-on experience without wasting any time. That's because we provide the starting code, either from our web site or the Instructor's CD, so that trainees don't have to enter routine
code that they already know.</p>
<p>Sometimes, these exercises guide the trainees through the application of what they've just learned. Sometimes, they challenge the trainees to apply what they've learned in new ways. And you can assign the exercises so your trainees do them in class
or on their own.</p>
<p>Incidentally, unlike other books, <i>our exercises never present new skills
or information</i>. As we see it, this is the only sensible approach to text and exercise design. Curiously, though, the exercises in some books do present new skills. Unfortunately, this means that (1) trainees who don't do the exercises
don't learn the new skills, and (2) there's no easy way for trainees to find the information they need if they're having trouble since the skills haven't been covered yet.</p>
<h2>Complete, real-world applications</h2>
<p>From the first book we published in 1974 to the present, all of our books teach by presenting complete, real-world applications that include design, code, and all related components. These applications help your trainees get started quickly and also
help them reach new skill levels. As we see it, studying applications like these is the best way to learn how all of the parts of an application work together, so this is an essential part of the learning process.
</p>
<h2>Complete instructor's materials</h2>
<p>If you review the instructor's materials that come with the Instructor's CD for one of our books, you'll see that our CDs provide everything else you need for an effective course...except the busywork. That's why you should be able to plan and implement
a course that's based on one of our books in record time. Once that's done, our books and instructional materials will help ensure the success of your course.</p>
</div>
</body>
</html>
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>
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;
}
There is white space below my div in Firefox but not in Chrome. I think it has something to do with my #body-content-container having the properties position: relative; and bottom: 300px; this gets the right positioning effect I'm looking for in Chrome, but in Firefox it creates a white space. When I get rid of these lines the div isn't positioned in the right place in either FF or Chrome.
Here's the code:
HTML:
<div id="body-content-container">
<div id="body-content"class="row">
<div class="small-12 small-centered columns">
<br/>
<div align="center" id="page-title">COMPANY</div>
<h1 align="center">About Us</h1>
<p>ADU Consulting has been developing quality e-learning programs since 2004. It is a training and education company that collaborates with partner organizations in developing, hosting and managing online educational programs based on the individual curriculum and client needs.</p>
<p>It operates from two regional offices one in New York and another in Northern Virginia, close to the capital city of Washington D.C. The ADU datacenter is also located near the corporate office in Virginia.</p>
<p>We:</p>
<ul>
<li>Develop e-Learning courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<p>ADU business is divided into two areas: <span style="font-family:FuturaStd-Heavy;">e-Learning Consultancy</span> for client organizations and running its <span style="font-family:FuturaStd-Heavy;">International Maritime College</span> where it offers a number of Certificates, College Primers and Vocational Skill Development programs, aimed primarily at the maritime industry. These courses focus on training the seafarers and the shore based employees within the shipping business.</p>
<p>ADU fills the gap between traditional education and the needs of people today. Interactive courses taught by experienced professionals help students keep pace with changing industry demands in addition to providing a holistic and need-based education. Our Instructors are picked from around the world with the majority from the United States; they have the highest professional and academic backgrounds that befit the purpose of industry ready education and training.</p>
<h1 align="center">Our Purpose</h1>
<p>We believe that online education's role is to compliment the "best" practices in education. It must support instructors to teach a larger student body and make learning possible based on individual learning needs. With this in mind, our integrated learning platform is equipped with necessary tools in helping the Instructors create a self-paced learning environment.</p>
<h1 align="center">Technology</h1>
<p>The LMS software and courses system is housed in a tier 1 datacenter that has a redundant firewall, switches and servers for complete data security. This hosted delivery model provides scalability, reliability and eliminates technological burden on client resources.</p>
<h1 align="center">Course Development</h1>
<p>ADU Consulting's content creation and delivery platforms are tied together such that it allows faculty to modify, or enhance contents to fit their unique teaching style. Thus a course developed for an organization can be further customized by the Instructor. In addition, since the world of online resources is expanding every minute, Instructors are able to link external content or add other resources through this platform. The student assessment is an integral part of the learning and evaluation process: the platform is configured with a question bank and a multi-faceted assessment system.</p>
<h1 align="center">Support</h1>
<p>In order to keep pace with the changing landscape of online learning ADU Consulting's platform is constantly updated in keeping with such advances. We are committed to support our partners both from technical management and pedagogical viewpoint.</p>
<h1 align="center">Course Delivery</h1>
<p>Courses are delivered to students in an asynchronous mode that allows students to learn at their own pace and allows flexibility when they want to study; Collaboration and communication with faculty is done in a synchronous mode through online video conferencing. The teacher-centric approach helps to consolidate and maximize the learning outcome.</p>
<h1 align="center">Course Creation & Quality Control</h1>
<p>ADU Consulting has an e-learning Quality Management Process that looks at various quality attributes in a course that must be meet to meet the ADU performance criteria. This is an internal quality audit system that must be satisfied before a course can be put on line for client review. The QA task is done from Virginia.</p>
<p>ADU Consulting’s courses are built at Chennai, India with an affiliated organization that maintains a large content development team including subject matter experts, instructional designers, graphic designers, Flash and other programmers, voice-over specialists etc.</p>
<p>The development is an iterative process and is only signed off once the user client is fully satisfied with the intended and agreed quality standard.</p>
<h1 align="center">Collaberation Projects</h1>
<p>ADU Consulting collaborates with partner organizations in developing, hosting and managing online educational programs based on individual curriculum and client needs and this may take any of the following project types:</p>
<ul>
<li>Develop e-Learning Courses</li>
<li>Build in-campus and online blended programs</li>
<li>Create Integrated Assessment and Evaluation</li>
<li>Provide white-labeled hosting for e-learning services</li>
</ul>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<div align="center">
<h1>Contact Us</h1>
<span style="font-family:FuturaStd-Heavy;font-size:20px;">ADU Consulting Services</span>
<br/>
<p>6 Pigeon Hill Drive Suite 230<br/>
Sterling, VA 20165<br/>
United States of America</p>
<p>Email: info#adu.us.com</p>
<p>Telephone: (804) 205-1210<br/>
Fax: (703) 738-7723</p>
</div>
</div>
</div>
<div align="center" id="footer">
<br/>
Copyright © <script type="text/javascript">
document.write(new Date().getFullYear());
</script> ADU Consulting, All Rights Reserved. Site designed & developed by <a target="_blank" style="text-decoration: underline;" href="http://zrrdigitalmedia.com">zrrdigitalmedia</a>
<br/>
<br/>
</div>
CSS:
#body-content-container{
background-color: #d5b93f;
position: relative;
bottom: 300px;
}
Also here's a link to the site: http://zrrdigitalmedia.com/_ADU/company.html
I'm super lost here, any suggestions are much appreciated! Thank you!
Try changing the bottom value for the #body-content-container.
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: -15px; /* change 300px to -15px */
}
Tested on both, Firefox and Chrome.
Alternatively you can target Mozilla Firefox and add a negative margin-bottom
to the #body-content-container:
#-moz-document url-prefix() {
#body-content-container {
background-color: #d5b93f;
position: relative;
bottom: 300px;
margin-bottom:-320px; }
}
Some digging in FireBug lead me to this:
#body-content-container {
background-color: #d5b93f;
bottom: 300px; /* <-- this is the issue, remove it */
position: relative;
}