Jump to content

sidebars


pedromartins
 Share

Recommended Posts

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

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

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

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

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.