Eu gostaria muito da ajuda de vocês, pois sou iniciante no CSS e estou montando meu primeiro site Tableless, mas estou encontrando sérias dificuldades no código, algumas delas consegui vencer com bastante estudo, outras, estou quebrando cabeça até hoje.
Primeiro problema: O Topo possui uma formatação no Firefox e outra no IE 6.0, não consigo adequar as duas de forma alguma. Quando faço uma ficar boa em um navegador, automaticamente se desfaz no outro. É simples: Eu preciso que a DIV Container (Que possui todo o conteúdo) fique abaixo da DIV Topo (Que possui a barra superior do site) e a Logo "Holysolutions" fique em cima do Container junto com o Topo, porém, com a metade da esfera para baixo com trasparência, sobrepondo o container. Isso vai dar a impressão de que a logo está por cima das duas DIV's: Tanto Topo, como Container. É esse resultado que eu quero, mas só consigo no Firefox. Vejam só as imagens abaixo:
Essa é a imagem do Firefox, observem que ela ficou exatamente como eu queria. Agora observem como ficou no IE 6.0:
A logo sobrepôs o Container, a DIV Container foi para o Topo e a DIV Topo ficou abaixo de todas. Cansei de refazer o CSS e o HTML, mas não consigo o mesmo resultado para os dois.
Segundo Problema: Estou querendo alinhar três caixas em um conteúdo que está na DIV Container, porém não consigo. O IE 6.0 está causando alguns erros incomuns, embora no Firefox está tudo ok. Vou exemplificar os erros novamente com imagens. Vejam abaixo:
Vejam que no Firefox as três boxes ficam alinhadas e corretas, e o conteúdo do Box1 (Salvando sua "Imagem") está perfeito. Agora observem no IE 6.0:
Não consigo deixar da mesma forma. Observem o conteúdo desorganizado da Box1 e observem também a duplicação das últimas letras contidas na Box3, logo abaixo do Layout!
Sinceramente galera, eu já estou ficando louco. A três dias estudando afinco CSS, deixando até mesmo de fazer algumas tarefas no trampo para estudar e exemplificar, montar o layout e desmontar, fazer o CSS e desfazer e nada de resultados; quando corrijo um erro aparecem três ou quatro! Se alguém tiver interesse em ajudar um programador iniciante, estou disposto a aprender. Galera desde já agradeço pelo esforço, seja qual for o resultado. Abraços a todos e Sucessos!
Abaixo segue os códigos para averiguarem:
Código HTML:
<html> <head> <title>Holysolutions :: Web, RichMedia e Design</title> <link href="folha_estilos.css" rel="stylesheet" type="text/css" /> <body> <div id="backtopo"></div> <div id="container"> <div id="logo"><img src="imagens/logo.png" width="233" height="65" /></div> <div id="banner"> <img src="imagens/banner.png" width="233" height="65" /> </div> <!-- fim do banner --> <div id="conteudo"> <div id="noticia1"> <span class="titulo1">Entenda o que é a HolySolutions</span> </div> <!-- Fim da noticia1 --> <div id="newsletter"><span class="titulo1">NewsLetters</span> </div> <!-- fim da newsletter --> <div id="noticia2"> <div id="cantoesq"><img src="imagens/cantoesq.jpg" width="11" height="247" /></div> <div id="centro"> <div id="box1" class="box"><h1>Salvando sua "Imagem"</h1> <div id="img_box1"><img src="imagens/imagem_box1.png" width="75" height="80" /></div> </div> <!-- Fim container_box1 --> </div> <!-- Fim da box1 --> <div id="box2" class="box"><h1>Conheça nosso sistema</h1></div> <!-- Fim da box2 --> <div id="box3" class="box"><h1>Trabalhos mais recentes</h1></div> <!-- Fim da box3 --> </div><!-- fim da centro --> <div id="cantodir"><img src="imagens/cantodir.jpg" width="11" height="247" /></div> </div> <!-- fim da noticia2 --> </div> <!-- fim do conteudo --> </div> <!-- fim do container --> </body> </html>
Código CSS:
body {
margin: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
background: url(imagens/background.jpg) repeat-x scroll #000;
}
/* A partir daqui começa as formatações de texto e propriedades de XHTML. */
.titulo1 {
font-size: 18px;
color: #035CB9;
font-weight: normal;
margin: 0px;
padding: 0px;
}
.input_text_news {
color: #000;
height: 11px;
width: 135px;
margin-top: 7px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
}
.buttons {
margin: 0px;
padding: 0px;
font-family: Tahoma, Geneva, sans-serif;
text-align: center;
font-size: 10px;
color: #035CB9;
height: 18px;
width: 52px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background: url(imagens/botao.jpg) scroll no-repeat center center;
}
.box h1 {
margin: 5px 0px 20px 0px;
padding: 0px;
font-family: Tahoma, Geneva, sans-serif;
font-size: 15px;
color: #035CB9;
font-weight: bold;
text-align: center;
}
/* Internet Explorer Hack para form */
.forms {
margin: 0px;
padding: 0px;
}
/* Finalização das formatações de texto */
#backtopo {
position: absolute;
width: 100%;
height: 43px;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
background: url(imagens/backtopo.jpg) repeat-x left;
}
#container {
position: absolute;
left: 50%;
margin-left: -389px;
width: 778px;
height: auto;
}
#logo {
position: absolute;
float: left;
width: 233px;
height: 65px;
top: 0;
margin: 0px 0px 0px 35px;
}
#banner {
width: 762px;
height: 270px;
margin: 43px 0 0 8px;
}
#conteudo {
width: 742px;
height: 460px;
margin: 1px 0px 0 8px;
padding: 0px 10px 0 10px;
background: #FFF;
}
#noticia1 {
float: left;
width: 505px;
height: 181px; /* foi aumentado 2px para que a caixa de noticia2 fique com margem superior a 1px uma vez que ela é empurrada para baixo através desta box, dando a impressão que está 1px abaixo da "Newsletter" */
padding: 20px 0px 0px 0px;
margin: 0px;
}
#newsletter {
float: right;
width: 196px;
height: 159px;
margin: 0px;
padding: 20px;
background:url(imagens/back_news.jpg) scroll no-repeat;
}
#noticia2 {
clear: both;
width: 742px;
height: 247px;
background: url(imagens/back_noticias2_2.jpg) repeat-x center;
}
#centro {
position: absolute;
float: left;
width: 720px;
height: 247px;
min-height: 247px;
margin: 0px;
padding: 0px;
left: 30px; /* Hack para Firefox que sobrescreve a DIV do canto esquerdo se não houver distância */
}
#cantoesq {
float: left;
width: 11px;
height: 247px;
}
#cantodir {
float: right;
width: 11px;
height: 247px;
}
#box1 {
float: left;
width: 240px;
height: 247px;
}
#img_box1 {
float: right;
margin: 0 15px 0 0;
}
#container_box1 {
width: 240px;
heigt: 197px;
}
#botao_box1 {
float: right;
width: 61px;
heigt: 20px;
}
#box2 {
float: left;
width: 240px;
height: 247px;
}
#box3 {
float: right;
width: 240px;
height: 247px;
}
