← HTML + CSS

2 Div's paralelas...

Lida 3516 vezes

Offline

Kill€r 
Membro
Mensagens 20 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

Ola, eu ainda não me acostumei a utilizar div, e tenho aqui 1 duvida que para alguns, secalhar até é parva, mas a questão é que não estou mesmo a ver como resolver isto..

É assim, eu queria por 2 div's, uma ao lado da outra:

ou seja, o livesupport ao lado do logo...

Ja meti Float:left nos 2 e ficam ao lado, mas o problema é que nao consigo meter centrado na página... podem ajudar? :D

Abraço e desde ja :obrigado:
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Crias um container e colocas lá o código que já tens.
Offline

Kill€r 
Membro
Mensagens 20 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

Citação de: Thomato em 24/Jan/2010 17:50
Crias um container e colocas lá o código que já tens.
Explica-me la melhor isso :D

css(ja deve ter algumas cenas desnecessárias porque ja estive a testar cenas...):
Código: [Seleccione]
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/background.png);
background-attachment:fixed;
}
/* Header */
#wrapper {
margin: 0 auto;
}
#logo {
background-image:url(images/logo.png);
width:432px;
height:74px;
float:left;
}
/*livesupport*/
#livesupport {
width: 100px;
float:left;
}
#livetop {
background-image: url(images/live_top.png);
width:229px;
height:35px;

}
#livebody {
background-image: url(images/live_body.png);
background-repeat:repeat-y;
width:229px;
height:50px;;
text-align: center;
}
#livebottom {
background-image:url(images/live_footer.png);
width:229px;
height:10px;
}
html:
Código: [Seleccione]
<!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>Untitled Document</title>
<LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<!--// Start - Header -->
<div id="wrapper">
<div id="container">
<div id="logo"></div>
<!--// Start - livesupport -->
<div id="livesupport">
<div id="livetop"></div>
<div id="livebody"><center>teste!!!</center></div>
<div id="livebottom"></div>
</div>
</div>
<!--// End - livesupport -->
</div>
<!--// End - Header -->
</body>
</html>
 :obrigado:

Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Cria uma div chamada container, coloca text-align: center; e margin: auto; e depois metes o que já tens lá dentro.
Offline

Kill€r 
Membro
Mensagens 20 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

Citação de: Thomato em 24/Jan/2010 18:06
Cria uma div chamada container, coloca text-align: center; e margin: auto; e depois metes o que já tens lá dentro.
Sou mesmo nabo :S
Meti isto:
Código: [Seleccione]
@charset "utf-8";
/* CSS Document */
body {
background-image:url(images/background.png);
background-attachment:fixed;
}
/* Header */
#wrapper {
margin: 0 auto;
}
#container {
text-align:center;
margin: auto;
}
#logo {
background-image:url(images/logo.png);
width:432px;
height:74px;
float:left;
}
/*livesupport*/
#livesupport {
width: 100px;
float:left;
}
#livetop {
background-image: url(images/live_top.png);
width:229px;
height:35px;

}
#livebody {
background-image: url(images/live_body.png);
background-repeat:repeat-y;
width:229px;
height:50px;;
text-align: center;
}
#livebottom {
background-image:url(images/live_footer.png);
width:229px;
height:10px;
}
Código: [Seleccione]
<!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>Untitled Document</title>
<LINK REL=StyleSheet HREF="stylesheet.css" TYPE="text/css" MEDIA=screen>
</head>
<body>
<!--// Start - Header -->
<div id="wrapper">
<div id="container">
<div id="logo"></div>
<!--// Start - livesupport -->
<div id="livesupport">
<div id="livetop"></div>
<div id="livebody"><center>teste!!!</center></div>
<div id="livebottom"></div>
</div>
</div>
<!--// End - livesupport -->
</div>
<!--// End - Header -->
</body>
</html>
Era isto que querias dizer?
Penso que não... será que podias editar o meu código e por como deve ser :D

Se preferires podemos falar por MSN, manda PM se quiseres ;)
Offline
T

Thomato 
Membro
Mensagens 4125 Gostos 3
Feedback +2

Troféus totais: 28
Trófeus: (Ver todos)
Apple User Super Combination Combination Topic Starter 10 Poll Votes Poll Voter Level 5 Level 4 Level 3 Level 2

Sim, é isso.

Mas tens que dar uma largura ao wrapper e colocar text-align: center; para centrar tudo.
Offline

Kill€r 
Membro
Mensagens 20 Gostos 0
Troféus totais: 21
Trófeus: (Ver todos)
Super Combination Combination Topic Starter Level 4 Level 3 Level 2 Level 1 10 Posts First Post Signature

Citação de: Thomato em 24/Jan/2010 18:57
Sim, é isso.

Mas tens que dar uma largura ao wrapper e colocar text-align: center; para centrar tudo.

Ja tentei e nao funciona :S

Deve tar algum promenor mal... se quiseres envio-te 1 rar com o site e ves melhor, caso tenhas disponibilidade :D

Edit: Ja deu :D

Muito obrigado pela tua ajuda!

Páginas: 1

Posts relacionados

Desenvolvimento

Alinhar div ao centro

R
Ricardo75

Desenvolvimento

alinha DIV no IE

i
iso600

Desenvolvimento

Actualizar conteúdo de uma div ou table sem fazer reload

icaro