1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

Banner e CSS

Discussão em 'Web Development' iniciada por Godlike_Killer, 4 de Novembro de 2007. (Respostas: 1; Visualizações: 2308)

  1. Godlike_Killer

    Godlike_Killer Power Member

    Tenho um ttrabalho para fazer k consiste em alterar as cores de um site e criar um novo banner para esse mesmo site... No Dreamweaver o banner cabe no espaço destinado para o efeito mas quando o abro com o browser fica com um espaço em branco a direita...
    Penso que seja alguma coisa no CSS mas como ainda nao o dei nas aulas estou um bocado a nora... O codigo e este:

    Código:
    [FONT=monospace][LIST=1]
    [*]CSS
    [*] 
    [*]/*---------------------------------------
    [*]GENERAL LAYOUT RULES
    [*]----------------------------------------*/
    [*] 
    [*]* {                                                     margin: 0; padding: 0; } /* sets all margin and padding (browser defaults) 
    [*]                                                                back to zero for ease of use */
    [*]body {                                                  background: url("../display_images/bg.gif") repeat; }
    [*]div#container {                                 width: 85%; margin: 10px auto; text-align: center; 
    [*]                                                                background-color: #fff; border: 1px solid #aaa; }
    [*]                                                                /* centers layout (text-align: center for IE), defines overall 
    [*]                                                                width and sets background colour of main container div */
    [*]div#container * {                               text-align: left; }
    [*]                                                                /* restores text-align to left in elements contained in container 
    [*]                                                                div */
    [*]div#header {
    [*]        position: inherit;
    [*]        width: 872px;
    [*]        height: 150px;
    [*]        float: none;
    [*]        background: url(../display_images/banner.jpg) no-repeat top left;
    [*]        margin: 0px;
    [*]        padding: 0px;
    [*]}
    [*]                                                                /* defines header background image (1600px x 150px image with
    [*]                                                                overflow: hidden) */
    [*]div#sidebar {                                   width: 18%; padding: 1%; 
    [*]                                                                background: #663333 url("../display_images/sidebar_bg.jpg") no-repeat top left; 
    [*]                                                                float: left; }
    [*]div#content {                                   width: 76%; padding: 1% 2%; float: left; }
    [*]                                                                /* padding+width of #sidebar and padding+width of #content must 
    [*]                                                                add up to 100% */
    [*]* html div#content {                    width: 75%; }
    [*]                                                                /* hack for IE due to float problem (makes content div 1% 
    [*]                                                                narrower so it doesn't float below the sidebar) */
    [*]div#footer {                                    width: 98%; padding: 1%; clear: both; background-color: #ccc; }
    [*]div#header div.header_text {    position: absolute; bottom: 62px; left: 376px; color: #fff; }
    [*]                                                                /* position and colour of header text */
    [*] 
    [*]/*---------------------------------------
    [*]GENERAL STYLING
    [*]----------------------------------------*/
    [*] 
    [*]p {                                                     margin: 10px 0 0 0; line-height: 1.5; }
    [*]h1,h2,h3,h4,h5,h6 {                     margin: 0 0 15px 0; }
    [*]html, body, div {                               font-family: "Lucida Sans", Arial, Verdana, Helvetica, sans-serif; 
    [*]                                                                font-size: 95%; }
    [*]blockquote {                                    padding: 2%; background-color: #fff; 
    [*]                                                                border: 1px solid #ccc; text-indent: 20px; }
    [*] 
    [*]/*---------------------------------------
    [*]DEFAULT LINK STYLES
    [*]----------------------------------------*/
    [*] 
    [*]a {                                                     color: #663333; font-weight: bold; text-decoration: none; }
    [*]a:hover {                                               text-decoration: underline; }
    [*] 
    [*]/*---------------------------------------
    [*]HEADER STYLES
    [*]----------------------------------------*/
    [*] 
    [*]div#header div.header_text a {                  color: #fff; text-decoration: none; }
    [*]div#header div.header_text a:hover {    border-bottom: 2px solid #fff; }
    [*]div#header h1, div#header p {                   margin: 0px; }
    [*]                                                                                /* overrides h1 and p default margins */
    [*]                                                                
    [*]/*---------------------------------------
    [*]SIDEBAR STYLES
    [*]----------------------------------------*/
    [*] 
    [*]#sidebar {                                              color: #fff; }
    [*]#sidebar a {                                    color: #fff; }
    [*]#sidebar h3 {                                   color: #BEAEA5; text-align: right; border-bottom: 1px solid #BEAEA5; margin: 5px 0; }
    [*]#sidebar p {                                    line-height: 1.0; }
    [*]ul#navigation , ul#links {              list-style-type: none; }
    [*]                                                                /* set nav and links ul to display no bullets */
    [*]ul#navigation li {                              display: block; width: 96%; border: 1px solid #663333; margin-bottom: 5px;
    [*]                                                                padding: 2%; background-color: #CFBFC0; }
    [*]ul#navigation li a {                    color: #663333; }
    [*] 
    [*]/*---------------------------------------
    [*]CONTENT STYLES
    [*]----------------------------------------*/
    [*] 
    [*]div.item {                                              margin-bottom: 20px; }
    [*]div.item h3 {                                   border: 1px solid #ccc; background: #eee; padding: 10px; position: relative; }
    [*]                                                                /* position:relative fixes random IE bug which means borders aren't displayed */
    [*] 
    [*]HTML
    [*] 
    [*]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    [*]<html xmlns="http://www.w3.org/1999/xhtml">
    [*]<head>
    [*]<title>Pro Inform&aacute;tca</title>
    [*]<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    [*]<meta name="description" content="An XHTML 1.0/CSS standards-compliant open source template" />
    [*]<meta name="author" content="Dan Abrey" />
    [*]<link rel="stylesheet" type="text/css" href="css/main.css" />
    [*]<style type="text/css" media="all">
    [*]@import "css/main.css";
    [*]</style>
    [*]</head>
    [*]<body lang="en">
    [*]<div id="container">
    [*]  <div id="header"></div>
    [*]  <div id="sidebar">
    [*]    <h1>Links</h1>
    [*]    <p>A Empresa<br />
    [*]      Produtos<br />
    [*]      Promo&ccedil;&otilde;es<br />
    [*]</p>
    [*]    </div>
    [*]  <div id="content">
    [*]    <p align="justify">A Pro Inform&aacute;tica &eacute; uma loja onde pode  encontrar todo o tipo de material inform&aacute;tico.<br />
    [*]Somos uma empresa jovem e  din&acirc;mica que se encontra no mercado desde 2002 visando o melhor para os nossos  clientes, desde a qualidade dos produtos que comercializamos, at&eacute; &agrave; sua  assist&ecirc;ncia t&eacute;cnica.<br />
    [*]A Pro Inform&aacute;tica apresenta pre&ccedil;os  muito competitivos num mercado que se apresenta cada vez mais exigente,  assegurando elevados padr&otilde;es de qualidade nos seus produtos e servi&ccedil;os.<br />
    [*]Temos vindo a implantar um  mercado inovador quer no que diz respeito &aacute; variedade de produtos, muito pouco  comum no nosso pa&iacute;s, tentando fazer chegar ao nosso mercado as &uacute;ltimas  novidades, que em muitas circunst&acirc;ncias nos permitem evoluir ao mais alto n&iacute;vel  no campo da tecnologia.<br />
    [*]O apoio dos nossos clientes tem  sido fundamental para que possamos obter um crescimento sustentado e com ele  retribuir esse apoio atrav&eacute;s de melhorias constantes no dia a dia.<br />
    [*]Em 2006 mudamos as nossas  instala&ccedil;&otilde;es para uma &aacute;rea de 300m2 com um &oacute;ptimo estacionamento junto &agrave; maior  &aacute;rea comercial de Vila Nova de Gaia. Possu&iacute;mos uma &aacute;rea de atendimento a  publico com mais de 100m2 onde poder&aacute; encontrar uma exposi&ccedil;&atilde;o muito pouco  vulgar e bastante futurista. Inova&ccedil;&atilde;o que n&atilde;o termina aqui, visto termos criado  um servi&ccedil;o p&oacute;s venda personalizado com assist&ecirc;ncia t&eacute;cnica qualificada.<br />
    [*]Mas sem duvida que para quem  nunca teve oportunidade de nos visitar pessoalmente que melhor exemplo do que o  nosso <em>site</em> em www.proinformatica.pt que acompanhou e de que maneira a  evolu&ccedil;&atilde;o em termos de &aacute;rea comercial. &Eacute; um verdadeiro espelho da nossa nova  loja, inovador, moderno, eficiente, apresenta muitas vantagens para quem deseja  fazer compras on-line com seguran&ccedil;a, encontrar o m&aacute;ximo de informa&ccedil;&atilde;o  relativamente aos produtos e verificar a disponibilidade dos mesmos com a nova  informa&ccedil;&atilde;o de stocks.<br />
    [*]A Pro Inform&aacute;tica continua a  permitir que efectue as compras no conforto da sua casa ou no emprego  usufruindo de pre&ccedil;os baixos a qualquer hora do dia ou da noite.<br />
    [*]Boas compras!</p>
    [*]  </div>
    [*]        <div id="footer">
    [*]                <p>&nbsp;</p>
    [*]        </div>
    [*]</div>
    [*]</body>
    [*]</html>
    [/LIST]Se me puderem ajudar ficava muito agradecido
    [/FONT]
     
  2. ninja_corp

    ninja_corp Power Member

    Companheiro...

    Lá código colaste tu... heheheheh Olha lá, no código HTML não esta nenhum SWF! Convinha identificares a DIV onde isso vai ficar para te podermos ajudar! E ja agora as medidas do banner!

    Peace!
     

Partilhar esta Página