-
-
owenpga wrote:
With both changes, the style rule looks like this:
ul.MenuBarHorizontal { margin: 0 auto; padding: 0; list-style-type: none; font-size: 100%; cursor: default; width: 32em; /* Change to the width of your own menu bar */ }The rule on your posted link does not appear to contain the revised rule...
have you not uploaded it?
FROM YOUR SERVER CSS
ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: auto;
text-align: left;
background-position: center;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
Replace with this rule
/* The outermost container of the Menu Bar, an auto width box with no margin or padding */
ul.MenuBarHorizontal
{
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 49em;
text-align: left;
background-position: center;
margin: 0 auto;}
HTH
| -
Hi Owen,
as a first step I used David's hint about the width and put it into your source code like this:
ul.MenuBarHorizontal
{
margin: 0 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
/* width: auto;*/
width: 32em;
text-align: left;
background-position: center;
}
and I got this:
what means you/I haveonly to "Adjusting the menu item widths", what is described here: http://foundationphp.com/tutorials/sprymenu/customize3.php#widths.
Good luck!
Hans-Günter.
P.S.
The first time I used your source code in my DW I got this message:
Please have a look to it there.
| -
Hi Owen,
at the end I got this:
and therefore I wrote in your SpryMenuBarHorizontal.css:
ul.MenuBarHorizontal
{
margin: 0 auto;
padding: 0;
list-style-type: none;
font-size: 100%;
cursor: default;
width: 860px;
text-align: left;
background-position: center;
}and
ul.MenuBarHorizontal ul
{
margin: 0;
padding: 0;
list-style-type: none;
font-size: 100%;
z-index: 1020;
cursor: default;
width: 10.7em;
position: absolute;
left: -1000em;
background-position: center;
}Hans-Günter
| -
-
Hi Owen -
We can improve your centering even further.than with just the CSS code I provided
You have used the HTML code in your page to alter the display size of the images on your page.
No need to change the image, but In the HTML code, on your pages, change the size of your banner to match the actual size of your image.
Change this -
<h1 align="center">
<img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="773" height="220" /></h1>
To this -
<h1 align="center">
<img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="812" height="232" /></h1>
Unrelated to your centering problem, you again disregarded the actual image size on your "Book a Lesson" JPG image. I am posting a drastically reduced sized image which I converted to a GIF image with a transparent background (to hide the white canvas) and a slightly different shadow. See if you like it better when you insert it at its actual size of 138x117 rather than using HTML code to constrain the original 500x427 image. This will also speed up the download time of your page.
If you can't save the image from this Forum, please let me know, and I'll email it to you.
Welcom home pal.
| -
Hi Owen,
in addition to Ken's idea about the image size now (see my message below), seriously, you could feel satisfied for the moment (I can imagine that you prefer "hio" for that matter
) as well with your solution as our proposals to your ul.MenuBarHorizontal ...Now you could take your time experimenting with the different dimensions and sizes (px, em, % aso.) AFTER you have performed your most important technical tasks at your web presence.
Naturally, no offence and good luck!
Hans-Günter
Message modified by hans-g.
| -
-
Yes Hans... it sure did disappear -
I'll add it again here.
Hi Owen -
We can improve your centering even further.than with just the CSS code I provided
You have used the HTML code in your page to alter the display size of the images on your page.
No need to change the image, but In the HTML code, on your pages, change the size of your banner to match the actual size of your image.
Change this -
<h1 align="center">
<img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="773" height="220" /></h1>
To this -
<h1 align="center">
<img src="photos/pgabanner_w_phonenumber.png" alt="Owen Dawson PGA Instruction" width="812" height="232" /></h1>
Unrelated to your centering problem, you again disregarded the actual image size on your "Book a Lesson" JPG image. I am posting a drastically reduced sized image which I converted to a GIF image with a transparent background (to hide the white canvas) and a slightly different shadow. See if you like it better when you insert it at its actual size of 138x117 rather than using HTML code to constrain the original 500x427 image. This will also speed up the download time of your page.
Let;s see if this one stays
| -
-
-
-
-
-
-
-
-
Ken,
Hope all is well.
I'm trying to copy the code for spry 2.0 upgrade into my template page, but not having much success.
I can get the code under the banner but it shifts left with bullets.
Apparently the new 2.0 version fixes my issue with touch screens working properly IE iphone, ipads etc.
i've downloaded the widget with all the folders and files and they are in my website folder.
I'd be more than willing to pay you for your services if you know how to get this thing working.
I'm not sure how to send you the template page so you can look at it.
When you have some time, let me know what you think. Owen
i've used the steps below to the best of my ability to copy the code. im using dwcs3.
| -
-
-
- 10 points awarded for Correct Answers
- 5 points awarded for
-
10,000+ points
-
1,001-10,000 points
-
501-1,000 points
-
5-500 points
-
