Tableless Layout

sike · 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

cyclop · 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.

cyclop · 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

sike · 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 ?

cyclop · 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 😉

sike · 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;
}

Sign In

Tableless Layout

Recommended Posts

sike

Link to comment

Share on other sites

cyclop

Link to comment

Share on other sites

cyclop

Link to comment

Share on other sites

sike

Link to comment

Share on other sites

cyclop

Link to comment

Share on other sites

sike

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information