Solved

Text in block not displaying properly

Posted on 2016-11-29
2
10 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
Comment Utility
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
Comment Utility
Your solution worked great!

Thank you!
0

Featured Post

Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

763 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

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now