Solved

Text in block not displaying properly

Posted on 2016-11-29
2
43 Views
Last Modified: 2016-11-29
I added an extra row in the menu in the top left quadrant of this page: http://www.sonoma.edu/exed/

This resulted in the text in the space below the menu to bump up against the line below it. I would just like create more space for the text so that it displays fully and the line in that quadrant and the one next to it, on the right-hand-side, remained lined up together (like they do now).

I am assuming some changes also need to be made to the CSS in addition to the HTML on the page.

Would appreciate any help.
main-page.jpg
0
Comment
Question by:geeta_m9
2 Comments
 
LVL 52

Accepted Solution

by:
Scott Fell,  EE MVE earned 500 total points
ID: 41906571
The html is a bit munged to be honest.

.audience-category set to height 370px;

audience-homepage.css
.audience-category {
    width: 360px;
    float: left;
    height: 370px;
}

Open in new window



Delete blank p tags where you have <p style="height: 240px"></p>
<div id="audience-content">
         
<div class="audience-category">

<div class="audience-block-left">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/degree-programs.jpg" height="150" width="135">
<h2><a href="https://www.sonoma.edu/exed/degrees">Academic Credit &amp; <br>Degree Programs,</a><br><a href="http://www.sonoma.edu/exed/intersession/">Summer/Intersession</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<ul>
<li><a href="https://www.sonoma.edu/exed/libs/">Saturday B.A. Libs (at SSU)</a></li>
<li><a href="https://www.sonoma.edu/exed/napa-solano/">B.A. Libs Napa Valley/Solano</a></li>
<li><a href="https://www.sonoma.edu/exed/orgdev/">M.A. Organization Development</a></li>
<li><a href="https://www.sonoma.edu/depth/">M.A. Psychology (Depth)</a></li>
<li><a href="https://www.sonoma.edu/exed/spanish/">M.A. Spanish</a></li>
<li><a href="http://sonoma.edu/mba/programs/sonoma-executive-mba.html">Executive M.B.A.</a></li>
<li><a href="https://www.sonoma.edu/engineering/msces/">M.S. Computer &amp; Engineering</a></li>
<li><a href="https://www.sonoma.edu/exed/film">M.A. in Film Studies</a><span style="color:green">- <b>New!</b></span></li>
<li><a href="https://www.sonoma.edu/exed/ece-certificate">Early Childhood Education Certificate</a><span style="color:green">- <b>New!</b></span></li>
</ul>
</div><!-- end audience-block-right -->

<p style=" height:=" "="" 218px"=""></p><p></p>
<p>The School of Extended &amp; International Education offers a multitude of academic credit and degree programs to meet the needs of our growing university. Whether you are interested in graduating sooner through our Summer Session or Winter Intersession courses or getting your Master's in Spanish, we have a lot to offer!</p>

</div><!-- end audience-category --><a href="https://www.sonoma.edu/exed/ece-certificate">


</a><div class="audience-category"><a href="https://www.sonoma.edu/exed/ece-certificate">

</a><div class="audience-block-left"><a href="https://www.sonoma.edu/exed/ece-certificate">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/certificate-programs.jpg" height="150" width="135">
</a><h2><a href="https://www.sonoma.edu/exed/ece-certificate"></a><a href="https://www.sonoma.edu/exed/certificates/">Professional Development Certificate Programs</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<ul>
<li><a href="https://www.sonoma.edu/exed/pmcp/agile-project-management-certificate-course.html">Agile Project Management</a><span style="color:green">- <b>New!</b></span></li>
<li><a href="https://www.sonoma.edu/exed/pmcp/project-management-certificate-course.html">Project Management</a></li>
<li><a href="https://www.sonoma.edu/exed/beer/">Craft Beer Appreciation<br></a></li>
<li><a href="https://www.sonoma.edu/exed/construction/">Construction Management</a></li>
<li><a href="https://www.sonoma.edu/exed/carp/">Audio &amp; Recording Production</a></li>
<li><a href="https://www.sonoma.edu/exed/maker-certificate/">Maker Certificate</a></li>
<li><a href="https://www.sonoma.edu/exed/human-resource/">Human Resource Management</a></li>
<li><a href="https://www.sonoma.edu/exed/certificates">and more...</a></li>

</ul>
</div><!-- end audience-block-right -->


<p style="height: 218px"></p>
<p>Throughout the year, the School of Extended &amp; International Education offers a wide variety of innovative, high quality professional development courses and certificates. We take pride in creating learning opportunities for career advancement, career change, and personal growth. Many courses are scheduled on weekends and evenings, and online for the busy adult.</p>

</div><!-- end audience-category -->


<!--LINE BREAK SPACING-->
<p style="height: 350px"></p>


<div class="audience-category">

<div class="audience-block-left">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/olli-icon-home.jpg" width="135">
<h2><a href="https://www.sonoma.edu/exed/lifelong-learning/">Lifelong Learning Programs</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<ul>
<li><a href="https://www.sonoma.edu/exed/olli/">Osher Lifelong Learning Institute</a></li>
<li><a href="https://www.sonoma.edu/exed/excel/">EXCEL for Youth</a></li>
</ul>

</div><!-- end audience-block-right -->

<p style="margin-left: 155px; margin-top: 5px">Our Life-long Learning Programs offer learning opportunities for a wide variety of students from all age groups. OLLI is a unique learning community for adults aged 50 or better and the EXCEL for Youth Program offers students entering grades 4-9 a unique opportunity for academic enrichment.</p>

</div><!-- end audience-category -->



<div class="audience-category">

<div class="audience-block-left">
<img alt="" src="https://www.sonoma.edu/exed/exed-home/images/international-programs.jpg" height="150" width="135">
<h2><a href="https://www.sonoma.edu/exed/international/">International Education</a></h2>
</div><!-- end audience-block-left -->

<div class="audience-block-right">
<ul>
<li><a href="http://www.sonoma.edu/exed/ssali/">Sonoma State American Language Institute (SSALI)</a></li>
<li><a href="https://www.sonoma.edu/cie/">Center for International Education</a></li>
</ul>
</div><!-- end audience-block-right -->

<p style="margin-left: 155px; margin-top: 5px">Whether you are an international student considering studying abroad at Sonoma State or are already enrolled and want to take your studies abroad, our International Programs have great opportunities for you to explore and enjoy a rich international experience!</p>


</div><!-- end audience-category -->


<!--LINE BREAK SPACING-->
<p style="height: 240px"></p>
         
      </div>

Open in new window


That code should really be something like
<div class="box">
     <div class="box-left">
               <img src="somthing.jpg">
               <div class="image_tag">Tag Line</div> 
     </div>
   <div class="box-right"><ul><li>list</li></ul></div>
  <div class="box-full">
      <p>Your paragraphs</p>
     <p>Your paragraphs</p>
  </div>
</div>

Open in new window


Or use a grid system like bootstrap may be easier.
1
 

Author Closing Comment

by:geeta_m9
ID: 41906581
Your solution worked great!

Thank you!
0

Featured Post

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This is a PowerShell web interface I use to manage some task as a network administrator. Clicking an action button on the left frame will display a form in the middle frame to input some data in textboxes, process this data in PowerShell and display…
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

830 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question