Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 3 of 3
  1. #1
    Junior Member
    Join Date
    Mar 2015
    Posts
    1
    Member #
    47626

    How do I bring my webpage together and make it look presentable??

    It looks so chopped up and poorly put together.... I am very new to CSS.

    Here is my code:

    HTML:
    <!DOCTYPE html>

    <!-- HTML and CSS 6th Edition: Comprehensive
    Author: Lindsey Caillouet
    Date: 3/5/15
    Text Editor: Notepad ++
    -->

    <!-- according to the W3C recommendation I should declare the
    primary language (en = english) of my WebPages -->
    <html lang="en">

    <head>
    <meta charset="UTF-8" />
    <title>The Gresham Children's Choir</title>
    <script src="modernizr-1.5.js"></script>

    <link href="gcc_styles.css" rel="stylesheet" type="text/css" />
    <link href="gcc_layout.css" rel="stylesheet" type="text/css" />

    </head>

    <body>

    <header>
    <h1><img src="gcclogo.png" alt="Gresham's Children Choir" /></h1>
    </header>

    <nav class="horizontal">
    <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News &amp; Events</a></li>
    <li><a href="#">Bookings</a></li>
    <li><a href="#">Members Only</a></li>
    <li><a href="#">Support GCC</a></li>

    </ul>
    </nav>

    <nav class="vertical">
    <ul>
    <li><a href="#">History</a></li>
    <li><a href="#">Achievements</a></li>
    <li><a href="#">Staff</a></li>
    <li><a href="#">Board</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Audio</a></li>
    <li><a href="#">Video</a></li>
    <li><a href="#">Youth Choir</a></li>
    <li><a href="#">Boy's Choir</a></li>
    <li><a href="#">Girl's Choir</a></li>
    <li><a href="#">Mixed Choir</a></li>
    <li><a href="#">Touring Choir</a></li>
    <li><a rel="external" href="http://cpst.tulane.edu/~lcaillou/cpst240010/week5/assignments.htm" target="new">Lindsey's Assignments</a></li>
    <li><a rel="external" href="http://en.wikipedia.org/wiki/Choir" target="new">Choir Definition</a></li>
    <li><a rel="external" href="http://en.wikipedia.org/wiki/Performing_arts" target="new">Performing Arts</a></li>
    <li><a rel="external" href="http://en.wikipedia.org/wiki/Broadway_theatre" target="new">Broadway Definition</a></li>
    <li><a rel="external" href="http://en.wikipedia.org/wiki/Ballet" target="new">Ballet Definition</a></li>
    <li><a rel="external" href="http://dictionary.reference.com/browse/opera" target="new">Opera Definition</a></li>
    <li><a rel="external" href="http://www.mahaliajacksontheater.com/" target="new">Mahalia Jackson Theater</a></li>
    <li><a rel="external" href="http://www.rivertowntheaters.com/" target="new">Rivertown Theater</a></li>
    <li><a rel="external" href="http://cacno.org/" target="new">Contemporary Arts Center</a></li>
    <li><a rel="external" href="http://www.lepetittheatre.com/" target="new">Le Petite Theatre</a></li>
    <li><a rel="external" href="www.jpas.org" target="new">Jefferson Performing Arts Society</a></li>
    <!-- Rubric item #7 and #11 -->

    </ul>
    </nav>

    <section>
    <h1>About the GCC</h1>
    <p>
    Founded in 1965, the Gresham Children's Choir seeks to enhance
    the musical development of children by instilling in them a love of
    ensemble singing. By striving for artistic excellence
    and learning a diverse repertory of choral literature, our children
    build self-confidence and learn the joys of working together
    to create beautiful music for an appreciative audience.
    </p>

    <article>
    <h2>Artistic Director</h2>
    <img src="chen.png" alt="photo" />
    <p>
    Born and raised in eastern Ohio, David Chen studied conducting,
    voice, and piano at the University of Southern California's Thornton
    School of Music. David returned to Gresham two years ago to take
    over direction of the GCC. The children appreciate David's demand
    for quality performances while still maintaining a fun and playful
    atmosphere.
    </p>
    <p>As a performer, he has sung in Los Angeles with the USC Thornton
    Choral Artists under the direction of Helen Von Allen. He has
    also been working on a project to edit and perform the
    sacred works of Hildegard of Bingen. Look for the premier
    of his efforts next summer.
    </p>
    </article>

    </section>

    <aside>
    <h2>Hear the Buzz</h2>
    <blockquote>
    <p>The Gresham Children's Choir, Boychoir, under the direction of
    David Chen, is an outstanding cultural asset to our city. I've enjoyed
    working with them in past and look forward to future concerts
    together.<br />
    <cite>&mdash; Andrew Pauls, Director of Gresham Civic Opera</cite>
    </p>
    </blockquote>
    <blockquote>
    <p>These children are <em>artists!</em>. Don't miss them!<br />
    <cite>&mdash; Gresham Journal</cite>
    </p>
    </blockquote>
    </aside>


    <footer>
    <address>
    Gresham Children's Choir &#183;
    Mentor, OH 44061 &#183;
    (440) 555-3811
    </address>
    </footer>

    </body>
    </html>

    ONE CSS FILE
    /*
    New Perspectives on HTML and CSS
    Tutorial 4
    Case Problem 4

    Gresham's Choir Style Sheet
    Author: Lindsey Caillouet
    Date: 3/5/15

    Filename: gcc_styles.css
    Supporting Files:

    */

    /* Body Styles */

    body {
    background-color: white;
    font-family: Verdana, Geneva, Arial, sans-serif;
    line-height: 1.4em;
    }

    /* Heading styles */

    section h1 {
    background-color: rgb(128, 128, 128);
    color: white;
    font-size: 1.7em;
    line-height: 1.8em;
    text-indent: 1em;
    text-align: center;
    }

    h2 {
    background-color: rgb(184,134,11);
    color: white;
    color: rgba(255, 255, 255, 0.8); /* Semitransparent color effect */
    line-height: 1.8em;
    text-indent: 1em;
    text-align: center;
    }

    /* Navigation list styles */

    nav.horizontal ul
    {
    display: inline;
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-align: center;
    }
    nav.horizontal ul li
    {
    display: inline;
    }

    nav.horizontal ul li a
    {
    text-decoration: none;
    padding: .5em 1em;
    color: white;
    background-color: rgb(128, 0, 0);
    }

    nav.horizontal ul li:first-of-type {
    text-transform: uppercase;
    } /* Applying a structural pseudo-class*/

    nav.horizontal ul li a:hover
    {
    color: white;
    background-color: rgb(205,133,63);
    } /* Rollover effect*/

    nav.vertical ul {
    background-color: rgb(128, 0, 0);
    line-height: 2em;
    list-style-type: none;
    padding-left: 0.5em;
    text-align: center;
    }

    nav.vertical ul li:hover {
    background-color: rgb(205,133,63);
    } /* Rollover effect*/

    nav.vertical ul li a {
    color: white;
    text-decoration: none;
    }

    footer address {
    background-color: rgb(165,42,42);
    color: white;
    color: rgba(255, 255, 255, 0.8);
    font: normal small-caps 0.8em/4em 'Times New Roman', Times, serif;
    text-align: center;
    }

    OTHER CSS FILE
    /*
    New Perspectives on HTML and CSS
    Tutorial 4
    Case Problem 4

    Gresham Layout Style Sheet
    Author: Lindsey Caillouet
    Date: 3/5/15

    Filename: gcc_layout.css
    Supporting Files:

    */

    header, nav, section, aside, article, footer {
    display: block;
    }


    /* Body Layout */

    body {
    width: 1000px;
    }

    /* Header Layout */

    header {
    width: 100%;
    height: 120px;
    }
    /* Navigation list */

    nav.horizontal {
    width: 76%;
    }

    nav.horizontal ul {
    padding: 0px;
    margin: 0px;
    }

    nav.horizontal li {
    list-style: none;
    padding: 0px;
    margin: 0px;
    width: 20%;
    text-align: center;
    }
    nav.vertical {
    clear: left;
    float: left;
    width: 200px;
    }



    /* Section styles */

    section {
    border-right: 1px solid black;
    float: left;
    width: 39%;
    }


    /* Article styles */

    article img {
    width: 150px;
    float: right;
    margin: 15px;
    }


    /* Aside styles */

    aside {
    float: left;
    margin-left: 15px;
    width: 39%;
    }


    /* Footer styles */

    footer {
    clear: left;
    border-top: 1px solid black;
    }
    Attached Images Attached Images

  2.  

  3. #2
    Junior Member
    Join Date
    Feb 2015
    Location
    Kildare, Ireland
    Posts
    15
    Member #
    45446
    Liked
    1 times
    It looks like you just need to play around with your css if you want to make it look better, if you can provide some more information as to exactly what you are trying to achieve then maybe more help can be given.

  4. #3
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,716
    Member #
    5580
    Liked
    717 times
    I normally would not just throw-out a suggestion like using WordPress, but I think in your case you should use WordPress.

    Your site is about an organization, events, gallery, possibly an online schedule, and possibly a way for choir members to log-in for special information.

    A perfect kind of site for WordPress.

    You just need to find a theme template (free or a premium theme) that takes only a small amount of customization. WordPress itself is free. Because it's an organization, you can allow several people to have the ability to edit content.

    Picture something like this, with your own photo slideshow on the front. They show all of the features, but sections can be "not used" if you don't want them.
    http://themes.goodlayers.com/?theme=modernize



    .
    Last edited by mlseim; Mar 08th, 2015 at 02:53 PM.



Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Tags for this Thread

All times are GMT -6. The time now is 06:27 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com