Como criar DIVs Relativamente posicionado em Adobe Dreamweaver CS6

A precisão e posicionamento-a-pixel da AP (Absolute-Posicionado) Divs em Adobe Dreamweaver CS6 pode ser muito libertador para designers, especialmente aqueles que gostam da flexibilidade de layouts baseados em impressão.

No entanto, em certas ocasiões, você pode querer caixas a fluir em linha com outros conteúdos na página. AP Divs flutuar acima de outros elementos, portanto, deslocando outros conteúdos da página não tem qualquer efeito sobre a sua posição, o que pode ser uma boa ou uma coisa má.

Para o comportamento em linha mais tradicional, você pode criar DIVs que usam posicionamento relativo. Isso permite que um elemento a ser deslocado juntamente com o conteúdo que o rodeia, para fazer um layout mais líquido. Este tipo de posicionamento é importante para o conteúdo aninhado ou qualquer situação onde os itens devem cair em linha com outros conteúdos da página.

Para esta tarefa, use a ferramenta Tag Insert Div, que você pode encontrar dentro de categorias comuns e layout do painel Inserir.

Siga estes passos para criar um DIV relativamente posicionado:

  1. Clique dentro de sua página para posicionar o cursor dentro de uma Div PA existente e, em seguida, clique na ferramenta Tag Insert Div sob categorias comuns e layout do painel Inserir.

  2. Quando a caixa de diálogo Inserir Tag Div aparece, afinar a localização do seu novo DIV, seleccionando uma localização a partir da lista drop-down Inserir.

    Por exemplo, escolha após o início do Tag para colocá-lo dentro de uma tag DIV existente em sua página.

    Você também pode usar a lista drop-down da caixa de diálogo Inserir Tag Div de colocar o DIV antes, depois, ou no interior os elementos existentes na página. Deixe a lista suspensa Inserir definido para no ponto de inserção para deixar a caixa onde você desenhou-lo ou escolher um outro local onde deseja que o DIV criado.

    image0.jpg
  3. Se você tem um seletor de classe existente que deseja aplicar, selecione-o na classe drop-down-list em contrário, deixe em branco.

  4. Se um ID existente não está disponível, introduza um novo nome no campo ID e clique no botão Nova regra CSS para criar uma.

  5. Quando a caixa de diálogo Nova regra CSS aparece, certifique-se de que o seu novo seletor está definido para ID e que o nome tem um sinal de libra (#) na frente dele. Clique em OK.

  6. Quando a caixa de diálogo Definição de regra CSS aparece, clique e selecione Posicionamento da lista Categoria à esquerda para visualizar as propriedades de posicionamento CSS.

  7. Na área de Posicionamento, selecione Relativo a partir do menu Posição, insira um valor de largura e altura em caixas Largura e Altura do texto, e digite um superior e valor à esquerda sob a propriedades de posicionamento. Clique em OK.

  8. Clique em OK para fechar a caixa de diálogo Inserir Tag Div.

    A, DIV posicionado relativamente nova aparece com o texto do espaço reservado.

    image1.jpg

Os valores superior e esquerda se comportar de forma ligeiramente diferente para a absoluta contra DIVs relativamente posicionados. No caso do posicionamento relativo, estes valores indicam um deslocamento do conteúdo circundante, em oposição a uma posição definida dentro da página.

menu