Jump to content
Fórum Script Brasil
  • 0

(Resolvido) Div lado a lado


Gabi F.
 Share

Question

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

Edited by Gabi F.
Link to comment
Share on other sites

9 answers to this question

Recommended Posts

  • 0

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 to comment
Share on other sites

  • 0

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

Edited by Gabi F.
Link to comment
Share on other sites

  • 0

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 to comment
Share on other sites

  • 0

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 to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Forum Statistics

    • Total Topics
      149.6k
    • Total Posts
      646.2k
×
×
  • Create New...