Hi guys, I'm a bit of a web noob to say the least, but I've been trying to build up my own site. I've used a template I found and liked, but I'm now having problems adapting it to what I want. The template can be seen here: www.mightymodding.com (hope it's OK linking it). I want to have some buttons in the space I've left from the shorter banner in the top right, of the same style as the ones on the left hand side. The ideal would be this: Two rows of 5 buttons. However, I don't have the CSS knowledge to work out what I need to edit The CSS file is here: http://mightymodding.com/andreas00.css Could anyone help me out? Thanks!
Just create two new AP divs where you want the two new menus to go, then copy the CSS over from the old menu, changing every mention of "leftside" to whatever you have named each new div. (the relevant CSS code is even labelled "left sidebar and menu"). Or stop cheating and read some tutorials online.
I know how frustrating it is when noone can help you.. you seem like you have a good website- here's the index.. I added the <div id="rightside" style="position: relative; left: 0px; top: 0px;"> so you can move the new buttons around (just change the numbers) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="A modding site devoted to reviews, guides and news. (prosser13)"> <meta name="keywords" content="case, modding, cases, mods, pc, pcs, mighty, modding, mighty modding, reviews, guides, prosser13, blog, mods, pc mods, pc, computers, computing, computer"> <meta name="author" content="prosser13/ Original design by Andreas Viklund - http://andreasviklund.com/"> <link rel="stylesheet" type="text/css" href="andreas00.css" media="screen,projection"> <title>Mighty Modding | Homepage</title> </head><body> <div id="wrap"> <div id="header"> <h1><a href="#">Mighty Midgets</a></h1> <div id="rightside" style="position: relative; left: 0px; top: 0px;"> <ul class="avmenu2" > <li><a href="http://www.mightymodding.com/2.html">#2</a> <a href="http://www.mightymodding.com/4.html">#4</a> <a href="http://www.mightymodding.com/6.html">#6</a> <a href="http://www.mightymodding.com/8.html">#8</a> <a href="http://www.mightymodding.com/10.html">#10</a> <a href="http://www.mightymodding.com/12.html">#12</a> </li></ul></div> <div id="rightside" style="position: relative; left: 0px; top: 0px;"> <ul class="avmenu2" > <li><a href="http://www.mightymodding.com/1.html">#1</a> <a href="http://www.mightymodding.com/3.html">#3</a> <a href="http://www.mightymodding.com/5.html">#5</a> <a href="http://www.mightymodding.com/7.html">#7</a> <a href="http://www.mightymodding.com/9.html">#9</a> <a href="http://www.mightymodding.com/11.html">#11</a> </li> </ul> </div></div> <div id="leftside"> <h2 class="hide">Site menu:</h2> <ul class="avmenu"> <li><a class="current" href="http://www.mightymodding.com/index.html">Home</a></li> <li><a href="http://www.mightymodding.com/projects.html">Projects</a></li> <li><a href="http://www.mightymodding.com/guides.html">Guides</a></li> <li><a href="http://www.mightymodding.com/reviews.html">Reviews</a></li> <li><a href="http://www.mightymodding.com/blog.html">Blog</a></li> <li><a href="http://www.mightymodding.com/forum/">Forums</a></li> <li><a href="http://www.mightymodding.com/contact.html">Contact</a></li> </ul> <div class="announce"> <h2>Latest news:</h2> <p><strong>Feb 14, 2008:</strong><br> First guide has been added! :)</p> <p class="textright"></p> </div> </div> <div id="extras"> <h2>Project Links:</h2> <ul> <li><a href="">Centurion 530</a></li> <li><a href="">Kai</a></li> </ul> <h2>Outside Links:</h2> <ul> <li><a href="http://www.cpcff.co.uk/" target="_blank">CPCFF</a></li> <li><a href="http://www.overclock.net/" target="_blank">Overclock.net</a></li> <li><a href="http://www.custompc.co.uk/" target="_blank">CustomPC</a></li> </ul> <ul> <li><a href="http://www.acryan.com/"><img src="Homepage_files/acryan.jpg"></a></li><br></ul> <ul> <li><object classid="clsid:D27CDB6E-AE6D-11cf-96B8- 444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab #version=6,0,0,0" id="mightymodding" width="129" align="" height="43"> <param name="movie" value="wcm logo.swf"><param name="quality" value="high"> <embed src="Homepage_files/wcm%2520logo.swf" quality="high" name="mightymodding" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" width="129" align="" height="43"> </object></li> </ul> </div> <div id="content"> <hr> <h3>Welcome to Mighty Modding!</h3> <hr> <p>Hi, and welcome.</p> <p>MightyModding is a collection of Project Logs, Guides and Reviews, all with detailed pictures and writeups. The guides and reviews will mainly be featured on modding products, although you may find items related to hardware, software, and other oddities!</p> <p>The blog is a collection of my random thoughts, opinions and views on various subjects to do with PCs - honestly, I'm not entirely sure what will show up in it, but I'll do my best to keep it updated! :)</p> <p>At the moment, the Forums are currently in a sort of mid-development stage (which is a nice way of saying I'm thinking about having them but I'm not sure they'll be worth the effort!)</p> <p>Content is lacking at the moment, but if you have any guides or reviews of your own, check out the Content page on how to add them. If you think your guide is worthy of being hosted, it probably is!</p> <p>Anyway, enjoy the site, check back reguarly for updates, and how about a bookmark too? ;)</p> <p><i>prosser13</i></p> </div> <div id="footer"> <p>Copyright © 2008| Design by <a href="http://andreasviklund.com/">Andreas Viklund</a> | <a href="http://www.xnavigation.net/" title="xNavigation gratis download - La risorsa italiana sul software">xNavigation</a></p> </div> </div> andreas00.css modify /* Right sidebar and menu */ section for different button colors on the new right side menu Code: /* Original design: andreas00 (v2.2 - Apr 24, 2008) - A free xhtml/css website template by Andreas Viklund. For more information, see http://andreasviklund.com/templates/andreas00/ */ /* Main layout and header */ body {background:url(img/bg.jpg) repeat-y top center #eaeaea; color:#3a3a3a; font:76% Verdana,Tahoma,Arial,sans-serif; line-height:1.4em; margin:0 auto; padding:0;} #wrap {background:#fff; color:#303030; margin:0 auto; padding:1px 5px; width:1060px;} #header {background:url(img/front.jpg) no-repeat bottom left #fff; color:#505050; height:250px; margin:0 0 10px; padding:0;} #header h1 {font-size:2.5em; font-weight:400; letter-spacing:-2px; margin:0 0 15px 15px; padding:15px 0 0;} #header h1 a,#header h1 a:hover {font-weight:400; padding:0;} #header p {font-size:1.1em; letter-spacing:-1px; margin:0 0 20px 15px; padding:0 0 0 3px;} /* Right sidebar and menu */ #rightside {float:right; margin:0 0 0px; padding:0; width:160px;} #rightside ul.avmenu2 {list-style:none; margin:0 0 10px; padding:0; width:150px;} #rightside ul.avmenu2 li {display:inline; padding:0; width:160px;} #rightside ul.avmenu2 li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;} #rightside ul.avmenu2 li a:hover,#rightside ul.avmenu2 li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border- bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;} #rightside ul.avmenu2 ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;} #rightside ul.avmenu2 ul a {padding:3px 1px 3px 5px; width:123px;} #rightside ul.avmenu2 ul ul {font-size:1em; width:120px;} #rightside ul.avmenu2 ul ul a {width:108px;} #rightside h2 {font-size:1.5em; font-weight:400;} #rightside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border -right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;} #rightside p,.announce p {font-size:0.9em;} /* Left sidebar and menu */ #leftside {clear:left; float:left; margin:0 0 10px; padding:0; width:150px;} #leftside ul.avmenu {list-style:none; margin:0 0 18px; padding:0; width:150px;} #leftside ul.avmenu li {display:inline; padding:0; width:150px;} #leftside ul.avmenu li a {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border -right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; float:left; font-size:1em; font-weight:700; margin-bottom:5px; padding:5px 1px 5px 5px; text-decoration:none; width:138px;} #leftside ul.avmenu li a:hover,#leftside ul.avmenu li a.current {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; border- bottom:1px solid #b0b0b0; border-left:4px solid #505050; border-right:1px solid #b0b0b0; border-top:1px solid #b0b0b0; color:#505050;} #leftside ul.avmenu ul {font-size:0.9em; margin:0 0 0 15px; padding:0 0 5px 0; width:133px;} #leftside ul.avmenu ul a {padding:3px 1px 3px 5px; width:123px;} #leftside ul.avmenu ul ul {font-size:1em; width:120px;} #leftside ul.avmenu ul ul a {width:108px;} #leftside h2 {font-size:1.5em; font-weight:400;} #leftside .announce {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border -right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; clear:left; color:#505050; line-height:1.3em; margin:10px 0; padding:5px 5px 5px; width:134px;} #leftside p,.announce p {font-size:0.9em;} /* Right sidebar */ #extras {float:right; margin:0 0 10px; padding:0; width:160px;} #extras p,#extras ul {font-size:0.9em; line-height:1.3em; margin:0 0 1.5em; padding:0;} #extras li {list-style:none; margin:0 0 6px; padding:0;} #extras h2 {font-size:1.5em; font-weight:400; letter-spacing:-1px; margin:0 0 6px;} /* Main content */ #content {line-height:1.5em; margin:10px 170px 10px 160px; padding:0; text- align:left;} #contentwide {line-height:1.5em; margin:10px 0 10px 160px; padding:0; text- align:left;} #content h2,#contentwide h2 {font-size:1.8em; font-weight:400; letter- spacing:-1px; margin:8px 0 10px; padding:0;} #content h3,#contentwide h3 {font-size:1.5em; font-weight:400; margin:6px 0; padding:0;} #content img,#contentwide img {background:#ccc; border:4px solid #f0f0f0; color:#303030; display:inline; padding:1px; margin:0 10px 5px 0;} #content ul,#content ol,#contentwide ul,#contentwide ol {margin:0 0 16px 20px; padding:0;} #content ul ul,#content ol ol,#contentwide ul ul,#contentwide ol ol {margin:2px 0 2px 15px;} #content li,#contentwide li {margin:0 0 2px 5px; padding:0 0 0 4px;} /* Footer */ #footer {background:#fff; border-top:2px solid #dadada; clear:both; color:#666; font-size:0.9em; margin:0 auto; padding:8px 0; text-align:center; width:760px;} #footer p {margin:0; padding:0;} #footer a {background:inherit; color:#666; font-weight:400; text- decoration:none;} #footer a:hover {text-decoration:underline;} #footer span {font-size:1.2em;} /* Links and paragraphs */ a {background:inherit; color:#166090; text-decoration:none; font-weight:700;} a:hover {background:inherit; color:#286ea0; text-decoration:underline;} a img {border:0;} p {margin:0 0 16px;} blockquote {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border-bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; margin:16px; padding:7px 7px 7px 11px;} blockquote p {font-size:1.1em; line-height:1.3em; margin:0;} /* Tables and forms */ table {border:1px solid #d8d8d8; border-collapse:collapse; line-height:1.3em; width:95%; margin:0 0 16px; padding:0;} caption {font-size:1.5em; font-weight:400; margin:0; padding:6px 0 8px; text -align:left;} th {background:url(img/menubg2.gif) repeat-x bottom left #eaeaea; color:#505050; padding:7px; text-align:left;} td {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; color:#303030; font-size:0.9em; padding:7px; text-align:left;} input,textarea {border:1px solid #ccc; font-family:Verdana,Tahoma,Arial,Sans -Serif; font-size:1em; margin:0; padding:4px;} label {margin:2px 0 2px 0; font-size:1.2em;} input {width:200px;} textarea {width:400px;} /* Search box */ #searchbox label,.hide {display:none;} #searchbox {margin:6px 0 16px; padding:0;} #searchform {background:#fff; border:1px solid #ccc; color:#505050; font- size:0.9em; padding:4px; width:116px;} /* Additional classes */ .announce h2 {margin:0 0 10px; padding:0;} .textright {margin:-10px 0 4px; text-align:right;} .center {text-align:center;} .small {font-size:0.8em;} .large {font-size:1.3em;} .red {color:red;} .green {color:green;} .blue {color:blue;} .highlighted {background:#f0f0f0; border:1px solid #b0b0b0; color:#303030; padding:3px;} .button {background:url(img/menubg.gif) repeat-x bottom left #f4f4f4; border -bottom:1px solid #d8d8d8; border-left:4px solid #ccc; border-right:1px solid #d8d8d8; border-top:1px solid #d8d8d8; color:#505050; font-weight:400; font- size:1.2em; margin:0 0 15px; padding:7px 7px 7px 11px; width:120px;} .left {float:left; margin:10px 10px 5px 0;} .right {float:right; margin:10px 0 5px 10px;}
hey hippoz great work man, i was also curious to know about.But i have just checked this site & it seems that he has messed up with it, hope this will solve his problem.
thehippoz - thank you so much! I used the code you gave me and had a play around and it's perfect, just what I was after. Thanks!
looks good man =] yeah you can put as many buttons up there as you want- the modding forum looks interesting.. gl with the site thanks barack
