Hi,
I’m new to websites especially php.
I am working on a website previously created by another company and having problems editing.
I have been asked to add an extra tab to the top menu, and have managed this. My problem now is the purple underneath I cannot edit to match the 8 tabs instead of the previous 7. If you can look at the web address below, you will see my problem.
Any help will be most appreciated, really struggling!
Thanks
Code with the stylesheet would be helpful. I can see some fitment issues, but nothing involving color.
Hi,
I mistakenly started another post, but to answer yours, the colour isn’t an issue, just the purple background is segmented to 7 tabs and needs to be 8 tabs.
I was asked to create this to help with code: http://jsfiddle.net/82648/
Thanks
Did you setup the new tab as a separate div, span, or li?
Currently you have the menu image set to be the menu background. To correct the issue, you need to set it as the li background. That will place the image behind every li in the menu.
Apologies for my lack of anything… but not sure how I ‘set the li as the background’.
I am looking at the following code… Please can you advise what to change?
Thanks
.menu {
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
background-image:url(…/images/menu_purple2.gif);
width:976;
height:34px;
position:relative;
font-size:.9em;
z-index:102;
}
.menu ul li a, .menu ul li a:visited {
display:block;
text-decoration:none;
color:#fff;
width:122px;
height:34px;
text-align:center;
color:#fff;
line-height:34px;
font-size:.9em;
overflow:hidden;
background-repeat:repeat-x;
padding-top: 0px;
Right now you have a background image in menu. To have the image be behind the menu item, the image needs to be in the li style rule.
Hi,
As I said, I really don’t know what I’m doing…
I’m guessing I have to move ‘background-image:url(…/images/menu_purple2.gif);’ to somewhere else, (the li style rule), but I don’t know where this is. I have added to about 5 places, but with no luck.
Apologies for being slow, I just don’t know what I’m doing.
I appreciate your time.
Thanks
Try,
Hi,
I moved the line as directed, and the purple block disappeared, pasted to the new line, but didn’t come back.
I uploaded to the live site, but still the same as before. I reset the cache etc.
Any ideas?
Thank you
Richard
I pulled the code and an image from the site, using this style,
[code].menu {
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
width:976;
height:34px;
position:relative;
font-size:.9em;
z-index:102;
}
.menu ul li a, .menu ul li a:visited {
background-image:url(…/images/menu_purple2.gif);
display:block;
text-decoration:none;
color:#fff;
width:122px;
height:34px;
text-align:center;
color:#fff;
line-height:34px;
font-size:.9em;
overflow:hidden;
background-repeat:none;
padding-top: 0px;
}
[/code]
I have this image,
Hi,
I added your code but still no change.
Not sure if there has been any confusion, but I am attaching a screen grab of what is showing on the live site.
Hoping to get this resolved and appreciate all your help.
Thanks again
Richard
Did you just add my code, or did you modify that block in your CSS file?
Hi, thank you again.
I added your code in place of the existing code.
Not sure what you mean by ‘modify the block’.
As I said, this is all new to me.
The web address is http://www.pndales.co.uk
And the complete css code is as follows:
/* CSS Document */
html, body, div, span, applet, object, iframe, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td{
margin:0;
padding:0;
border:0;
outline:0;
font-weight:inherit;
font-style:inherit;
font-size:100%;
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
vertical-align:baseline;
}
.warning {color: #CC0000; font-style:italic;}
.pleasenote {color: #5D0286; font-style:italic;}
div#preload {
display: none;
visibility: hidden;
}
#quotelink{
text-indent:10px;
height:30px;
line-height:30px;
font-weight:800;
background-image:url(…/images/quote_link.jpg);
}
#quotelink a:hover{
width:180px;
height:30px;
display:block;
background-image:url(…/images/quote_link_over.jpg);
text-decoration:none;
}
#green{
width:180px;
height:30px;
background-image:url(…/images/green_narrow.gif);
text-indent:10px;
display:block;
line-height:30px;
margin-bottom:15px;
}
#green a:hover{
width:180px;
display:block;
background-image:url(…/images/green_narrow_over.gif);
text-decoration:none;
}
#grey{
width:180px;
height:30px;
background-image:url(…/images/grey_narrow.gif);
text-indent:10px;
display:block;
line-height:30px;
margin-bottom:15px;
letter-spacing:inherit;
}
#grey a:hover{
width:180px;
display:block;
background-image:url(…/images/grey_narrow_over.gif);
text-decoration:none;
}
body{
\font-size:1em;
font-size:smaller;
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
color:#333333;
text-align:left;
}
body a{
font-weight:900;
text-decoration:none;
color:#333333;
text-decoration:underline;
}
body a:hover{
font-weight:900;
color:#333333;
text-decoration:underline;
}
.hidden {
display: none;
}
#header{
background-image:url(…/images/index_new_header.jpg);
background-position:top left;
background-repeat:no-repeat;
height:242px;
display:block;
width:980px;
}
#header_mortgages{
background-image:url(…/images/mortgages_new_header.jpg);
background-position:top left;
background-repeat:no-repeat;
height:242px;
display:block;
width:980px;
}
#header_savings{
background-image:url(…/images/savings_new_header.jpg);
background-position:top left;
background-repeat:no-repeat;
height:242px;
display:block;
width:980px;
}
#header_pensions{
background-image:url(…/images/pensions_new_header.jpg);
background-position:top left;
background-repeat:no-repeat;
height:242px;
display:block;
width:980px;
}
#header_contact{
background-image:url(…/images/contact_new_header.jpg);
background-position:top left;
background-repeat:no-repeat;
height:242px;
display:block;
width:980px;
}
#header_protection{
background-image:url(…/images/protection_new_header.jpg);
background-position:top left;
background-repeat:no-repeat;
height:242px;
display:block;
width:980px;
}
.small{
font-size:.7em;
}
.small_white{
font-size:.7em;
color:#FFFFFF;
}
.small_white a{
color:#FFFFFF;
text-decoration:underline;
}
.small_white a:hover{
color:#FFFFFF;
text-decoration:underline;
}
.menu {
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
width:976;
height:34px;
position:relative;
font-size:.9em;
z-index:102;
}
.menu ul li a, .menu ul li a:visited {
background-image:url(…/images/menu_purple2.gif);
display:block;
text-decoration:none;
color:#fff;
width:122px;
height:34px;
text-align:center;
color:#fff;
line-height:34px;
font-size:.9em;
overflow:hidden;
background-repeat:none;
padding-top: 0px;
}
.menu ul {padding:0; margin:0; list-style: none;}
.menu ul li {
float:left;
position:relative;
text-align:left;
width: 122;
}
.menu ul li ul {display: none;}
/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background-image:url(…/images/menu_purple_over.gif); background-repeat:repeat-x;}
.menu ul li:hover ul {display:block; position:absolute; top:34px; left:0; width:122px; color:#fff}
.menu ul li:hover ul li a.hide {
color:#ffffff;
}
.menu ul li:hover ul li:hover a.hide {
color:#FFFFFF;
}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {
display:block;
color:#fff;
background-image:url(…/images/menu_green_over.gif);
background-repeat:repeat-x;
opacity:0.8;
text-align:center;
font-size:.9em;
width:122px;
}
.menu ul li:hover ul li a:hover {background-image:url(…/images/menu_green_over.gif); background-repeat:repeat-x; opacity:1; color:#fff;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:125px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-125px;}
#selected{
background-image:url(…/images/menu_green.gif);
background-repeat:repeat-x;
}
#quote_box{
width:250px;
}
.testimonial{
font-style:italic;
font-weight:800;
}
#container{
width:980px;
background-image:url(…/images/main_background2.gif);
background-repeat:repeat-y;
}
#main{
width:960px;
top:20px;
height:auto;
background-image:url(…/images/main_background2.gif);
background-repeat:repeat-y;
}
#sidebar{
width:175px;
text-align:left;
float:left;
left:-10px;
position:relative;
padding-top:30px;
padding-left:10px;
padding-right:10px;
min-height:650px;
}
#column2{
width:750px;
text-align:left;
padding-left:15px;
float:left;
height:auto;
position:relative;
z-index:101;
}
#column3{
height:712px;
float:left;
position:relative;
width:234px;
background-color:#ececec;
z-index:100;
left: 10px;
}
.tel{
font-size:1.4em;
color:#FFFFFF;
font-weight:800;
}
.white{
color:#FFFFFF;
}
.white a{
color:#FFFFFF;
text-decoration:none;
}
.white a:hover{
color:#FFFFFF;
text-decoration:none;
}
.h1{
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
text-align:left;
color:#33B551;
font-size:2em;
}
.h2{
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:#5D0286;
}
.h2 a:hover{
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
font-weight:bold;
color:#5D0286;
text-decoration:underline;
}
.h3{
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:1em;
color:#33B551;
font-weight:800;
}
.contact_placename{
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:1.4em;
color:#33B551;
font-weight:800;
}
.contact_tel{
font-family:Calibri, Verdana, Arial, Helvetica, sans-serif;
font-size:1.2em;
color:#666666;
font-weight:800;
}
.quote_title{
font-size:1.5em;
color:#5D0286;
font-weight:900;
}
#footer{
text-align:left;
top:10px;
width:940px;
height:100px;
background-color:#999999;
clear:both;
padding:20px;
}
.grey_box{ background:#f7f7f7; width:auto;}
.gtop, .gbottom{display:block; background:#FFFFFF;}
.gtop b, .gbottom b{display: block; height: 1px; overflow: hidden; background:#f7f7f7;}
.g1{margin: 0 5px}
.g2{margin: 0 3px}
.g3{margin: 0 2px}
.g4{margin: 0 1px; height: 2px}
Hi,
I have now resolved this by editing the gif.
May thanks for all your help.
Not sure how to ‘close’ or ‘resolve’ the post / topic.
Best wishes