Jump to content

Tableless Layout


sike
 Share

Recommended Posts

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  :wallbash:

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

#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

#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

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

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

Obrigado!

Mas umas dúvidas :wallbash:

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

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...

Important Information

By using this site you accept our Terms of Use and Privacy Policy. We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.