Ir para conteúdo
Fórum Script Brasil
  • 0

(Resolvido) Div lado a lado

Gabi F.

Perguntado por Gabi F.,

 Share

Pergunta

Gabi F.

Gabi F.

Postado
Postado (editado)

É seguinte quero botar uma div lado a lado, mas quero que logo quando acabe a primeira div, começe a segunda, olha aqui uma imagem:

http://img443.imageshack.us/img443/7989/priint.png (botei só o link, porque se não o forum ia bugar)

então, do lado dessa sidebar quero botar a div com o background do conteudo, deu para entender né ?

Espero respostas..

Editado por Gabi F.
Link para o comentário
Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

  • 0
Thelon

Thelon

Postado
Postado

como disse nosso amigo um flaot:left; para mandar a div que deve ficar na esquerda para a esquerda

e depois manda um background-image: url(''); ou apenas background: propriedade;

Quando for fazer uma psotagem de preferencia em postar o link para a página

temos diversos servidores grátuitos que possibilitam isso

assim é mais fácil para acharmos o problema

Postar o HTML e o CSS ajuda mas é mais complicado por não ser possível

alterar as propriedades e posições de elementos pois irá faltar as imagens ou outros detalhes do seu layuot

Link para o comentário
Compartilhar em outros sites
  • 0
Gabi F.

Gabi F.

Postado
  • Autor
Postado (editado)

Tá aqui o index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Teste</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="style.css" rel="stylesheet" type="text/css">
</head>

<body><div id="box">
<div align="left"><img src="banner.png" width="846" height="261"> 
</div>
<div id="banner"></div>

<div id="menu">
</div>
<div id="box_pequena">
</div>

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

</body>
</html>
e aqui o style.css 
*{margin:0; padding:0;}

#box {width:846px; margin:0 auto;}
#menu {height:43px; background:url(menu.png) no-repeat;}
#box_pequena {width: 267px; height:538px; background:url(box_pequena.png) no-repeat; }
#conteudo {float:left; margin-left: 267px; width:563px; height:538px; background:url(conteudo.png) no-repeat;}

Editado por Gabi F.
Link para o comentário
Compartilhar em outros sites
  • 0
Thelon

Thelon

Postado
Postado

como disse antes sem o link é mais complicado ajudar

mas tente assim:

*{margin:0; padding:0;}

#box {width:846px; margin:0 auto;}
#menu {height:43px; background:url(menu.png) no-repeat; float: left;}
#box_pequena {width: 267px; height:538px; background:url(box_pequena.png) no-repeat; }
#conteudo {float:left; margin-left: 267px; width:563px; height:538px; background:url(conteudo.png) no-repeat; float: right;}

Isso irá flutuar a div do menu para a direita e a de conteudo para a esquerda deixando uma ao lado da outra

Link para o comentário
Compartilhar em outros sites
  • 0
Thelon

Thelon

Postado
Postado

Falar que quer escrever dentro deles é muito vago pois é só escrever realmente dentro

<div id="menu">
aqui você escreve o que quiser
</div>

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

Porém para cada coisa que vocÊ fizer existe uma tag adequada para usar

Como por exemplo

<p> para paragrafos

<h1>,<h2>, <h3> para titulos

<ul> para listas

entre muitas outras

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...