Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Text in block not displaying properly

Posted on 2016-11-29
2
Medium Priority
?
75 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 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 2000 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

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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 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…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

578 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