Solved

Text in block not displaying properly

Posted on 2016-11-29
2
49 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 53

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

[Webinar] Code, Load, and Grow

Managing multiple websites, servers, applications, and security on a daily basis? Join us for a webinar on May 25th to learn how to simplify administration and management of virtual hosts for IT admins, create a secure environment, and deploy code more effectively and frequently.

Question has a verified solution.

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

Suggested Solutions

This article discusses how to create an extensible mechanism for linked drop downs.
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 embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

734 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