Borderline Posted July 2, 2009 Share Posted July 2, 2009 Being design challenged, I purchased a template for my photography site. However, I'm now struggling to produce the template as I want it, and I wondered whether anyone could point me in the right direction.The menu code currently reads as: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title></title><meta name="keywords" content="" /><meta name="description" content="" /><link href="default.css" rel="stylesheet" type="text/css" /><style type="text/css"><!-- @import url("layout.css");--></style></head><body> <div id="menu"> <ul> <li><a href="subpage1.html" id="menu1" accesskey="1" title="Home"><b>Home</b></a></li> <li><a href="#" id="menu2" accesskey="2" title="Photos"><b>Photos</b></a></li> <li><a href="#" id="menu3" accesskey="3" title="About Me"><b>About Me</b></a></li> <li><a href="#" id="menu4" accesskey="4" title="Tools"><b>Tools</b></a></li> <li><a href="#" id="menu5" accesskey="5" title="Blog"><b>Blog</b></a></li> <li><a href="#" id="menu6" accesskey="6" title="Links"><b>Links</b></a></li> <li><a href="#" id="menu7" accesskey="7" title="Contact Us"><b>Contact Us</b></a></li> </ul> </div> </body></html> The CSS reads as: /** MENU */#menu { float: left; width: 118px; height: 216px; background: url(images/homepage11.jpg) no-repeat left bottom;}#menu ul { margin: 0px; padding: 40px 0px 0px 0px; list-style: none; background: url(images/homepage03.jpg) no-repeat left top;}#menu li { display: inline;}#menu a { display: block; width: 118px; height: 20px;}#menu b { display: none;}#menu1 { background: url(images/homepage04.jpg) no-repeat left top; }#menu2 { background: url(images/homepage05.jpg) no-repeat left top; }#menu3 { background: url(images/homepage06.jpg) no-repeat left top; }#menu4 { background: url(images/homepage07.jpg) no-repeat left top; }#menu5 { background: url(images/homepage08.jpg) no-repeat left top; }#menu6 { background: url(images/homepage09.jpg) no-repeat left top; }#menu7 { background: url(images/homepage10.jpg) no-repeat left top; } I am attempting to add the text to the links, which I believed would have happened in the code displayed above. However, when I contacted the site I bought the template from, they stated that I would have to add the text to the images themselves. I tried this, but it resulted in really poor quality.Can this be done successfully in CSS and what the the best way to do this? My inital thought was to lay a div over the top with z-index and then space the links out to overlay the individual buttons. Am I making this more difficult than it should be?Any advice would be gratefully received.Edited to include this link, which shows the current result of the code. http://www.equinefocus.co.uk/menu.php Link to comment Share on other sites More sharing options...
dsonesuk Posted July 2, 2009 Share Posted July 2, 2009 change the html page menu from this<div id="menu"> <ul> <li><a href="subpage1.html" id="menu1" accesskey="1" title="Home"><b>Home</b></a></li> <li><a href="#" id="menu2" accesskey="2" title="Photos"><b>Photos</b></a></li> <li><a href="#" id="menu3" accesskey="3" title="About Me"><b>About Me</b></a></li> <li><a href="#" id="menu4" accesskey="4" title="Tools"><b>Tools</b></a></li> <li><a href="#" id="menu5" accesskey="5" title="Blog"><b>Blog</b></a></li> <li><a href="#" id="menu6" accesskey="6" title="Links"><b>Links</b></a></li> <li><a href="#" id="menu7" accesskey="7" title="Contact Us"><b>Contact Us</b></a></li> </ul> </div>to this:<div id="menu"> <ul> <li><a title="Home" accesskey="1" id="menu1" href="subpage1.html">Home</a></li> <li><a href="#" id="menu2" accesskey="2" title="Photos">Photos</a></li> <li><a href="#" id="menu3" accesskey="3" title="About Me">About Me</a></li> <li><a href="#" id="menu4" accesskey="4" title="Tools">Tools</a></li> <li><a href="#" id="menu5" accesskey="5" title="Blog">Blog</a></li> <li><a href="#" id="menu6" accesskey="6" title="Links">Links</a></li> <li><a href="#" id="menu7" accesskey="7" title="Contact Us">Contact Us</a></li> </ul> </div>add the below code to layout.css #menu ul li a {color: #fff; padding-left: 14px; line-height:17px; font-weight: bold;}and that is all that is required, note: i changed the text to white #fff, because the default col was very hard to make out.just a small observation about individual id for every image, in the menu? they are all the same! you could use one class name for all. see below:<div id="menu"> <ul> <li><a title="Home" accesskey="1" class="menu1" href="subpage1.html">Home</a></li> <li><a href="#" class="menu1" accesskey="2" title="Photos">Photos</a></li> <li><a href="#" class="menu1" accesskey="3" title="About Me">About Me</a></li> <li><a href="#" class="menu1" accesskey="4" title="Tools">Tools</a></li> <li><a href="#" class="menu1" accesskey="5" title="Blog">Blog</a></li> <li><a href="#" class="menu1" accesskey="6" title="Links">Links</a></li> <li><a href="#" class="menu1" accesskey="7" title="Contact Us">Contact Us</a></li> </ul> </div>then change this#menu1 { background: url(images/homepage04.jpg) no-repeat left top; }#menu2 { background: url(images/homepage05.jpg) no-repeat left top; }#menu3 { background: url(images/homepage06.jpg) no-repeat left top; }#menu4 { background: url(images/homepage07.jpg) no-repeat left top; }#menu5 { background: url(images/homepage08.jpg) no-repeat left top; }#menu6 { background: url(images/homepage09.jpg) no-repeat left top; }#menu7 { background: url(images/homepage10.jpg) no-repeat left top; }to this.menu1 { background: url(images/homepage04.jpg) no-repeat left top; }and it will produce exactly the same menu design. Link to comment Share on other sites More sharing options...
Borderline Posted July 3, 2009 Author Share Posted July 3, 2009 Super - thank you so much!The company I bought the layout from said I should add the text to the buttons individually - do you think this is the reason for the individual id's? Seems strange to have to do it that way when, as you've demonstrated, a few changes can produce the result in CSS! Link to comment Share on other sites More sharing options...
dsonesuk Posted July 3, 2009 Share Posted July 3, 2009 for plain text only, this is the best option. if you plan to add special effects to text, for example shadow, engrave, then creating individual images would be the way to go.another reason to use and image, is if you use a special font, which not everyone would have on their O/S. it would then display it in a widely used font such as arial, verdana or sans-serif instead. Link to comment Share on other sites More sharing options...
Borderline Posted July 4, 2009 Author Share Posted July 4, 2009 I'm having further problems of a similar kind, would it be possible for you to take a look again. I've managed to alter the css to show up the site name and additional comment (amateur equine photography), however, I am struggling to get the text for the individual headers (with the green bars) to show up. I've tried adding red text to the areas of the css code I think may control these attributes, but have had no success to date (please note, only using red text so I can find the laterations quickly and easily).I thought the most likely candidate would be the .title h2 OR #box4 .title h2 part of the code, but no luck so far. Any ideas?HOMEPAGE CODE: <!-- #MAIN CONTENT --><div id="box1"> <div class="title bg2"> <h2 id="title7"><b>Maecenas a quameu</b></h2> </div> <div class="content bg3"> <p>Paragraph details.... </p> <h3 class="text1">Maecenas luctus lectus at sapien</h3> <p>Paragraph details....</p> <h3 class="text1">Nulla luctus eleifend purus</h3> <p>Paragraph details....</p> <p>Paragraph details....</p> </div> </div></div> <!-- #SEARCH BOX --><div id="right"> <div id="box4" class="bg4"> <div class="title"> <h2 id="title4"><b>Site search</b></h2> </div> <div class="content"> <?php include($_SERVER['DOCUMENT_ROOT'].'/includes/searchbox.php');?> </div> </div> <!-- #TWITTER BOX --><div id="box5" class="bg4"><div class="title"><h2 id="title5"><b>New Albums</b></h2></div><div class="content"><?php include($_SERVER['DOCUMENT_ROOT'].'/includes/twitter.php');?></div></div> <!-- #box5 --> <div id="box6"> <div class="title"> <h2 id="title6"><b>Veroeros etiam</b></h2> </div> <div class="content"> <img src="images/homepage30.jpg" alt="" width="58" height="58" class="img1" /> <h3><a href="#" class="link1">Lorem Ipsum</a></h3> <p>Paragraph details....</p> <p> </p> <img src="images/homepage31.jpg" alt="" width="58" height="58" class="img1" /> <h3><a href="#" class="link1">Veroeros Etiam</a></h3> <p>Paragraph details....</p> <p> </p> <img src="images/homepage32.jpg" alt="" width="58" height="58" class="img1" /> <h3><a href="#" class="link1">Consequat Sed</a></h3> <p>Paragraph details....</p> </div> </div>[/left] CSS CODE: /** BASIC */body { margin: 0px; padding: 0px; background-color: #FFFFFF;}/** FORMS */form { margin: 0px; padding: 0px;}.input1 { border: 1px solid #596A6C;}/** HEADINGS */h1, h2, h3, h4, h5, h6 { margin: 0px;}/** TEXTS */body, th, td, input, textarea, select { font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #000000;}p, blockquote, ul, ol, dl { margin-top: 0px; margin-bottom: 1em; text-align: justify;}.text1 { margin-bottom: 5px; font-size: 12px; font-weight: bold; color: #93A4A5;}.text2 { text-align: right;}.text3 { text-align: center; color: #D4E0E2;}/** LINKS */a { text-decoration: none; color: #41815E;}a:hover { text-decoration: underline;}.link1 { text-decoration: none; font-size: 12px; font-weight: bold;}/** STYLES */.style1 { text-align: center; color: #FFFFFF;}.style1 a { color: #FFFFFF;}.style1 a:hover {}/** BACKGROUNDS */.bg1 { background: url(/images/homepage01.gif) repeat-x left top; }.bg2 { background: url(/images/homepage16.gif) repeat-x left bottom; }.bg3 { background: url(/images/homepage17.gif) repeat-y left top; }.bg4 { background: url(/images/homepage25.gif) repeat-y left top; }.bg5 { background: url(/images/homepage33.gif) repeat-y left top; }.bg6 { background: url(/images/homepage34.gif) repeat-x left top; }/** MISC */.align-justify { text-align: justify; }.align-right { text-align: right; }img { border: none; }.img1 { float: left; margin: 3px 15px 0px 0px;}.img2 { float: right; margin: 3px 0px 0px 15px;}hr { display: none; }.hr1 { clear: both; height: 1px; margin: 0px; padding: 10px 0px 15px 0px; background: url(/images/homepage21.gif) repeat-x left center;}/** TITLES */.title { padding-bottom: 4px;}.title h2 { height: 19px;}.title b { display: none;}#title1 { background: url(/images/homepage13.gif) no-repeat left top; }#title2 { background: url(/images/homepage14.gif) no-repeat left top; }#title3 { background: url(/images/homepage15.gif) no-repeat left top; }#title4 { background: url(/images/homepage22.gif) no-repeat left top; }#title5 { background: url(/images/homepage23.gif) no-repeat left top; }#title6 { background: url(/images/homepage24.gif) no-repeat left top; }#title7 { background: url(/images/subpage1_01.gif) no-repeat left top;}#title8 { background: url(/images/subpage2_02.gif) no-repeat left top; }/** BASIC */html, body { height: 100%;}/** EXTRAS */#extra1 { width: 778px; height: 16px; margin: 0px auto;}#extra2 { height: 43px; background: url(/images/subpage2_01.jpg) no-repeat left bottom;}/** WRAPPER */#wrapper { width: 778px; margin: 0px auto;}#left { float: left; width: 544px;}#right { float: left; width: 234px;}/** HEADER */#header { width: 544px; height: 216px;}#logo { float: left; width: 426px; height: 216px; background: url(/images/homepage02.jpg) no-repeat left top;}#logo h1{ color: #000000; text-indent: 25px; margin-top: 25px;}#logo h2 { color: #FFFFFF; text-indent: 25px; margin-top: 5px;}/** MENU */#menu { float: left; width: 118px; height: 216px; background: url(/images/homepage11.jpg) no-repeat left bottom;}#menu ul li a {color: #fff; padding-left: 14px; line-height:17px; font-weight: bold;}#menu ul { margin: 0px; padding: 40px 0px 0px 0px; list-style: none; background: url(/images/homepage03.jpg) no-repeat left top;}#menu li { display: inline;}#menu a { display: block; width: 118px; height: 20px;}#menu b { display: none;}#menu1 { background: url(/images/homepage04.jpg) no-repeat left top; }/** BOX1 */#box1 { padding: 20px 10px 0px 10px;}#box1 .content { padding: 20px 10px 20px 30px;}/** BOX2 */#box2 { float: left; width: 315px; padding: 0px 0px 0px 10px;}#box2 .content { padding: 20px 10px 20px 30px;}/** BOX3 */#box3 { float: left; width: 200px;}#box3 .content { padding: 15px 20px 20px 30px;}/** BOX4 */#box4 {}#box4 .title h2 { height: 24px;}#box4 .content { padding: 3px 0px 7px 30px;}/** BOX5 */html>body #box5 .content {padding: 10px 0px 23px 24px;}#box5 {}#box5 .title h2 { height: 27px;}#box5 .content { padding: 10px 0px 17px 24px;}#label1 { display: block; width: 76px; height: 18px; background: url(/images/homepage28.gif) no-repeat left top;}#label2 { display: block; width: 76px; height: 18px; background: url(/images/homepage29.gif) no-repeat left top;}#label1 b, #label2 b { display: none;}/** BOX6 */#box6 {}#box6 .title h2 { height: 39px;}#box6 .content { padding: 25px 20px 20px 35px;} Edited to include link to current sample: http://www.equinefocus.co.uk/subpagetest.php Link to comment Share on other sites More sharing options...
dsonesuk Posted July 4, 2009 Share Posted July 4, 2009 its because the designers of this template assigned display: none; to the element b under .title b {display: none} they did exactly the samething with the menu? if you look at the original menu html code to what i amended it to you will see i removed the "<b>" and "</b>" from <b>menu name</b>.you could do exactly the same thing (remove <b>and </b>), or remove the display: none; or comment it out by doing this /*display: none;*/ from below css code. then if you wish to use it in future, you just remove /* */..title b { display: none;{ Link to comment Share on other sites More sharing options...
dsonesuk Posted July 4, 2009 Share Posted July 4, 2009 you will need to keep '.title b' it to make these adjustment to line up the headings correctly.title b {/*display:none;*/font-size:90%;padding-left:28px;padding-top:14px;}#title4 {background:transparent url(/images/homepage22.gif) no-repeat scroll left top;line-height:22px;}#title5 {background:transparent url(/images/homepage23.gif) no-repeat scroll left top;line-height:27px;}#title6 {background:transparent url(/images/homepage24.gif) no-repeat scroll left top;line-height:20px;padding-top:14px;} Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.