Ir para conteúdo

POWERED BY:

Arquivado

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

davidpt

Como criar barra com dois textos separados

Por , em Desenvolvimento frontend

Recommended Posts

davidpt    0

davidpt
Postado

Olá,

 

É o meu primeiro tópico e é a primeira vez que estou a fazer um site. Começo por dizer que estou a fazer o site baseado no XHTML 1.0 Strict. O motivo é obvio, como estou a aprender os conseitos básicos, nada melhor que começar pelo principio,

 

Então aqui vão as minhas dúvidas:

 

Primeiro tentei criar uma barra com o nome do site e um slogan dentro de uma caixa mas parece-me que não correu bem.

 

Senão vejam:

		<div id="superior">
		
		<p id="logo"><a href="index.html">Texto um <em>.com.pt</em></a></p>
		<p id="slogan">Texto dois</p>
		
		</div>

O objetivo é que o titulo do site fique separado do slogan, vejam a css:

superior{
	background-color: #555453;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-right: 0px;
	padding-left: auto;
	line-height: normal;
	z-index: 999;
	}
	
p#logo{
	font-family: Verdana, Arial, Geneva, sans-serif;
	background-color: #555453;
	margin: 0px 0px 0px 0px;
	padding-top: 15px;
	padding-right: auto;
	padding-bottom: 0px;
	padding-left: 15px;
	padding-right: auto;
	line-height: normal;
	text-align: left;
	font-size: 195%;
	font-style: normal;
	font-weight: bold;
	letter-spacing: 2px;
}
p#slogan{
	font-family: Verdana, Arial, Geneva, sans-serif;
	background-color: #555453;
	margin: 0px;
	padding-top: 0px;
	padding-right: 10px;
	padding-bottom: 5px;
	line-height: normal;
	text-align: right;
	font-size: 155%;
	font-style: italic;
	font-weight: bold;
	letter-spacing: 2px;
	color: white;

O problema é que tive de criar 3 classes e o objetivo é que o texto aumente ou diminua de acordo com a tela. O site é para ser liquido, isto é, usa toda a tela. Usa a flutuação e o clear.

 

Alguém me consegue ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marcos Xavier    189

Marcos Xavier
Postado

Não confunda id com classes. Ids são únicos, classes podem referenciar vários elementos.

Como você quer separar? Com bordas? Sim utilize a propriedade border do CSS

Compartilhar este post

Link para o post
Compartilhar em outros sites

reebr    94

reebr
Postado

Coloque um "border-bottom: 1px solid #fff;" no p#logo.

 

Esse z-index no 'superior' só vai funcionar se a posição dele for diferente de static, pelo visto está static.

Compartilhar este post

Link para o post
Compartilhar em outros sites

davidpt    0

davidpt
Postado

Muito obrigado por responderem :)

 

Pensei que esta área do XHTML estava morta... É bom saber que existem pessoas ainda viajam pela origem do códico.

 

Sim, eu sei a diferença entre id e class, na verdade acabei por publicar este tópico a pensar que ninguem iria responder por se tratar do XHTML e por isso acabei por não ser rigoroso no que escrevi.

 

Então vou especificar mais a minha dúvida:

 

Primeiro como disse o objetivo é que estes dois textos fiquem na mesma caixa como demostra a imagem. Em segundo lugar quero que se redimencione de acordo com o tamanho do brower (aqui penso que os valores têm de ficar em porcentagem). Por ultimo têm de levar em conta que são dois textos que estão separados dentro da mesma caixa com o código XHTML e CSS, não pretendo o HTML5 nem o CSS3. Como disse estou a aprender do inicio. Levem em conta que o design é liquido (ocupa toda a tela), dai não se possa usar o posicionamento absoluto.

 

Este exemplo mostra o que pertendo. Considerem o preto uma caixa preta.

 

vdpezk.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

Pachevisk    3

Pachevisk
Postado

Cara ficou bem difícil de entender, rs. Veja se é assim que deseja:

<!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>Teste</title>
</head>
<style>

body {
	padding:0px;
	margin:0px;
	color:#fff;
}
#superior{
	background:#000;
	width:96%;
	height:100px;
	padding:2%;
	margin:0 auto;
}
.logo {
	width:100%;
	height:auto;
}
.logo a {
	width:30%;
	float:left;
	color:#fff;
}
.logo span {
	width:40%;
	float:right;
	text-align:right;
	margin-top:80px;
}
</style>
<body>
<div id="superior">
    <div class="logo"><a href="index.html" title="">logo do site</a> <span>Slogan do site</span></div>
</div>
</body>
</html>

Ps. Também estou aprendendo, leve em consideração hehe :)

Compartilhar este post

Link para o post
Compartilhar em outros sites

ignoredxyz    17

ignoredxyz
Postado

Lembre-se, no css:

 

Para id use:

#meuID{}

 

Para classe use:

.minhaClasse{}

 

Para nome de Tag use:

div{}

 

IMPORTANTE:

O id é único, nunca use uma ID mais de uma vez em uma página.

Você pode adicionar várias classes num mesmo elemento separando-as com espaço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bruno Miguel    7

Bruno Miguel
Postado

Será que é isto?

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<style>
body {
margin:0px;
background: #333;
font-family: Arial;
}
#box {
width:800px;
height:200px;
background:#000000;
color:#FFFFFF;
font-size:30px;
padding:15px;
}
#titulo {
width:100%;
position:relative;
top:0%;
left:5px;
text-align:left;
}
#slogan {
width:100%;
position:relative;
top:60%;
right:5px;
text-align:right;
}
</style>
</head>
<body>
<div id="box">
<div id="titulo">Texto fica em cima</div>
<div id="slogan">AQUI É O SLOGAN</div>
</div>
</body>
</html>

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