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
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 
Thanks, that works a treat.
I shall toddle off to google that now
Antony
[FONT=Verdana]
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:
The background image, gradient.jpg, has been replaced with a cleaned-up, narrow, repeating image, vgradient.jpg.
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?
The two images of the old and new course have been sized to retain their aspect ratio.
Images of the founders have been cropped and rendered so they resemble humans who survived a normal gestation and childbirth.
A result of the image work is a 75% savings in the download bytes required of users.
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).
Text beneath the images of the founders wraps beneath each respective image if text is zoomed.
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.
There are fewer floats in this layout.
Body text has no size declared; thus, the user’s default setting applies.
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.
[/FONT]
[FONT=Courier New]
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[/FONT]
…
coursehistory1d.php
<!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 & 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 & 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 & 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
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%;
}
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.
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.
The Image you are seeking then is here
http://www.ashtongolfclub.co.uk/images/TEMPHEADERIMAGE.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
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.
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.
#pagemenu li a {
background:#000;
color:#fff;
display:block;
[color=blue]border-radius:10px;[/color]
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.
#header img {
display:block;
width:950px;
height:[color=blue]255px[/color];
border-radius:10px;
}
Will have a go this afternoon.
Just aboutt o leave for golf
Antony
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!
Here is the Golf Club.png image as golfclub-sm.jpg. The sepia tone has a richer look than the contrasty B&W image.
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 
)
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
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:
.entry {
[color=red]text-align: justify;[/color]
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 */
}
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 ?
By default, real tables vertically center text. To change that behavior, you should add the following style shown in blue:
Line 231:
table.golfclub {
width:100%;
}
[color=blue].golfclub td {
vertical-align:top;
}[/color]
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
“adjusted” it?
This code represents a table disguised as a list.
The css should look like this: (guess where it came from.)
.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).
<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 [noparse]
[/noparse] tags applies to all forums. That is what puts the box around the code and keeps the formatting intact.