pedromartins Posted June 22, 2012 at 11:07 PM Report Share #465059 Posted June 22, 2012 at 11:07 PM boas pessoal (: é assim estou a começar a realizar a minha pap e estou a fazer um website e estou com uns problemazitos, estou a tentar fazer 3 sidebars do mesmo lado, cada uma vai conter 5 links, mas o problema e que nao as consigo fazer com que as informacoes nao evadam outras divs (ex a informacao da div a fique por cima da div b) Link to comment Share on other sites More sharing options...
pikax Posted June 23, 2012 at 12:25 AM Report Share #465077 Posted June 23, 2012 at 12:25 AM Infelizmente nao sou bruxo... se nao meteres codigo eu nao irei advinhar qual e' o teu erro... Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender. A beleza de um código está em decompor problemas complexos em pequenos blocos simples. "learn how to do it manually first, then use the wizzy tool to save time." "Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast." Link to comment Share on other sites More sharing options...
pedromartins Posted June 23, 2012 at 02:26 PM Author Report Share #465117 Posted June 23, 2012 at 02:26 PM index.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>PAP</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="Enlighten Designs" /> <style type="text/css" media="all">@import "css/style.css";</style> <style type="text/css" media="all">@import "css/style.css";</style> </head > <body> <div id="page-container"> <div id="main-nav"> <dl> <dt id="about"><a href="#">About</a></dt> <dt id="services"><a href="#">Services</a></dt> <dt id="portfolio"><a href="#">Portfolio</a></dt> <dt id="contact"><a href="#">Contact Us</a></dt> </dl> </div> <div id="header"> <h1><img src="images/header2.jpg" width="236" height="36" alt="pap" border="0" /></h1> </div> <div id="sidebar-a"> <div class="padding"> <h1>Resolução de Problemas</h1> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> </div> </div> <div id="sidebar-b"> <div class="padding"> <h1>Tweaking</h1> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> </div> </div> <div id="sidebar-c"> <div class="padding"> <h1>Tweaking</h1> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> </div> </div> <div id="content"> <h2><img src="images/about.gif" width="54" height="14" alt="About" /></h2> <p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p> <p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p> <h2><img src="images/contact.gif" width="98" height="14" alt="Contact Us" /></h2> <p>Phone: (07) 853 6060 Fax: (07) 853 6060 Email: <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a> P.O Box: 14159, Hamilton, New Zealand</p> <p><a href="#">More contact information…</a></p> </div> <div id="footer"> <div id="altnav"> <a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a> </div> <div id="copyright"> Copyright © Pedro Martins e Ricardo Jorge</br> Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a></div> </div> </body> </html> ficheiro css #page-container { width: 760px; margin: auto; text-align: left; } #main-nav { height: 50px; } /* IE5 Mac Hack \*/ #main-nav { padding-left: 11px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ #main-nav dl { margin: 0; padding: 0; } #main-nav dt { float: left; } #main-nav dt a { display: block; height: 0px !important; height /**/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0; overflow: hidden; background-repeat: no-repeat; } #main-nav dt a:hover { background-position: 0 -50px; } #main-nav dt#about, #main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); } #main-nav dt#services, #main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); } #main-nav dt#portfolio, #main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); } #main-nav dt#contact, #main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); } #header { height: 150px; background: #db6d16 url(../images/header.jpg); } #sidebar-a { position:absolute;; width: 280px; line-height: 18px; right:100px; padding: 0 10px 10px 10px; } #sidebar-a h1 { font: normal 1.7em Georgia, "Times New Roman", Times, serif; /* color: #74743D; */ color: #6C6E3A; padding: 0; margin: 0 0 10px 5px; letter-spacing:-1px; } #sidebar-a h2 { font-family: Lucidatypewriter, monospace; font-size: 12px; color: #000; margin: 0 0 10px 5px; letter-spacing:-1px; font-weight:normal; letter-spacing: 1px; text-transform: lowercase; text-align:right; } #sidebar-a .padding { padding: 25px; } #sidebar-b { position:absolute; width: 280px; line-height: 18px; margin-top: 200px; right:100px; padding: 0 10px 10px 10px; } #sidebar-b h1 { font: normal 1.7em Georgia, "Times New Roman", Times, serif; /* color: #74743D; */ color: #6C6E3A; padding: 0; margin: 0 0 10px 5px; letter-spacing:-1px; } #sidebar-b h2 { font-family: Lucidatypewriter, monospace; font-size: 12px; color: #000; margin: 0 0 10px 5px; letter-spacing:-1px; font-weight:normal; letter-spacing: 1px; text-transform: lowercase; } #sidebar-b .padding { padding: 25px; } #sidebar-c { width: 280px; line-height: 18px; position:absolute; margin-top: 400px; right:100px; padding: 0 10px 10px 10px; } #sidebar-c h1 { font: normal 1.7em Georgia, "Times New Roman", Times, serif; /* color: #74743D; */ color: #6C6E3A; padding: 0; margin: 0 0 10px 5px; letter-spacing:-1px; } #sidebar-c h2 { font-family: Lucidatypewriter, monospace; font-size: 12px; color: #000; margin: 0 0 10px 5px; letter-spacing:-1px; font-weight:normal; letter-spacing: 1px; text-transform: lowercase; text-align:right; } #sidebar-c .padding { padding: 25px; } #content { margin-right: 280px; line-height: 18px; padding: 20px 0px 0px 0px; } #content .padding { padding: 0 20px 20px 25px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } #footer { clear: both; font-family: Tahoma, Arial, Helvetica, Sans-serif; font-size: 10px; color: #c9c9c9; border-top: 1px solid #efefef; padding: 13px 25px; line-height: 18px; } #footer a { color: #c9c9c9; text-decoration: none; } #footer a:hover { color: #db6d16; } #footer #altnav { clear: both; width: 350px; float: right; text-align: right; padding-top: 13px; } #footer #copyright { padding-top: 13px; } .hidden { display: none; } h1 { margin: 0; padding: 0; float: right; margin-top: 48px; padding-right: 500px; } html, body { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; text-align: center; } body.about dt#about, body.about dt#about a, body.about dt#about a:hover, body.services dt#services, body.services dt#services a, body.services dt#services a:hover, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.portfolio dt#portfolio a:hover, body.contact dt#contact, body.contact dt#contact a, body.contact dt#contact a:hover { background-position: 0 -100px; } a:link { COLOR: #000; } a:visited { COLOR: #000; } a:hover { COLOR: #00DDFF; } a:active { COLOR: #00DDFF; } Link to comment Share on other sites More sharing options...
pikax Posted June 23, 2012 at 05:10 PM Report Share #465133 Posted June 23, 2012 at 05:10 PM nao tens isso online? e' que fica mais facil para eu utilizar o firebug para ver o problema Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender. A beleza de um código está em decompor problemas complexos em pequenos blocos simples. "learn how to do it manually first, then use the wizzy tool to save time." "Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast." Link to comment Share on other sites More sharing options...
pedromartins Posted June 23, 2012 at 05:42 PM Author Report Share #465137 Posted June 23, 2012 at 05:42 PM não meu, tenho isso no meu pc, mas se quiseres agora posso pô-lo s: Link to comment Share on other sites More sharing options...
pikax Posted June 25, 2012 at 07:23 AM Report Share #465291 Posted June 25, 2012 at 07:23 AM fiz isto um pouco 'a presa: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <title>PAP</title> <meta http-equiv="Content-Language" content="en-us" /> <meta http-equiv="imagetoolbar" content="no" /> <meta name="MSSmartTagsPreventParsing" content="true" /> <meta name="description" content="Description" /> <meta name="keywords" content="Keywords" /> <meta name="author" content="Enlighten Designs" /> <style type="text/css" media="all">@import "css/style.css";</style> </head> <body> <div id="page-container"> <div id="main-nav"> <dl> <dt id="about"><a href="#">About</a></dt> <dt id="services"><a href="#">Services</a></dt> <dt id="portfolio"><a href="#">Portfolio</a></dt> <dt id="contact"><a href="#">Contact Us</a></dt> </dl> </div> <div id="header"> <h1><img src="images/header2.jpg" width="236" height="36" alt="pap" border="0" /></h1> </div> <div id="sidebar"> <div id="sidebar-a"> <div class="padding"> <h1>Resolução de Problemas</h1> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> </div> </div> <div id="sidebar-b"> <div class="padding"> <h1>Tweaking</h1> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> </div> </div> <div id="sidebar-c"> <div class="padding"> <h1>Tweaking</h1> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> <h2><a href="#"><strong>Formatar Windows XP</strong></a></h2> </div> </div> </div> <div id="content"> <h2><img src="images/about.gif" width="54" height="14" alt="About" /></h2> <p><strong>Enlighten Designs</strong> is an Internet solutions provider that specialises in front and back end development. To view some of the web sites we have created view our portfolio.</p> <p>We are currently undergoing a 'face lift', so if you have any questions or would like more information about the services we provide please feel free to contact us.</p> <h2><img src="images/contact.gif" width="98" height="14" alt="Contact Us" /></h2> <p>Phone: (07) 853 6060 Fax: (07) 853 6060 Email: <a href="mailto:info@enlighten.co.nz">info@enlighten.co.nz</a> P.O Box: 14159, Hamilton, New Zealand</p> <p><a href="#">More contact information…</a></p> </div> <div id="footer"> <div id="altnav"> <a href="#">About</a> - <a href="#">Services</a> - <a href="#">Portfolio</a> - <a href="#">Contact Us</a> - <a href="#">Terms of Trade</a> </div> <div id="copyright"> Copyright © Pedro Martins e Ricardo Jorge</br> Powered by <a href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and <a href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a></div> </div> </body> </html> #page-container { width: 760px; margin: auto; text-align: left; } #main-nav { height: 50px; } /* IE5 Mac Hack \*/ #main-nav { padding-left: 11px; } /*/ #main-nav { padding-left: 11px; overflow: hidden; } /* End Hack */ #main-nav dl { margin: 0; padding: 0; } #main-nav dt { float: left; } #main-nav dt a { display: block; height: 0px !important; height /**/:50px; /* IE 5/Win hack */ padding: 50px 0 0 0; overflow: hidden; background-repeat: no-repeat; } #main-nav dt a:hover { background-position: 0 -50px; } #main-nav dt#about, #main-nav dt#about a { width: 71px; background-image: url(../images/nav/about.gif); } #main-nav dt#services, #main-nav dt#services a { width: 84px; background-image: url(../images/nav/services.gif); } #main-nav dt#portfolio, #main-nav dt#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); } #main-nav dt#contact, #main-nav dt#contact a { width: 106px; background-image: url(../images/nav/contact.gif); } #header { height: 150px; background: #db6d16 url(../images/header.jpg); } #sidebar { float:right; } #sidebar-a { } #sidebar-a h1 { font: normal 1.7em Georgia, "Times New Roman", Times, serif; /* color: #74743D; */ color: #6C6E3A; padding: 0; margin: 0 0 10px 5px; letter-spacing:-1px; } #sidebar-a h2 { font-family: Lucidatypewriter, monospace; font-size: 12px; color: #000; margin: 0 0 10px 5px; letter-spacing:-1px; font-weight:normal; letter-spacing: 1px; text-transform: lowercase; text-align:right; } #sidebar-b { } #sidebar-b h1 { font: normal 1.7em Georgia, "Times New Roman", Times, serif; /* color: #74743D; */ color: #6C6E3A; padding: 0; margin: 0 0 10px 5px; letter-spacing:-1px; } #sidebar-b h2 { font-family: Lucidatypewriter, monospace; font-size: 12px; color: #000; margin: 0 0 10px 5px; letter-spacing:-1px; font-weight:normal; letter-spacing: 1px; text-transform: lowercase; } #sidebar-b .padding { } #sidebar-c { } #sidebar-c h1 { font: normal 1.7em Georgia, "Times New Roman", Times, serif; /* color: #74743D; */ color: #6C6E3A; padding: 0; margin: 0 0 10px 5px; letter-spacing:-1px; } #sidebar-c h2 { font-family: Lucidatypewriter, monospace; font-size: 12px; color: #000; margin: 0 0 10px 5px; letter-spacing:-1px; font-weight:normal; letter-spacing: 1px; text-transform: lowercase; text-align:right; } #sidebar-c .padding { padding: 25px; } #content { margin-right: 280px; line-height: 18px; padding: 20px 0px 0px 0px; } #content .padding { padding: 0 20px 20px 25px; } #content h2 { margin: 0; padding: 0; padding-bottom: 15px; } #content p { margin: 0; padding: 0; padding-bottom: 15px; } #footer { clear: both; font-family: Tahoma, Arial, Helvetica, Sans-serif; font-size: 10px; color: #c9c9c9; border-top: 1px solid #efefef; padding: 13px 25px; line-height: 18px; } #footer a { color: #c9c9c9; text-decoration: none; } #footer a:hover { color: #db6d16; } #footer #altnav { clear: both; width: 350px; float: right; text-align: right; padding-top: 13px; } #footer #copyright { padding-top: 13px; } .hidden { display: none; } h1 { margin: 0; padding: 0; float: right; margin-top: 48px; padding-right: 500px; } html, body { margin: 0; padding: 0; } body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; text-align: center; } body.about dt#about, body.about dt#about a, body.about dt#about a:hover, body.services dt#services, body.services dt#services a, body.services dt#services a:hover, body.portfolio dt#portfolio, body.portfolio dt#portfolio a, body.portfolio dt#portfolio a:hover, body.contact dt#contact, body.contact dt#contact a, body.contact dt#contact a:hover { background-position: 0 -100px; } a:link { COLOR: #000; } a:visited { COLOR: #000; } a:hover { COLOR: #00DDFF; } a:active { COLOR: #00DDFF; } Por muito mais que que estude só aprendo uma coisa, que ainda tenho muita coisa para aprender. A beleza de um código está em decompor problemas complexos em pequenos blocos simples. "learn how to do it manually first, then use the wizzy tool to save time." "Kill the baby, don't be afraid of starting all over again. Fail soon, learn fast." Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now