Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom dia pessoal,
Estou tentando fazer um site com CSS... :D
O site tem um cabeçalho (100 % ok), depois do cabeçalho, vem a área útil...
Uma lateral na esquerda com as opções e uma na direita com um texto (um blog).
Fiz uma lista de links (a esquerda) e um local de texto a direita (um container)..
A duvida é a seguinte... Se o meu texto é pequeno, o lado esquerdo fica sem fundo... tem como resolver?
Sou iniciante em CSS..
Segue o codigo em CSS... (modificado de um exemplo do Zen Garden)
body { margin: 0; padding: 0; color: #333; font: 13px Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; background: #E2EBED; text-align: center; }/ Cor do link /a { color: #307082; }/ Quando o cursor estiver em cima do link /a:hover { color: #D60808; } acronym { border: none; }#preambulo h3 span, #explicacao h3 span, #participacao h3 span, #benefits h3 span, #requirements h3 span, #lresources h3.resources span, #larchives h3.archives span, #lselect h3.select { display:none; }#container { margin: 0 auto; width: 724px; position: relative; background: #fff; padding: 0 10px 0 10px; text-align: left; } html #container { width: 744px; w\idth: 724px; }#pageHeader { position: absolute; top: 25px; left: 10px; }h1 { background: url("imgs/logo.jpg"); width: 239px; height: 57px; overflow: hidden; margin: 0; }h1 span { display: none; }h2 { font-size: 12px; margin: 0; }#pequenoSumario { padding-top: 85px; }#pequenoSumario .p2 { font-size: 12px; position: absolute; top: 65px; right: 20px; margin: 0; }#container #intro #pequenoSumario .p1 { font-size: 11px; height: 171px; background: url("imgs/background.jpg") no-repeat; margin: 0; width: 724px; color: #fff; font: 12px/150% Trebuchet MS; } / Parte azul ao lado da imagem /#container #intro #pequenoSumario .p1 span { padding: 30px 530px 0 30px; display: block; margin: 0; font: 12px/150% Trebuchet MS; text-align:justify; }#preambulo, #texto { margin: 0 20px 0 243px; }/ Preâmbulo do texto /#preambulo p { margin: 10px 0 10px 0; font: 10px/150% Trebuchet MS; line-height: 150%; text-align:justify; }#texto p, #preambulo p { line-height: 150%; margin: 5px 0 5px 0; text-align:justify; }/ Ttulo do H3 - Titulo do blog ou notcia #preambulo h3, #explanation h3, #participation h3, #benefits h3, #requirements h3/ #preambulo h3 { width: 300px; height: 24px; margin: 40px 0 10px 0; color : #FDA61D; } / Titulo do H3 - Ttulo do blog ou notcia / #subtitulo { width: 300px; height: 24px; margin: 40px 0 10px 0; color:#000066; }/ Determina a area dos links / #listaLinks { position: absolute; top: 295px; left: 0; width: 210px; background-color:#FFFFFF; } #lselect ul, #larquivo ul, #lexternos ul { list-style-type: none; margin: 0; padding: 0 0 0 40px; }#lselect ul li a { text-decoration: underline; display: block; font-size: 13px; } #lselect ul li.c, #lselect ul li a.c { display: inline; font-size: 12px; color: #333; }#lselect ul li a.c { text-decoration: none; }#lselect ul li a.c:hover { color: #D60808; }#lselect ul li { font-size: 12px; border-bottom: 1px solid #E6EEF0; }#listaLinks #larquivo ul li { font-size: 13px; border-bottom: 1px solid #E6EEF0; display: block; padding: 5px 0; }#listaLinks #lexternos ul li { font-size: 13px; border-bottom: 1px solid #E6EEF0; display: block; padding: 5px 0; }/#lexternos h3.externos { font: italic normal 12pt arial; width: 69px; height: 15px; margin: 30px 0 5px 40px; }*/#lexternos h3.externos { width: 69px; height: 15px; margin: 30px 0 5px 40px; }#larquivo h3.arquivos { width: 69px; height: 15px; margin: 30px 0 5px 40px; }#footer { background: url("imgs/footer.gif") no-repeat; color: #fff; height: 48px; text-align: right; padding: 0 10px 5px 0; line-height: 26px; font-size: 11px; }#footer a { color: #fff; text-decoration: none; }#footer a:hover { text-decoration: underline; }
Att
Daniel
Carregando comentários...