Webmaster Forum

Go Back   Webmaster Forum > Web Development > Coding Forum

Coding Forum Problems with your code? Discuss coding issues, including JavaScript, PHP & MySQL, HTML & CSS, Flash & ActionScript, and more.


Reply
 
LinkBack Thread Tools Display Modes
Share |
  #1 (permalink)  
Old 03-01-2012, 01:57 PM
Contributing Member
Latest Blog:
None

 
Join Date: 01-14-12
Posts: 56
iTrader: 0 / 0%
Change these buttons to links ? Help !

Hello,

I have been working on a new website and design. I have only done 1/4 of the index page to work on.

So see this picture, I have this image as a header on the site;

http://www.v7n.com/forums/attachment...1&d=1330638679


And on the long white bar on the site i have put links on it like this ;

http://www.v7n.com/forums/attachment...1&d=1330638836

But it does not look good

How do you think i could change the header/html to have menu buttons ? And when you hover your mouse over the button a sub menu appears ?

I would be great full if someone could do this

Here is the html code :

Code:
<!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>Home | Drop Host</title> <style type="text/css"> body{ background-image:url(Images/body-bg.jpg); background-repeat:repeat-x; margin: 0px 0px 0px 0px; font-family:Verdana; background-color: #F0F4F7; } #wrapper {margin: 0 auto; width: 980px;} #logobanner {width: 982px; height: 111px; background-image:url(Images/logotopbanner.jpg); background-repeat:no-repeat; margin-top:0px;} #logobannertext {padding-left:337px;padding-top:66px; font-size:14px;} #mainbanner {width: 982px; height: 329px; background-image:url(Images/mainbanner.jpg); background-repeat:no-repeat; margin-top:-25px;} #mainbannerkeytext {padding-left:170px;padding-top:190px; color:#FFFFFF; font-size:14px;} #topsignup{margin-left:675px;margin-top:-65px;} .signupbtn {display: block; width:202px; height:66px; background: url(Images/top-signupbtn.png); background-repeat:no-repeat; text-indent: -99999px;} .signupbtn:hover { background-image: url(Images/top-signup-hover.png); background-repeat:no-repeat;} #MainContent {width:982px; min-height: 900px; background-color: #d9d7d7;} #LeftColumn {width:678px; float:left; height:auto;margin-top:20px;padding-left:10px;} #RightColumn{width:274px; float:right;height:auto;margin-top:20px; padding-left:10px;} .rightback1{width:196px; height:53px; background-image:url(Images/right-back-banner1.png); background-repeat:no-repeat; padding-left:60px;padding-top:5px;} .rightback2{width:196px; height:53px; background-image:url(Images/right-back-banner2.png); background-repeat:no-repeat; padding-left:60px;padding-top:5px;} .rightback3{width:196px; height:53px; background-image:url(Images/right-back-banner3.png); background-repeat:no-repeat; padding-left:60px;padding-top:5px;} .package{width:310px;height:232px; background-image:url(Images/package-bg.png); background-repeat:no-repeat;display:block;} .packagepricetxt{margin-left:205px;padding-top:20px;font-size: 24px; color:#FFFFFF;} .packagemaintxt{margin-left:-200px;margin-top:-60px;width:300px;} .style3 {font-size: 10px} .style7 { font-size: 14px; color: #000000; } .style12 { color: #3B4576; font-size: 14px; font-weight: bold; } .style14 {color: #3B4576; font-weight: bold; } .style16 {color: #134576; font-weight: bold; } </style> </head> <body> <div id="wrapper"> <div id="logobanner"> <div id="logobannertext"><a href="#">Link 1</a> | <a href="#">Link 2</a>| <a href="#">Link 3</a> | <a href="#">Link 4</a> |<a href="#">Link 5</a> | <a href="#">Link 6</a> | <a href="#">Link 7</a> | <a href="#">Link 8</a> | <a href="#">Link 9</a> |<a href="#"> Link 10</a> | <a href="#">Link 11</a></div> </div> <div id="mainbanner"> <div id="mainbannerkeytext"> ▪ 3000MB Storage Space<br/> ▪ Unlimited Bandwidth<br /> ▪ CPANEL with Softaculous App Installer<br /> ▪ Rv Site Builder (create your site with no coding!!)<br /> ▪ LiteSpeed Powered Host <br /> </div> <div id="topsignup"> <a class="signupbtn" href="#">signup</a> </div> </div> <!-- End Main Banner --> <div id="MainContent"> <!-- Start Of Main Content --> <div id="LeftColumn"> <h2>Why Host With Us?</h2> <table width="620" border="0" cellpadding="10"> <tr> <th width="32" scope="col"><img src="Images/whyicon1.png" width="32" height="32" /></th> <td width="231" scope="col" valign="top"><span class="style16">Value For Money!</span><br /> <span class="style3">With our hosting starting from $3.95 a month we are offering excellent value for money.</span><br /> </td> <th width="32" scope="col"><img src="Images/whyicon3.png" width="32" height="32" /></th> <td width="235" valign="top" scope="col"><span class="style16">No Minimum Contract</span><br /> <span class="style3">You can cancel your service any time you like, we donít have fixed contracts.</span><br /> </td> </tr> <tr> <td><img src="Images/whyicon2.png" width="32" height="32" /></td> <td valign="top"><span class="style16">New Businesses</span><br /> <span class="style3">We like to help and offer the best professional service and support to help your growing business.</span></td> <td><img src="Images/whyicon4.png" width="32" height="32" /></td> <td valign="top"><span class="style16">Litespeed Powered</span><br /> <span class="style3">9x Faster then Apache Hosting with better DDos protection.</span></td> </tr> </table> <div class="package" style="float:left;"> <div class="packagepricetxt"> <div align="center">$2.95<br /> <span class="style3">/month</span></div> <div class="packagemaintxt"> <p class="style14">Yes Package 1</p> <p><span class="style7"> √ <strong>3GB</strong> RAID Protected Storage<br /> √ <strong>50GB</strong> Premium Data Transfer<br /> √ <span class="style14">Litespeed</span> Web Server<br /> √ Latest </span><span class="style12">Cpanel</span><span class="style7"> with <span class="style14">Softaculous</span><br /> √ <span class="style14">Hourly</span> R1Soft CDP Backups<br /> √ <span class="style14">FMPEG</span> Hosting</span></p> </div> </div> </div> <div class="package" style="float:right;"> <div class="packagepricetxt"> <div align="center">$4.95<br /> <span class="style3">/month</span></div> <div class="packagemaintxt"> <p class="style14">Yes Package 2</p> <p><span class="style7"> √ <strong>10GB</strong> RAID Protected Storage<br /> √ <strong>Unlimited</strong> Data Transfer<br /> √ <span class="style14">Litespeed</span> Web Server<br /> √ Latest </span><span class="style12">Cpanel</span><span class="style7"> with <span class="style14">Softaculous</span><br /> √ <span class="style14">Hourly</span> R1Soft CDP Backups<br /> √ <span class="style14">FMPEG</span> Hosting</span></p> </div> </div> </div> </div> <div id="RightColumn"> <div class="rightback1"> 30 Day Money Back<br /> <span class="style3">If your not satisfied with our<br /></span><span class="style3"> service. No questions asked</span> </div> <div class="rightback2"> 99.9% Server Uptime<br /> <span class="style3">Giving you peace of mind knowing your site will always be online</span></div> <div class="rightback3"> 24/7 Customer Support<br /> <span class="style3">Support availiable on our phone number or online help system</span></div> </div> </div> </div> </body> </html>
Attached Thumbnails
Change these buttons to links ? Help !-logotopbanner.jpg   Change these buttons to links ? Help !-2.png  
 
Reply With Quote
  #2 (permalink)  
Old 03-01-2012, 02:12 PM
Contributing Member
Latest Blog:
None

 
Join Date: 01-14-12
Posts: 56
iTrader: 0 / 0%
EDIT: I have uploaded all the files for you;

http://giffhost.co.uk/beta/DropHost/ Homepage

And

http://giffhost.co.uk/beta/DropHost/Images

For images
 
Reply With Quote
  #3 (permalink)  
Old 03-01-2012, 03:26 PM
ScriptMan's Avatar
Super Moderator
 
Join Date: 02-10-07
Location: Central Kentucky
Posts: 11,818
iTrader: 4 / 100%
I will tell you what to do, at least the button part but I won't do it for you.

Just create the images and stack them in the div. Harder if you want to change the color from white.

The drop-down part will need to be java or CSS. The source code for both are out there and free to use with attribution.

If you want to pay someone you really should open a marketplace thread.
__________________
SEO does not mean Spam Everywhere Online
Scriptman's Playhouse || Ramblings from an old man
 
Reply With Quote
  #4 (permalink)  
Old 03-01-2012, 05:19 PM
Banned
Latest Blog:
None

 
Join Date: 05-01-06
Location: I live in the real world!
Posts: 329
iTrader: 0 / 0%
I think rounded tabs would look better
 
Reply With Quote
  #5 (permalink)  
Old 03-02-2012, 09:39 AM
Contributing Member
Latest Blog:
None

 
Join Date: 01-14-12
Posts: 56
iTrader: 0 / 0%
Thanks i am looking at the rounded tabs
 
Reply With Quote
  #6 (permalink)  
Old 03-04-2012, 06:14 AM
Banned
 
Join Date: 02-23-12
Location: Germany
Posts: 6
iTrader: 0 / 0%
Hey just use one of these great css menues:
dynamicdrive.com/style/

They are really simple to integrate and cross-browser-compatible
 
Reply With Quote
Go Back   Webmaster Forum > Web Development > Coding Forum

Reply


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are Off
Pingbacks are Off
Refbacks are Off



V7N Network
Get exposure! V7N I Love Photography V7N SEO Blog V7N Directory


All times are GMT -7. The time now is 07:30 PM.
Powered by vBulletin
Copyright © 2000-2014 Jelsoft Enterprises Limited.
Copyright © 2003 - 2014 Escalate Media




Search Engine Optimization by vBSEO 3.6.0 RC 2 ©2011, Crawlability, Inc.