sike Posted May 22, 2008 Report Share Posted May 22, 2008 Boas, Estou a tentar fazer um tabeless layout mas estou com alguns problemas por falta de conhecimento no assunto. Tenho estado a tirar duvidas no site do maujor mas não consigo perceber o que está mal aqui Código CSS: @charset "utf-8"; #container { margin-top: 0px; margin-right: auto; margin-left: auto; width: 944px; } body { background-color: #999999; } #header { height: 102px; width: 944px; margin-top: 0px; background-image: url(../img/header.jpg); } #menu { height: 28px; width: 944px; background-image: url(../img/m_bar.jpg); background-repeat: no-repeat; background-position: left; background-color: #004C98; } #left { width: 185px; background-color: #FFFFFF; height: 500px; } #main { background-color: #fff7e6; height: 500px; width: 500px; margin-left: 185px; } #right { height: 500px; background-color: #FFFFFF; width: 259px; float: right; } Código HTML: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Mediterraneo Editions</title> <link href="css/no-bug.css" rel="stylesheet" type="text/css" /> <link href="css/style.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="container"> <div id="header"></div> <div id="menu"></div> <div id="left"></div> <div id="main"></div> <div id="right"></div> </div> </body> </html> E o resultado é este. Até consigo colocar o div para cima mas com position-top: -500px mas tem de haver outra maneira. thanks in advance Link to comment Share on other sites More sharing options...
cyclop Posted May 23, 2008 Report Share Posted May 23, 2008 #container { margin-top: 0px; margin-right: auto; margin-left: auto; width: 944px; } body { background-color: #999999; } #header { height: 102px; width: 944px; margin-top: 0px; background-image: url(../img/header.jpg); } #menu { background-image: url(../img/m_bar.jpg); background-repeat: no-repeat; background-position: left; background-color: #004C98; } #left { width:20%; float:left; background:#fff; padding-bottom:10px; } #main { background-color: #fff7e6; width:60%; float:left; padding-bottom:10px; } #right { width:20%; float:left; background-color: #fff; padding-bottom:10px; } Assim resolve... uso percentagens porque acho que assim é que deve de ser... deve-se de usar PX somente em ultimo caso... ou por exemplo para defenir o container(que acho tambem poderia ser evitavel) Assim penso que funciona fiz alguns ajustes nada mais... NOTA: ao fazer float, "obrigas" a que o objecto se encoste ao outro resolvendo o teu problema. Espero ter ajudado e boa sorte. "Quando eu for grande quero ser como o Celso" Link to comment Share on other sites More sharing options...
cyclop Posted May 23, 2008 Report Share Posted May 23, 2008 #container { margin-top: 0px; margin-right: auto; margin-left: auto; width: 944px; } body { background-color: #999999; } #header { height: 102px; width: 944px; margin-top: 0px; background-image: url(../img/header.jpg); } #menu { height: 28px; width: 944px; background-image: url(../img/m_bar.jpg); background-repeat: no-repeat; background-position: left; background-color: #004C98; } #left { width: 185px; height: 500px; float:left; background:#fff; padding-bottom:10px; } #main { background-color: #fff7e6; float:left; padding-bottom:10px; height: 500px; width: 500px; } #right { width: 259px; height: 500px; float:left; background-color: #fff; padding-bottom:10px; } Assim é com as tuas medidas 😛 boa sorte "Quando eu for grande quero ser como o Celso" Link to comment Share on other sites More sharing options...
sike Posted May 26, 2008 Author Report Share Posted May 26, 2008 Bem isto ficou a funcionar correctamente mas não percebo como... Eu não estava a dar medidas em altura e eles estavam a ficar para baixo, no teu código continuas a não dar nenhuma medida em altura e já fica tudo encaixado 😄 E já agora se quiser acrescentar um footer como terei de fazer ? E por exemplo montar um menu como este era bastante fácil em tabelas, mas qual a melhor maneira neste caso ? Link to comment Share on other sites More sharing options...
cyclop Posted May 26, 2008 Report Share Posted May 26, 2008 Nesse caso usa listas (UL e LI) quanto ao que eu fiz, simplesmente adicionei o float que obriga a encostar ao ultimo objecto, no caso de quereres um footer basta só meteres a position em relative sem float que ele vai logo para baixo 😉 "Quando eu for grande quero ser como o Celso" Link to comment Share on other sites More sharing options...
sike Posted May 26, 2008 Author Report Share Posted May 26, 2008 Obrigado! Mas umas dúvidas Tenho usado este CSS extra para não me ajudar não ter as grandes diferenças entre FF e IE e até agora tem funcionado bem, mas ao fazer o li a imagem no FF fica colada a de cima mas no IE fica assim, o que poderá ser ? Quando dou padding numa box no FF ele aumenta o tamanho da BOX de quanto eu coloquei de padding já no IE não ? @charset "utf-8"; /* CSS Document */ body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td { margin:0pt; padding:0pt; } table { border-collapse:collapse; border-spacing:0pt; } fieldset, img { border:0pt none; } address, caption, cite, code, dfn, em, strong, th, var { font-style:normal; font-weight:normal; } ol, ul { list-style-image:none; list-style-position:outside; list-style-type:none; } caption, th { text-align:left; } h1, h2, h3, h4, h5, h6 { font-size:100%; font-weight:normal; } q:before, q:after { content:''; } abbr, acronym { border:0pt none; } body { font-family:arial,helvetica,clean,sans-serif; font-size:13px; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; } table { font-size:inherit; } select, input, textarea { font-family:arial,helvetica,clean,sans-serif; font-size:99%; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; } pre, code { font-family:monospace; font-size:115%; font-size-adjust:none; font-stretch:normal; font-style:normal; font-variant:normal; font-weight:normal; line-height:normal; } body * { line-height:1.22em; } 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