sike Posted May 22, 2008 at 08:48 AM Report Share #186639 Posted May 22, 2008 at 08:48 AM 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 at 02:24 AM Report Share #186849 Posted May 23, 2008 at 02:24 AM #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 at 02:32 AM Report Share #186850 Posted May 23, 2008 at 02:32 AM #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 at 07:50 AM Author Report Share #187501 Posted May 26, 2008 at 07:50 AM 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 at 08:16 AM Report Share #187504 Posted May 26, 2008 at 08:16 AM 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 at 08:57 AM Author Report Share #187507 Posted May 26, 2008 at 08:57 AM 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