SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 27
  1. #1
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why does my image stick out of the container at the bottom ?

    The page http://www.c5d.co.uk/clubrecordfour.php is really a simple page but the image sticks out at the bottom.

    The image does on this one too. http://www.c5d.co.uk/clubcardfour.php

    Do I need to somehow adjust the image ? Or the container ?

    Thanks for any help.

    Antony

  2. #2
    SitePoint Enthusiast
    Join Date
    Dec 2007
    Location
    Oskarshamn, Sweden
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    One way to fix this is to add overflow: hidden; to your #contentwrap div.

    There are other ways as well, like adding a clearfix class. Google on "clearing floats" or something like that if you want to know what's going on here

  3. #3
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, that works a treat.

    I shall toddle off to google that now

    Antony

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)

    Antony, the impressive way you have reworked the code on this page inspired me to give it another look. Here is my attempt. Remember, there is no right or wrong way to code most of this stuff. You can look at this and see what you think.

    I spent some time resizing and re-rendering the images to save download bytes and preserve aspect ratio. As a bonus, they look better, too <smile>.

    Please be aware that this code is "original". It will not plug-n-play substitute in your current layout. Many levels of <div>s have been removed. Some of those that remain have been given new classnames and ids. All of the css should be assumed to be different.

    DETAILS:

    1. The background image, gradient.jpg, has been replaced with a cleaned-up, narrow, repeating image, vgradient.jpg.

    2. The golfcourse image has been vertically stretched in the browser to render at a "normal" aspect ratio. Just curious... do you happen to have the original unsquished image in your posession?

    3. The two images of the old and new course have been sized to retain their aspect ratio.

    4. Images of the founders have been cropped and rendered so they resemble humans who survived a normal gestation and childbirth.

    5. A result of the image work is a 75% savings in the download bytes required of users.

    6. The black main menubar container height will extend if the menubar wraps when text-only is zoomed larger (page must be reloaded for drop down menus to have the correct width).

    7. Text beneath the images of the founders wraps beneath each respective image if text is zoomed.

    8. Text in the footer remains centered and can drop to a new line if text-only is zoomed larger. The height of the footer container will extend as expected.

    9. There are fewer floats in this layout.

    10. Body text has no size declared; thus, the user's default setting applies.

    11. If you use the upper part of this layout, remember to cut-n-paste the main menu HTML into your menu.php file. Please honor the indents; it makes the code easier to read.


    Code:
    
                   FYI only:  about the images
    
           original bytes                    resized bytes
    --------------------------    -----------------------------
    
      gradient.jpg  =  107,984        vgradient.jpg  =    1,112
    
    golfcourse.jpg  =   96,097    golfcourse-sm.jpg  =   16,133
    
         sixth.jpg  =  226,277         sixth-sm.jpg  =   12,987
    
           JWK.jpg  =  302,337           JWK-sm.jpg  =   97,317
    
       parnaby.jpg  =   11,974       parnaby-sm.jpg  =   30,897
    
        renouf.jpg  =   63,150        renouf-sm.jpg  =   36,403
                     ---------                        ---------
                       807,819                          194,849
    vgradient.jpg.golfcourse-sm.jpg.sixth-sm.jpg.JWK-sm.jpg.parnaby-sm.jpg.renouf-sm.jpg

    coursehistory1d.php
    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title> Course History| Welcome To The Ashton Under Lyne Golf Club Website</title>
    <!--    <link rel="stylesheet" href="http://www.c5d.co.uk/clubstyle.css" type="text/css" media="screen"> -->
        <link rel="stylesheet" href="clubstyle1d.css" type="text/css" media="screen">
        <script src="http://www.c5d.co.uk/mootools-1.2.5-core-yc.js" type="text/javascript"></script>
        <script src="http://www.c5d.co.uk/MenuMatic_0.68.3.js" type="text/javascript"></script>
    </head>
    <body>
    <script type="text/javascript">
    window.addEvent('domready', function() {
        var myMenu = new MenuMatic();
    });
    </script>
    <div id="outer">
    <!-- BEGIN menu.php INCLUDE -->
        <ul id="pagemenu">
            <li><a href="http://www.c5d.co.uk/addresschange.php">Change of Address</a></li>
            <li><a href="http://www.c5d.co.uk/contactagc.php">Contact Us</a></li>
            <li><a href="http://www.c5d.co.uk/directionstoclub.php">Directions</a></li>
        </ul>
        <div id="header">
            <img src="http://www.c5d.co.uk/clubhouse.jpg" alt="clubhouse">
        </div>
        <div id="navcontainer">
            <ul id="nav">
                <li><a href="/index.php"><img class="homegif" src="http://www.c5d.co.uk/home.gif" alt="home"></a></li>
                <li><a href="index.php">Visitors' Info</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/coursehistory.php">Club History</a></li>
                        <li><a href="http://www.c5d.co.uk/clubhousefacilities.php">Clubhouse Facilities</a></li>
                        <li><a href="http://www.c5d.co.uk/society-menu.php">Society Menu</a></li>
                        <li><a href="http://www.c5d.co.uk/dresscode.php">Dress Code</a></li>
                        <li><a href="http://www.c5d.co.uk/greenfees.php">Green Fees</a></li>
                        <li><a href="http://www.c5d.co.uk/teetime.php">Book A Tee Time</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/course.php">Course</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/course.php">Course Photos</a></li>
                        <li><a href="http://www.c5d.co.uk/clubcard.php">Card</a></li>
                        <li><a href="http://www.c5d.co.uk/clubrecord.php">Course Record</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/clubcompetitions.php">Club Comps</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/winners2012.php">Major Trophy Winners 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/nov2012.php">Competition Results November 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/dec2012.php">Competition Results December 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/jan2013.php">Competition Results January 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/feb2013.php">Competition Results February 2013</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/clubteams.php">Club Teams</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/teammatches2013.php">A &amp; B Team Matches 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/seniorteam.php">Senior Fixtures 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/dunham.php">Dunham Forest Trophy 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/mos.php">Mail on Sunday Knock Out 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/dmf.php">Daily Mail Foursome Knock Out 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/cityglass.php">City Glass Foursomes 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/archie.php">Archie Preston Trophy 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/bmw.php">Williams BMW Junior Challenge 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/teammatches2012.php">A &amp; B Team Results 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/ladiesteam.php">Ladies Team 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/juniorteam.php">Junior Team 2012</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/opens.php">Opens 2013</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/gentsopens.php">Gentlemen's Open Competitions 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/ladiesopens.php">Ladies' Open Competitions 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/mixedopens.php">Mixed Open Competitions 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/seniorsopens.php">Senior Open Competitions 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/junioropen.php">Junior Open Competition 2013</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/events.php">Club Diary</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/calendar.php">Gentlemen's Events</a></li>
                        <li><a href="http://www.c5d.co.uk/ladiescalendar.php">Laides' Events</a></li>
                        <li><a href="http://www.c5d.co.uk/seniorcalendar.php">Seniors' Events</a></li>
                        <li><a href="http://www.c5d.co.uk/juniorcalendar.php">Juniors' Events</a></li>
                        <li><a href="http://www.c5d.co.uk/social.php">Social Events</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/news.php">News</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/news1112.php">November 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/news1212.php">December 2012</a></li>
                        <li><a href="http://www.c5d.co.uk/news0113.php">January 2013</a></li>
                        <li><a href="http://www.c5d.co.uk/news0213.php">February 2013</a></li>
                    </ul>
                </li>
                <li><a href="http://www.c5d.co.uk/sections.php">Club Sections</a>
                    <ul class="sub-menu">
                        <li><a href="http://www.c5d.co.uk/greens.php">Greens Team</a></li>
                        <li><a href="http://www.c5d.co.uk/handicaps.php">Handicap Secretary</a></li>
                        <li><a href="http://www.c5d.co.uk/comps.php">Competitions Team</a></li>
                        <li><a href="http://www.c5d.co.uk/bar.php">Bar &amp; House Secretaries</a></li>
                        <li><a href="http://www.c5d.co.uk/juniors.php">Juniors</a></li>
                        <li><a href="http://www.c5d.co.uk/golfclublinks.php">Related Links</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    <!-- END menu.php INCLUDE -->
        <div id="contentsection">
            <ul id="opendays">
                <li><a href="http://www.brsgolf.com/ashtonunderlyne/visitor_availability_month.php"><img class="ad125" src="http://www.c5d.co.uk/whatson.png" alt="What's On"/></a></li>
                <li><a href="http://www.brsgolf.com/ashtonunderlyne/opens_home.php" target="_blank"><img class="ad125" src="http://www.c5d.co.uk/brsgolf.jpg" alt="Book An Open" /></a></li>
                <li><a href="http://www.howdidido.co.uk" target="_blank"><img class="ad125" src="http://www.c5d.co.uk/howdidido.jpg" alt="How Did I Do"></a></li>
                <li><a href="http://www.c5d.co.uk/teetimefour.php"><img class="ad125" src="http://www.c5d.co.uk/tee-time.png" alt="book a tee"/></a></li>
                <li><a href="http://www.c5d.co.uk/hurstweatherfour.php"><img class="ad125" src="http://www.c5d.co.uk/hurstweather.jpg" alt="Weather Widget"></a></li>
                <li><a href="http://www.c5d.co.uk/teetimefour.php"></a></li>
                <li><a href="http://www.facebook.com/home.php?sk=group_152294981498083%26ap=1" target="_blank"><img class="ad125" src="http://www.c5d.co.uk/facebook.png" alt="Facebook"></a></li>
                <li><a href="http://www.c5d.co.uk/notwitterfour.php"><img class="ad125" src="http://www.c5d.co.uk/twitter.png" alt="Follow Us"></a></li>
                <li><a href="http://www.odgl.org.uk" target="_blank"><img class="ad125" src="http://www.c5d.co.uk/odgl.png" alt="Oldham Golf League"></a></li>
                <li><a href="http://www.mdga.org.uk" target="_blank"><img class="ad125" src="http://www.c5d.co.uk/mdga.png" alt="Manchester & Dist Golf Alliance"></a></li>
            </ul>
            <div id="contentwrap">
                <div class="content">
                    <div class="then-now">
                        <div><img title="the 5th 1954" src="golfcourse-sm.jpg" alt=""></div>
                        <div><img title="the 4th 2009" src="sixth-sm.jpg" alt=""></div>
                    </div>
                    <p>The photo on the left shows what are now the fifth and fifteenth holes in 1954. Trees are very few and far between. The one on the right shows part of the same area in 2009.</p>
                    <p>Thoughts of a golf course in Ashton Under Lyne first took on an air of seriousness when twenty one men met in the former Hurst Hall to discuss the possibility. Land was rented from a local farmer and the course was officially opened in April 1913. As the course, was in Hurst, and the gentlemen concerned all lived in Hurst, why Ashton Under Lyne was chosen for the club's name is hard to imagine, however almost 100 years later, with our centenary due shortly, it's a bit late to worry about it.</p>
                    <p>Just 18 months after the club's inception the First World War broke out, and we were fortunate in that none of the members lost their lives in that conflict. Possibly they were too old to enlist, or just lucky. After the war the club flourished and though there were no major improvements for many years, the club enjoyed a reputation for excellent greens, if a bit on the small side.</p>
                    <p>The club began to develop in the late sixties. Under the direction of the current President, all of the land on which golf was played was purchased by the club, and the playing area extended. Further land was purchased in the 1980's and since then continual development has take place. In the 1960s, there was barely a tree on the course, but since then thousands have been planted and most of the holes are now out of sight of each other with practically all of them having tree lined fairways. In 1986, the club sold it's last bit of land on the other side of Gorsey Lane, and the current clubhouse was built. This necessitated a change in the playing order of the course, but gave us the wonderful last hole. A 179 yard par three over a yawning chasm;- aptly named "Death or Glory". Having survived, it's a great view from the club balcony watching others facing the challenge you have just beaten.</p>
                    <p>Under the current leadership, we are confident of continually developing the course to improve everyone's enjoyment.</p>
                </div>
            </div>
            <div id="founders">
                <div><img title="J W Kenworthy" src="JWK-sm.jpg" alt="JWK" width="285" height="404"><span>J W Kenworthy: The First President</span></div>
                <div><img title="Henry Parnaby" src="parnaby-sm.jpg" alt="Parnaby" width="285" height="404"><span>Rev<sup>d</sup> Henry Parnaby: The First Captain</span></div>
                <div><img title="Tommy Renouf" src="renouf-sm.jpg" alt="Renouf" width="258" height="404"><span>Thomas Renouf: Course Designer</span></div>
            </div>
        </div>
    </div>
    <div id="footer">
        <div>Copyright  Antony Lambert</div>
        <div><a href="http://www.c5d.co.uk/hurstpages.php" target="_blank">The Hurst Pages</a> by <a href="http://www.c5d.co.uk" target="_blank">Antony Lambert of C5D</a></div>
        <div>Wednesday 13 February 2013 - 19:38pm</div>
    </div>
    </body>
    </html>
    clubstyle1d.css
    Code:
    body {
        background:#fff url(vgradient.jpg) left top repeat-x;    /* 20x2000 repeating background image instead of full sized image */
        font-family:"Comic Sans MS";
        padding:0;
        margin:0;
    }
    
    #outer {
        width:950px;
        margin:0 auto;
    }
    
    /* PAGE MENU */
    
    #pagemenu {
        list-style-type:none;
        text-align:left;
        padding:10px 0 1px;
        margin:0px;
    }
    #pagemenu li {
        display:inline-block;    /* I chose inline-block; list-items can be floated, instead. */
        padding:0px;
        margin:0px;
    }
    #pagemenu li a {
        background:#000;
        color:#fff;
        display:block;
        text-decoration:none;
        text-transform:uppercase;
        font-style:italic;
        font-weight:bold;
        font-size:11px;
        font-family:"Comic Sans MS",Times,serif;
        padding:8px 16px;
        margin:0 0 0 6px;
    }
    
    /* CLUBHOUSE PHOTO */
    
    #header img {          /* clubphoto actual size = 950x170 squashed */
        display:block;
        width:950px;
        height:250px;      /* stretches image back to apparently normal aspect ratio */
        border-radius:10px;
    }
    
    /* NAVIGATION MENUS */
    
    #navcontainer {
        background:#000;
        border-radius:5px;
        overflow:hidden;
        padding-top:6px;
        margin-top:4px;
    }
    
    /* All ULs and OLs */
    #nav, #nav ul, #nav ol, #subMenusContainer ul, #subMenusContainer ol {
        padding: 0;
        margin: 0;
        list-style: none;
        line-height: 1em;
    }
    /* All submenu OLs and ULs */
    #nav ol, #nav ul, #subMenusContainer ul, #subMenusContainer ol {
        /*border around submenu goes here*/
        background: none;
        left:0;
    }
    /* List items in main menu --[for non-javascript users this applies to submenus as well]  */
    #nav li {
        /*great place to use a background image as a divider*/
        cursor: pointer;
        float: left;
        margin: 0 ;
        padding: 1px;
        height-: 90px;
        display: inline;
        background: url(../images/nav-separator.png) right center no-repeat;
    
    }
    #nav li:last-child {
        /*remove divider from last menu item*/
        cursor: pointer;
        float: left;
        margin: 0 ;
        padding: 1px;
        height-: 90px;
        display: inline;
        background: none;
    }
    .sub-menu li:last-child a {                /* This is for the last line of each drop down menu */
        border-bottom-right-radius: 7px;
        border-bottom-left-radius: 7px;
    }
    
    /* main menu ul or ol elment */
    #nav {
        width:950px;
        margin:0 auto;
        clear:both;
        overflow:hidden;
        font-size:12px;
        display:block;
    
    }
    #nav .children{
        display:none;
    }
    #subMenusContainer {
        display:block;
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:0;
        overflow:visible;
        z-index:2;
    }
    #subMenusContainer li {
        list-style:none;
        white-space:nowrap;
    }
    
    /* all menu links */
    #nav a, #subMenusContainer a {
        text-decoration:none;
        display:block;
        font-family:"New Century Schoolbook",Times,serif;
        font-style:italic;
    
    }
    /* Just main menu links --[for non-javascript users this applies to submenu links as well]*/
    #nav a {
        margin:0 4px 0 4px;
        float:left;
        padding:10px 14px;
        text-transform:uppercase;
        color: #ffffff;
        font-weight: bold;
        font-size: 12px; font-family: "New Century Schoolbook", Times, serif; font-style:italic;
    }
    /* Just sub menu links */
    #subMenusContainer a, #nav li li a {
        font-size: 12px;
        text-align:left;
        background-color:#292D30;
        padding:10px 10px;
        color: #FFFFFF; font-family: "New Century Schoolbook", Times, serif; font-style:italic; font-weight:bold;
    }
    /* All menu links on hover or focus */
    #nav li a:hover,
    #nav li a:focus,
    #nav a.mainMenuParentBtnFocused{
        background: url(../images/nav-bg-hover.png) left top repeat-x;
        color:#FFFFFF; font-weight:bold;
    }
    
    /* sub menu links on hover or focus */
    #subMenusContainer a:hover,
    #subMenusContainer a:focus,
    #subMenusContainer a.subMenuParentBtnFocused {
        background-color: #3B3E40;
        color:#FFFFFF; font-weight:bold;
        font-family:"New Century Schoolbook", Times, serif; font-style:italic;
    }
    
    /* Submenu Outer Wrapper - each submenu is inside a div with this class - javascript users only */
    .smOW {
        display:none;
        position: absolute;
        overflow:hidden;
        /*the 2px left & right padding lets you have a 1px border
          on the ul or ol inside since overflow is set to hidden*/
        padding:0 2px;
        margin:0 0 0 -2px;
    }
    
    /* CONTENT BELOW MENU BAR */
    
    #contentsection {
        background:#e0e0e0;
        padding-bottom:20px;     /* space at the bottom of the contentsection (above the footer). */
        overflow:hidden;
    }
    
    /* ul OPENDAYS button list */
    
    #opendays {
    /*    outline:1px solid magenta;    /* for layout testing */
        list-style-type:none;
        width:144px;             /* 164px total (144px + 20px = width + 2(h-padding)) */
        float:left;              /* allows contentwrap to sit to right of #opendays container. */
        text-align:center;
        padding:12px 10px;       /* padding at top, bottom, left and right of list */
        margin:0;
    }
    #opendays li + li {
        margin-top:12px;         /* vertical space between the list items */
    }
    #opendays a {
        display:block;
    }
    #opendays a img {
        display:block;
        border:none;
        border-radius:10px;
    }
    
    /* CONTENT */
    
    #contentwrap {
    /*    outline:1px solid cyan;    /* for layout testing */
        width:785px;
        padding-top:30px;        /* space at top of content section */
        padding-bottom:1px;
        margin-left:165px;       /* fixed margin for opendays buttons */
    }
    .content {
        padding-right:20px;      /* change this padding to add or reduce space beside content */
        padding-left:20px;
    }
    .content p {                 /* content text */
        color:#626768;
        font-weight:bold;
    }
    
    /* OLD AND NEW IMAGES */
    
    .then-now {
        display:table;
        width:100%;
    }
    .then-now div {
        display:table-cell;
        text-align:center;
        vertical-align:middle;
    }
    .then-now img {
        width:auto;
        height:190px;            /* height only is specified.  width auto adjusts.  table-cells accommodate differences */
        border-radius:10px;
    }
    
    /* FOUNDERS IMAGES */
    
    #founders {
    /*    outline:1px solid lime;    /* for layout testing */
        display:table;
        width:97%;               /* slightly less than 100% to create space at ends of row. */
        margin:0 auto;           /* auto centers */
    }
    #founders div {
        display:table-cell;      /* auto adjusts to different image widths.  auto centers. */
        text-align:center;       /* images are centered within the table-cell */
        vertical-align:top;
    }
    #founders img {              /* actual sizes are specified in the img tag attributes.  nothing resizes. */
        border-radius:10px;
    }
    #founders span {
        display:inline-block;
    }
    
    /* FOOTER */
    
    #footer {
        width:950px;
        background:#97cbed;
        color:#fff;
        font-size:14px;
        text-align:center;
        overflow:hidden;
        padding:5px 0;
        margin:0 auto;
    }
    #footer div {
        float:left;
        padding-left:15px;
        padding-right:0px;
    }
    #footer div + div {
        float:right;
        padding-left:0px;
        padding-right:15px;
    }
    #footer div + div + div {
        float:none;
        display:inline-block;
        padding-left:0px;
        padding-right:0px;
    }
    
    #footer a:link,
    #footer a:visited {
        color:#fffefe;
        text-decoration:underline;
    }
    #footer a:hover {
        color:#fffefe;
        font-weight:bold;
        text-decoration:none;
    }
    #footer a:active {
        text-decoration:underline;
    }
    
    /* MISCELLANEOUS */
    
    a img {
        border:none;   /* Takes away the border around clickable images in Internet Explorer */
    }
    
    img.homegif {
        margin-top:-6px;         /* raises the "home" image in the main NavBar */
    }
    
    sup {                        /* cross-browser "sup" tag */
        position:relative;
        top:-1px;
        vertical-align:top;
        font-size:90%;
    }

  5. #5
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your message, and your efforts. All of the images are still pending approval

    First off the club may yet decide to go for a white background: http://www.c5d.co.uk/clubcompetitionsfour.php

    Secondly there are 64 pages to this site, I guess the CSS will not need to adjusted for any of the other pages ?

    As for the picture, the image is here. It's the best I have attached the image. It's an old postcard ! We don't want the text on the picture though.

    http://www.c5d.co.uk/golfcourse.jpg
    Golf Club.png

  6. #6
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    I'm waiting for your image to be approved, too The image queue requires such patience!

    I made an error when asking about the golfcourse.jpg image... I actually meant the clubhouse.jpg image. The clubhouse.jpg is the one that is squished short and whose original version I seek. Maybe the "Golf Club" image that is pending is the original of clubhouse.jpg.

    Let me know what you think of the "look" of the page after the images become available. Be sure to zoom the text, too

    The numbered notes tell the story of the changes.

    I'm not sure what you mean about a white background. Are you saying that the club may choose a white background instead of your gradient? No problem. Whatever they like. The most important part of that new gradient is for you to see the difference in size between a full sized image and the repeating sliver. The latter is much more efficient.

    I don't know how much of the css will hold up for the other pages in this site. I didn't look at them. The main structure should be very sound. Don't know anything about the contents of the other pages, so I can't really speculate about any adds that may be needed.

    Cheers.

  7. #7
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The Image you are seeking then is here

    http://www.ashtongolfclub.co.uk/imag...EADERIMAGE.jpg


    As for the background, yes, we might go for white. I'm not convinced, I think it's very stark, but then I'm just a member !

    Antony

  8. #8
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Apparently, I'm not allowed to access that image. "permission denied"

    I agree with you that the white looks stark. Your gradient looked much better. Perhaps they will consider a different color instead of stark white.

  9. #9
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    How odd, I had no problem.

    Try www.c5d.co.uk/TEMPHEADERIMAGE.jpg

    It's in CAPS for some reason

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Got it! I had thought that the master image would have been larger. This one actually has to be scaled a tad larger. No problem, though. It still looks better with a proper aspect ratio than the other.

    To use this image, add a "2" to the name in the HTML. That would be on line 25 of the HTML that I just submitted.

    Also, please make two changes to the newly submitted clubstyle1d.css.

    On line 31, please add the border-radius property. I seem to have omitted it.
    Code:
    #pagemenu li a {
        background:#000;
        color:#fff;
        display:block;
        border-radius:10px;
        text-decoration:none;
        text-transform:uppercase;
        font-style:italic;
        font-weight:bold;
        font-size:11px;
        font-family:"Comic Sans MS",Times,serif;
        padding:8px 16px;
        margin:0 0 0 6px;
    }
    And on line 47, please change the height value from 250 to 255px. That will render the clubhouse.jpg image with the correct aspect ratio whether the image is updated or not.
    Code:
    #header img {
        display:block;
        width:950px;
        height:255px;
        border-radius:10px;
    }

  11. #11
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Will have a go this afternoon.

    Just aboutt o leave for golf

    Antony

  12. #12
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Sleepy, I guess. I revised the clubhouse image and typed my previous post as if the image were attached. I seem to have forgotten to attach it, so here is it. It's time in the queue has begun!

    clubhouse2.jpg

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Here is the Golf Club.png image as golfclub-sm.jpg. The sepia tone has a richer look than the contrasty B&W image.

    golfclub-sm.jpg

  14. #14
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Maybe your buds would prefer a background gradient that starts dark, becomes "masters green", and finishes with a taste of "water hazard blue" at the bottom.

    (of course, it may look too much like an aquarium, too )

    vgradient5.jpg

  15. #15
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your efforts.

    We have a meeting a weekend to decide how we will move this forward.

    I shall let you know, but I don't want to do any more for now because no doubt last minute changes will confuse them all !

    I shall look at this v gradient when it becomes available.

    The one page I do want to look at though is this one, http://www.c5d.co.uk/greenfees.php

    You can tell it should be four columns I'm sure, but why is the word spacing so odd ?

    Antony

  16. #16
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    You could add the gray vgradient.jpg that I sent previously and no one would be able to tell a difference except you and me. Then, if you get bold, you can change the name to vgradient5.jpg and go fancy green. You're exisiting code will already handle that.

    I'm not sure what you want the table to look like.

    table.golfclub is unstyled. The text is fitting within the cells according to normal table behavior, with one exception....

    Wrapped text is expanded to the width of each cell by the following property:
    Code:
    .entry {
        text-align: justify;
        line-height: 20px;
        padding-top: 8px;
        font-family: Comic Sans MS;font-weight:bold;
        font-size: 14px;
        padding-right:10px;    /* Class Entry is the container */
    }

  17. #17
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks, I didn;t realise the table was not styled.

    I have done that now and it almost right, but if you look at the words Visitors 15 and the line underneath Fourballs 50, The line is slightly below the corresponding line in the second column. Can you tell what is affecting it at all ?

  18. #18
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    By default, real tables vertically center text. To change that behavior, you should add the following style shown in blue:

    Line 231:
    Code:
    table.golfclub {
        width:100%;
    }
    .golfclub td {
        vertical-align:top;
    }

  19. #19
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can you explain something to me please ?

    I have been working with the coding that you give me to style a page better

    This is the page http://www.c5d.co.uk/ladiescalendar.php

    This is the code you gave me, now that I have adjusted it

    .calendar {
    list-style-type:none;
    display:table;
    padding:0;
    margin:0;
    }
    .calendar li {
    display:table-row;
    text-align:left;
    padding:0;
    margin:0;
    }
    .calendar p {
    display:table-cell;
    text-align:left;
    padding:3px 40px 3px 0; /* padding-right visually separates "columns" */
    }
    .calendar div {
    display:table-cell;
    }




    The padding right of 40 px moves the text in the middle column to the right by this amount, but how do I get it to move the third column also to the right so that the space between all three columns is the same ?

    I thought that the padding should apply to all of the lines

    Antony

  20. #20
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    "adjusted" it?

    This code represents a table disguised as a list.


    The css should look like this: (guess where it came from.)

    Code:
    .kefalonia {
        list-style-type:none;
        display:table;
        padding:0;
        margin:0 auto;
    }
    .kefalonia li {
        display:table-row;
        text-align:left;
        padding:0;
        margin:0;
    }
    .kefalonia p {
        display:table-cell;
        text-align:left;
        padding:3px 0px;
    }
    .kefalonia p + p {
        padding-left:50px;       /* padding-left visually separates "columns" */
    }
    This is you current HTML. You have four (4) rows containing six (6) columns of data (three are "invisible" padding columns). There should be ABSOLUTELY NO empty <p> tags as spacers (padding columns).
    Code:
    		  <ul class="calendar">
      <li>
         <p>6th Feb 2013</p>
         <p></p>
         <p>Singles Medal</p>
    	  <p>12 Holes</p>
         <p></p>
         <p></p>
      </li> 
      <li>
         <p>13th Feb 2013</p>
         <p></p>
         <p>Singles Stableford</p>
    	  <p>12 Holes</p>
         <p></p>
         <p></p>
      </li>  
      <li>
         <p>20th Feb 2013</p>
         <p></p>
         <p>Singles Medal</p>
    	  <p>12 Holes</p>
         <p></p>
         <p></p>
      </li>  
    <li>
         <p>27th Feb 2013</p>
         <p></p>
         <p>Singles Stableford</p>
    	  <p>12 Holes</p>
         <p></p>
         <p></p>
      </li> </ul>
    In my opinion, this presentation should be in a table, not a list.


    The request to surround code with [code] [/code] tags applies to all forums. That is what puts the box around the code and keeps the formatting intact.

  21. #21
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Can I diagree ?

    I fear that you must have misunderstood what I want to do because what you have suggested just doesn't do the trick.

    The inital code you gave me centred all the information in the middle of the container.

    By removing margin auto from here and leaving it read margin: 0

    .calendar {
    list-style-type:none;
    display:table;
    padding:0;
    margin:0;
    }


    And also adding 20 px right padding here


    .calendar p {
    display:table-cell;
    text-align:left;
    padding:3px 20px 3px 0; /* padding-right visually separates "columns" */
    }

    meant that the colums went to the left but the spacing was only OK between the first two columns

    What I want to emulate is the dispaly like this

    http://www.c5d.co.uk/dec2012.php

    Although this is with a table You will note though that it covers all the page and not just a portion of it

    Antony

  22. #22
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Antony, now I'm even more confused. You already have a proper table design that works on the same css sheet. Why not use it? I guess I don't understand the drive behind placing tabular data in a list. Sure, it can be done; but why?

    Tables are considered bad things for framing pages. They are GOOD things for containing tablular data. Presenting a matrix of data is the very thing they are designed to do.

  23. #23
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I know that and I have many tables on the C5D pages with all the census information.

    But what I want to do is adopt the same lay out and formatting for all sections for all months.

    Some sections will only have one event in a given month. And then a table is perhaps the wrong thing even if it is actually data. The Juniors or the Social for example.

    That's all

  24. #24
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,523
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    Quote Originally Posted by certificates View Post
    what I want to do is adopt the same lay out and formatting for all sections for all months.

    Some sections will only have one event in a given month. And then a table is perhaps the wrong thing even if it is actually data. The Juniors or the Social for example.

    That's all
    Will those months that have only one event still require exactly 3 columns?

  25. #25
    SitePoint Addict
    Join Date
    Nov 2012
    Posts
    251
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes they will, but if it possible to three and four because we have a page where the results are posted too.

    Thanks


Bookmarks

Posting Permissions

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