Ir para o conteúdo
sike

Tableless Layout

Por sike, em CSS

Mensagens Recomendadas

sike    0
sike
Publicado

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

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
cyclop    0
cyclop
Publicado 

#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.

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
cyclop    0
cyclop
Publicado 

#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 :P

boa sorte

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
sike    0
sike
Publicado

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

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 ?

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
cyclop    0
cyclop
Publicado

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 ;)

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites
sike    0
sike
Publicado

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

@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;
}

Partilhar esta mensagem

Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!

Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.

Entrar Agora
Ir Para Lista de Tópicos CSS
×

Aviso Sobre Cookies

Ao usar este site você aceita os nossos Termos de Uso e Política de Privacidade

  Aceito