• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

HecKel

[Newbie] Começar BO

10 mensagens neste tópico

Boas!

Estou neste momento a desenvolver um BackOffice para um projecto que tenho em mãos e decidi começar a fazer as coisas como deve de ser..., pena que lembrei-me de começar a fazer algo que não tenho experiência nenhuma :P CSS

O desenho do site é algo deste género:

boco1.th.png

Ainda tenho muito pouco feito, onde se vê userinfo é suposto aparecer texto..., só que não estou a ser capaz de colocar o texto dessa div no local certo.

Aqui fica o código do CSS:

div#topmenu{
position:absolute;
left:270px;
top:80px
}
div#topmenu li{
display:inline;
}

div#logo {
position:relative;
left:10px;
top:10px
width: 250px;
height: 100px;
background-image:url(../images/logo.gif);
background-repeat: no-repeat;
}

div#shortinfo {
position:absolute;
left:270px
top:10px
}

div#shortinf p{
left:100px
}

E Aqui fica o HTML até ao momento...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>BackOffice XPTO</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="BackOffice XPTO" />
	<meta name="author" content="Gil Sousa (HecKel)" />
	<meta name="keywords" content="BO" />

	<!--[if gte IE 5.5]>
		<style type="text/css">
			body {
				display:none;
			}
		</style>
		<meta http-equiv="Refresh" content="0;url=indexie.html" />
	<![endif]-->
</head>
<body>
	<!-- Logo do BO -->
	<div id="logo"></div>
	<!-- Menu horizontal do BO -->
	<div id="topmenu">
		<ul id="topmenulist">
			<li><a href="#">Main</a></li>
			<li><a href="#">Perfil</a></li>
			<li><a href="#">Admin CP</a></li>
			<li><a href="#">Menu1</a></li>
			<li><a href="#">Menu2</a></li>
			<li><a href="#">Menu3</a></li>
		</ul>
	</div>
	<!-- Informação Curta sobre o utilizador -->
	<div id="shortinfo">
		<p><b>Nick:</b> xpto</p>
		<p><b>Número de Novas Alterações:</b> X</p>
	</div>
	<!-- Avatar do utilizador --> 
	<div id="avatar">
		<img src="#" id="avatar" alt="avatar do X" />
	</div>
	<!-- Secções de Acesso -->
	<div id="accessareas">
		<ul id="accessareaslist">
			<li><a href="#">Menu</a></li>
			<li><a href="#">Menu</a></li>
			<li><a href="#">Menu</a></li>
			<li><a href="#">Menu</a></li>
			<li><a href="#">Menu</a></li>
		</ul>
	</div>
	<div id="workarea">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a elit quis nisl feugiat pulvinar. Quisque accumsan vestibulum lectus. Proin ut ligula sed massa feugiat lacinia. Suspendisse aliquam libero vitae neque. Fusce turpis mi, condimentum a, consectetuer vitae, adipiscing a, pede. Mauris vel orci. Proin mollis lacinia lectus. Phasellus faucibus. Donec feugiat ornare urna. Phasellus faucibus porttitor eros. Vestibulum congue tempor purus. Vivamus dolor. Donec commodo nulla vel dolor. Etiam metus nibh, euismod sit amet, bibendum eget, pulvinar et, nibh.</p>
	</div>
</body>
</html>

Ainda faltam umas quantas coisas..., mas para já gostava de saber como colocar o texto no local certo :P

Preparem-se que devo vir a usar esta thread para vos melgar bastante :D

Um obrigado antecipado :)

abraços, HecKel

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

para começar, tens de terminar as linhas do css com ponto e virgula, senão não são consideradas...

depois, a organização das divs deve ser esta, (muito simplificada :P):

<html>
<head>
</head>
<body>
<div id="wrapper"> (engloba tudo)
  <div id="topo"> (engloba tudo o que entra no cabecalho)
    <div id="logo"></div>
    <div id="info"> (engloba userinfo e menu)
      <div id="userinfo"></div>
      <div id="menu"></div>
    </div>
  <div id="avatar"></div>
  <div class="clear"></div> (sem conteudo, o css desta div e' clear:both por causa dos floats)
  </div> (fim da div topo)
  <div id="corpo"> (engloba menu e workarea)
    <div id="menu2"></div>
    <div id="workarea"></div>
  <div class="clear"></div> (sem conteudo, o css desta div e' clear:both por causa dos floats)
  </div> (fim da div corpo)
</div> (fim da div wrapper>
</body>
</html>

heckelhn8.jpg

depois é só colocar os conteúdos dentro de cada div...

nas divs de baixo, coloquei 15% e 80% (faltam 5% :P) por causa dos paddings que possas querer colocar numa ou noutra div...

atenção que na div "userinfo" se utilizares o <p> ficas muito limitado, visto que a altura dessa div é cerca de 70px... usa preferencialmente o <br />

posso auxiliar-te com o css para esta solução, se tiveres dificuldades :)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Estou-me mesmo a iniciar em CSS agora, e curiosamente também nunca trabalhei com DIVs, até agora era sempre tabelas para a veia :P

Quero ver se este trabalho sai de facto validado e bem feitinho, apesar de ser uma versão bastante primária não quero ter de perder tempo no futuro a corrigir problemas, aliás, sou apologistas de começar bem e devagar do que rápido e mal :P

Vou agora tentar aplicar as tuas sugestões, mais logo dou novidades :)

abraços, HecKel

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas!

Já tenho alguns progressos..., mas também estou com alguns problemas..., nomeadamente em meter o avatar na mesma linha, basicamente o efeito que tenho é o seguinte:

bo1vn1.th.png

Mais uma vez, aqui fica o Código HTML e CSS

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>BackOffice XPTO</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="BackOffice XPTO" />
	<meta name="author" content="Gil Sousa (HecKel)" />
	<meta name="keywords" content="bo" />

	<!--[if gte IE 5.5]>
		<style type="text/css">
			body {
				display:none;
			}
		</style>
		<meta http-equiv="Refresh" content="0;url=indexie.html" />
	<![endif]-->
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<!-- Logo do BO -->
			<div id="logo"></div>
			<div id="infomenu">
				<!-- Informação Curta sobre o utilizador -->
				<div id="shortinfo">
					<p><b>Nick:</b> xpto</p>
					<p><b>Número de Novas Alterações:</b> X</p>
				</div>
				<!-- Menu horizontal do BO -->
				<div id="topmenu">
					<ul id="topmenulist">
						<li><a href="#">Main</a></li>
						<li><a href="#">Perfil</a></li>
						<li><a href="#">Admin CP</a></li>
						<li><a href="#">XPTO CP</a></li>
						<li><a href="#">XPTO CP</a></li>
						<li><a href="#">XPTO CP</a></li>
					</ul>
				</div>
			</div>
			<!-- Avatar do utilizador --> 
			<div id="avatar">
				<img src="images/avatar.gif" id="avatar" alt="avatar do X" />
			</div>
			<div class="clear"></div>
		</div>
		<div id="docbody">
			<!-- Secções de Acesso -->
			<div id="accessareas">
				<ul id="accessareaslist">
					<li><a href="#">Menu 1</a></li>
					<li><a href="#">Menu 2</a></li>
					<li><a href="#">Menu 3</a></li>
					<li><a href="#">Menu 4</a></li>
					<li><a href="#">Menu 5</a></li>
				</ul>
			</div>
			<div id="workarea">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a elit quis nisl feugiat pulvinar. Quisque accumsan vestibulum lectus. Proin ut ligula sed massa feugiat lacinia. Suspendisse aliquam libero vitae neque. Fusce turpis mi, condimentum a, consectetuer vitae, adipiscing a, pede. Mauris vel orci. Proin mollis lacinia lectus. Phasellus faucibus. Donec feugiat ornare urna. Phasellus faucibus porttitor eros. Vestibulum congue tempor purus. Vivamus dolor. Donec commodo nulla vel dolor. Etiam metus nibh, euismod sit amet, bibendum eget, pulvinar et, nibh.</p>
			</div>
		</div>
	</div>
</body>
</html>

div#logo {
float:left;
position:relative;
left:10px;
top:10px;
width: 250px;
height: 100px;
background-image:url(../images/logo.gif);
background-repeat: no-repeat;
}

div#infomenu{
position:relative;
left:10px;
top:10px;
}

div#shortinfo {
position:relative;
left:10px;
top:10px;
}

div#topmenu{
position:relative;
left:10px;
top:10px;
}
div#topmenu li{
display:inline;
}

div#avatar{
float:right;
position:relative;
left:10px;
top:10px;
}

div.clear {
clear:both;
}

div#accessareas {
position:relative;
}

Obrigado pelas ajudas ;)

abraços, HecKel

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

o avatar fica abaixo porque falta o float:left no css do infomenu... tens de trocar o left:10px por right:10px... como está, como o avatar já está alinhado à direita, desloca-se 10px ainda mais para a direita...

no css falta a definição do workarea, que tem de ter o float:left e falta o float:left no css do accessareas... depois tens de colocar uma clear a seguir à workarea...

falta também o width:15% no accessarea e o width:80% no workarea...

retira também os top:10px que tens nas definicões do shortinfo, infomenu e top menu...

assim fica a funcionar...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas!

Estou a começar a sentir-me um grande ignorante..., antes era só ignorante :) Isto é um pouco chatinho de configurar ;)

papzq6.th.png

Algumas perguntas:

[*]Como meto o menu superior alinhado ao texto que está por cima?

[*]Como meto a porcaria do texto do lrem ipsum à frente do menu lateral? De forma a que o menu lateral seja como uma barra

Mais uma vez, aqui fica o meu código :D

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<title>BackOffice XPTO</title>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta name="description" content="BackOffice XPTO" />
	<meta name="author" content="Gil Sousa (HecKel)" />
	<meta name="keywords" content="bo" />

	<!--[if gte IE 5.5]>
		<style type="text/css">
			body {
				display:none;
			}
		</style>
		<meta http-equiv="Refresh" content="0;url=indexie.html" />
	<![endif]-->
</head>
<body>
	<div id="wrapper">
		<div id="header">
			<!-- Logo do BO -->
			<div id="logo"></div>
			<div id="infomenu">
				<!-- Informação Curta sobre o utilizador -->
				<div id="shortinfo">
					<p><b>Nick:</b> xpto</p>
					<p><b>Número de Novas Alterações:</b> X</p>
				</div>
				<!-- Menu horizontal do BO -->
				<div id="topmenu">
					<ul id="topmenulist">
						<li><a href="#">Main</a></li>
						<li><a href="#">Perfil</a></li>
						<li><a href="#">Admin CP</a></li>
						<li><a href="#">XPTO CP</a></li>
						<li><a href="#">XPTO CP</a></li>
						<li><a href="#">XPTO CP</a></li>
					</ul>
				</div>
			</div>
			<!-- Avatar do utilizador --> 
			<div id="avatar">
				<img src="images/avatar.gif" id="avatar" alt="avatar do X" />
			</div>
			<div class="clear"></div>
		</div>
		<div id="docbody">
			<!-- Secções de Acesso -->
			<div id="accessareas">
				<ul id="accessareaslist">
					<li><a href="#">Menu 1</a></li>
					<li><a href="#">Menu 2</a></li>
					<li><a href="#">Menu 3</a></li>
					<li><a href="#">Menu 4</a></li>
					<li><a href="#">Menu 5</a></li>
				</ul>
			</div>
			<div id="workarea">
				<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce a elit quis nisl feugiat pulvinar. Quisque accumsan vestibulum lectus. Proin ut ligula sed massa feugiat lacinia. Suspendisse aliquam libero vitae neque. Fusce turpis mi, condimentum a, consectetuer vitae, adipiscing a, pede. Mauris vel orci. Proin mollis lacinia lectus. Phasellus faucibus. Donec feugiat ornare urna. Phasellus faucibus porttitor eros. Vestibulum congue tempor purus. Vivamus dolor. Donec commodo nulla vel dolor. Etiam metus nibh, euismod sit amet, bibendum eget, pulvinar et, nibh.</p>
			</div>
			<div class="clear"></div>
		</div>
	</div>
</body>
</html>

div#wrapper {
float:left;
}

div#header {
float:left;
position:relative;
}

div#logo {
float:left;
position:relative;
left:10px;
top:10px;
width: 250px;
height: 100px;
background-image:url(../images/logo.gif);
background-repeat: no-repeat;
}

div#infomenu{
float:left;
position:relative;
left:10px;
}

div#shortinfo {
position:relative;
left:10px;
}

div#topmenu{
position:relative;
}
div#topmenu li{
display:inline;
}

div#avatar{
float:right;
position:relative;
left:-10px;
top:10px;
}

div.clear {
clear:both;
}

div#docbody {
float:left;
position:relative;
}

div#accessareas {
float:left;
position:relative;
left:10px;
}

div#workarea {
float:left;
position:relative;
left:10px;
}

Sorry estar a ser tão chato com uma coisa tão pequena :S

abraços, HecKel

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

para o problema do menu, coloca margin-left e padding-left a 0 no ul e no li...

para o problema do lorem, tira o left:10px no css do workarea...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Boas!

para o menu superior resultou bastante bem ;)

Tive de colocar assim:

div#topmenu ul{
position:relative;
left:10px;
margin-left:0;
padding-left:0;
}

div#topmenu li{
display:inline;
margin-left:0;
padding-left:0;
}

No entanto para a colocar o o lorem ipsum na posição que eu gostaria não resultou...

div#workarea {
float:left;
position:relative;
}

Sugestões?

Obrigado :D

abraços, HecKel

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

é aquela cena dos 15% e dos 80%... mete o width do accessareas a 15% e a do workarea a 80%... (os 5% que faltam é por causa das margins e paddings nas diferentes resoluções...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora