Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

RobertoTauille.com

Montar layout

Por , em Desenvolvimento frontend

Recommended Posts

RobertoTauille.com    0

RobertoTauille.com
Postado

Olá, sou novo aqui no forum do imasters.. :unsure:

 

Tenho dificuldades na hora de montar um layout, sem tabelas.

faz 3 dias que estou estudando sobre isso, e tenho dificuldade na hora

de usar a tag <div>

 

Alguem poderia me mostrar como fazer uma estrutura 3x3

 

ex. usando tabelas.

 

<table>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
  <tr>
	<td> </td>
	<td> </td>
	<td> </td>
  </tr>
</table>
Tenho dificuldade na hora de alinhar as div´s.

 

Bom agradeço se alguem pode me ajudar! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Vamos por partes, antes de mais seja Bem-vindo.

De acordo com a sua duvida do 3x3 é simples. Existem várias maneiras de brincar com a div e para você começar sugiro a seguinte estrutura:

HTML:

<body>
<div> <!-- div topo -->
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div> <!-- fim div topo -->
<div> <!-- div centro -->
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div> <!-- fim div centro -->
<div> <!-- div baixo -->
<div class="float"></div>
<div class="float"></div>
<div class="float"></div>
</div> <!fim div baixo -->
</body>

CSS: 

* {
	margin: 0px; 
	padding: 0px;
	list-style: none;
	}

div { width: 1100px; height: 250px; padding: 1px; background: #003366; margin-top: 10px; }

div.float { width: 333px; height: 225px; margin-left: 10px; background: #0066CC; float: left; border: 1px solid #fff; }

---------------

 

Sim você pode utilizar tabelas para dados tabulares, pois elas foram criadas para esse propósito.

De acordo aos formulários, dê uma vista de olhos no link do nosso amigo Maujor.

 

Cumps \o/

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoTauille.com    0

RobertoTauille.com
Postado

Webflex obrigado!! Otimo poder contar com pessoas como você!!..

Mas tenho outra duvida, e se você me permite..

 

Abaixo tenho um layout:

 

Imagem Postada

 

- Como eu devo montar o template ?

- Qual é a forma correta ?

- Usar imagem como background ?

 

 

Abraços! :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoTauille.com    0

RobertoTauille.com
Postado

Aqui está o xhtml do meu template.

 

Vejam se está correto.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">

<head>

	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="author" content="Roberto Tauille" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="rss/" />
	
	<title>robertotauille.com | tableless</title>

</head>

<body>

<div id="stage">
	<div id="top">
		<div id="topsaldo"><?php include_once "incluide/top.php"; ?></div>
	</div>
	<div id="banner"></div>
	<div id="menu">
		<div id="c-menu"><?php include_once "incluide/menu.php"; ?></div>
	</div>	
	<div id="conteudo">
		<div id="c-conteudo"><?php include_once "incluide/home.php"; ?></div>
	</div>
	<div id="base"></div>
</div>

</body>

</html>

 

 

Achei legal usar incluide para facilitar a atualização da parte funcional.

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

Posso usar tabelas ?

 

- Em dados tabulares ?

- Para estruturar um formulario qual o melhor maneira ?

 

:blink:

]

exato

 

tabela apenas para dados tabulares

 

para form utilize fieldset / legend / label / e outros do form

 

 

site do http://www.maujor.com tem muita coisa

 

 

abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

webflex    0

webflex
Postado

Olá,

 

Sim amigo, pareceu-me estar correcto. Dê uma estudada boa no HTML e CSS ;), eles fazem grandes coisas juntos :P.

 

Cumps \o/

 

PS: vou remover o link e editar o post.

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoTauille.com    0

RobertoTauille.com
Postado

Adoraria saber como montar aquele layout logo acima.

 

Eu fiz um bg da imagem toda, tirando apenas texto.

 

É correto fazer isso ? gostaria de pedir alguem para fazer um ex. apenas de como montar

o template... ;D

 

bOm abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

Roberto!!

tudo okay?! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

aqui vai um site que você pode tirar bastante dúvidas além de pegar tutorias prontos:

http://www.maujor.com/tutorial/marcatemplate.php

 

aqui vai um muito bom sobre posicionamento:

http://brunotorres.net/posicionamento-com-css

 

mais recomendo estudar bem a ordenação pq tudo depende dela ^_^

soh eu sei como é.. tbm fico com dúvida.. e as vezes coloco tag a mais eh posicionamento errado :mellow:

 

Eh aqui.. vai um layout de exemplo pra você! que naum foi feito por mim eh sim pelo donato ^^

 

CODE
<!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>:: MDnet Solu��es em Tecnologia - Home ::</title>

</head>

 

<style>

body { margin: 0px;

padding: 0px;

font-family:Arial, Helvetica, sans-serif;

color:#000000;

}

 

#container { border: solid 1px #CCCCCC;

margin: 0 auto;

width: 720px;

height: 600px;

 

}

 

#topo { width: auto;

height: 150px;

background: #F2F2F2;

}

 

#esquerda { height: 400px;

width: 160px;

float: left;

padding: 0px;

background: #E6E6E6;

margin-top: 10px;

 

}

 

#esquerda li{ list-style: none;

padding: 5px 0px;

display:block;

background: #CCCCCC;

margin-left: 0px;

}

 

#esquerda li:hover{ list-style: none;

display:block;

background: #EAEAEA;

margin-left: 0px;

text-decoration:underline;

}

 

#esquerda ul{ list-style: none;

padding-left: 0px;

padding-top: 10px;

margin-left: 0px;

}

 

#direita { height: 400px;

width: 160px;

float: right;

background: #E6E6E6;

margin-top: 10px;

 

}

 

#conteudo { margin: 10px 170px;

height: 400px;

background:#DBDBDB;

 

}

 

</style>

 

 

 

 

 

<body>

 

<div id="container">

 

<div id="topo"></div>

 

 

 

<div id="esquerda">

<ul>

<li>Empresa</li>

<li>Nossa História</li>

<li>Software</li>

<li>Downloads</li>

<li>Contato</li>

</ul>

 

</div>

 

<div id="direita"></div>

<div id="conteudo"></div>

 

 

</div>

 

</body>

</html>

espero ter ajudado ^_^

abraço!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Guilherme Rambo    4

Guilherme Rambo
Postado

Segue um tutorial e dois vídeos que podem ajudar:

 

- http://www.web2ponto0.com.br/tutorial-layo...pleto-xhtmlcss/

- http://www.web2ponto0.com.br/video-2-imple...-de-layout-css/

- http://www.web2ponto0.com.br/video-8-imple...-ja-programado/

 

[]'s

Compartilhar este post

Link para o post
Compartilhar em outros sites

Isabel    0

Isabel
Postado

você quer um layout como o que você postou neah?!

desculpa.. naum li direito!..

 

vou ver aqui se eu consigo achar algo eh dar uma modificada pra você! ^_^

 

mais se bem que você pode procurar.. tem vários sites que oferecem layouts free..

que você pode baixar eh dar uma olhada xD

 

soh procura no google que acha http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

aeuhaeuheau!

Compartilhar este post

Link para o post
Compartilhar em outros sites

RobertoTauille.com    0

RobertoTauille.com
Postado

Sim querida, obrigado!

 

e valeu tbm #INSIDE#

 

Achei 1 template pronto, mas é mto complexo.

 

na verdade não consigo montar o template do meu layout, ainda não entrou

na minha cabeça.

 

Como vou alinhar certinho o formulario no lado direito e o texto no lado direito ?

 

Div dentro de div e mais div ?

 

assim ??

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

seria algo mais ou menos assim os alinhamentos

 

css:

#pai{
width:405px;
height:200px;
}
#esq{
width:200px;
height:200px;
float:left;
}
#dir{
width:200px;
height:auto;
float:right;
}

<div id="pai">
<div id="esq">conteudo A</div>
<div id="dir">conteudo A</div>
</div>

qualquer duvida volte a postar ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito