Textos não alinhados

Balero · Fevereiro 29, 2008

Olá pessoal,

Estou mexendo com CSS e tenho uma dúvida, como eu faço para que os textos se encaixe nos lugares "estipulados" ? (Segue a imagem abaixo como erro)

Aqui está o index.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
		"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>Layout using external style sheets</title> 
	<link rel="stylesheet" href="stylesheet1.css" media="screen">
	<style type="text/css" media="screen">@import url("stylesheet2.css");</style>
</head>
<body>
<div id="container">
	<div id="header" title="sitename">
	</div> 
	<div id="mainnav">
		<ul>
			<li><a href="#">Section 1</a></li>
			<li><a href="#">Section 2</a></li>

			<li><a href="#">Section 3</a></li>
			<li><a href="#">Section 4</a></li>
		</ul>
	</div> 
	<div id="contents">
		<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	<br/>
	</div>
	<div id="footer">
		Copyright © Sitename 2004
	</div>
</div>
</body>
</html>

E aqui a parte do CSS:

#mainnav ul 
{ 
	margin-top: -0px;
	list-style-type: none;
	height: 42px;
	width: 610px;
	text-align: center;
	background-image: url(barra.jpg);
 }
#mainnav li { display: inline; }

Obrigado mais uma vez!

Até mais http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

William Bruno · Fevereiro 29, 2008

Tentou dar um espaçamento entre os "li", com margin?

#mainnav li { 
	display: inline;
	margin-left: 70px;  /* chutei um valor aqui */
}

Ou então, posicionar LI, por LI...

.um{
 position: static; /* só para poder declarar o left e o top */
 left: 0px;
 top: 0px;
}
.dois{
 position: static; /* só para poder declarar o left e o top */
 left: 200px;
 top: 0px;
}

Mau B. Miranda · Fevereiro 29, 2008

Fala ae Balero!!! beleza!!

Cara, tenta fazer o q o "tiu uiLL" disse!!! da uma largura fixa para a <li> do tamanho do espaço q você tem ali!!! e para centralizar o texto verticalmente dentro da <li>, defina "line-height" com a altura em px da tarja azul, só q se o texto estiver em duas linhas dae seria ideal configurar <li> por <li>!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[]'s

Balero · Fevereiro 29, 2008

Olá pessoal,

Vocês entendem mesmo hein (hehe)

Bom, fiz o primeiro jeito que o tiu uiLL disse, só que ficou um espaçamento entre as palavras, só que elas ficaram em cima e também não no lugar certo, segue uma imagem:

Mau B. Miranda, tentei fazer o que você falou, mas acho que fiz errado, segue parte do index.html:

<div id="mainnav">
		<ul>
			<li line-height="42px"><a href="#">Section 1</a></li>
			<li line-height="42px"><a href="#">Section 2</a></li>

			<li line-height="42px"><a href="#">Section 3</a></li>
			<li line-height="42px"><a href="#">Section 4</a></li>
		</ul>
	</div>

Obrigado novamente e desculpa as perguntas "noobs"

Até mais ;)

Mau B. Miranda · Fevereiro 29, 2008

Opa fala ae Balero!!

Cara seguinte, o line-height é css!! Coloque no seu arquivo css onde você configura a <li> !!!

Algo tipo:

CODE

#mainnav li {     widht:xxxxx;
    margin:xxxxx;
    line-height:42px;
}

Se der certo avisa ae, senão, tbm avisa q vamos destrinchar esses CSS!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[]'s

Balero · Fevereiro 29, 2008

Opa, deu certo sim, ficou no meio, só que ainda não ficou dentro do espaço "certinho" (hehe), segue a imagem abaixo:

Parte do arquivo CSS:

#mainnav ul 
{ 
	margin-top: -0px;
	list-style-type: none;
	height: 42px;
	width: 610px;
	text-align: center;
	background-image: url(barra.jpg);
 }
#mainnav li {
	display: inline;
	line-height: 42px;
	margin-left: 70px;  /* chutei um valor aqui */
}

Parte da index.html:

<div id="mainnav">
		<ul>
			<li><a href="#">Section 1</a></li>
			<li><a href="#">Section 2</a></li>

			<li><a href="#">Section 3</a></li>
			<li><a href="#">Section 4</a></li>
		</ul>
	</div>

Obrigado mais uma vez! ;)

Mau B. Miranda · Fevereiro 29, 2008

Então Balero!!!

Cara, só agora sobrou mais um tempinho pra ver o post, ta bombando aqui no trampo!!!! E agora tbm já to de saida pra ir pra faculdade!!!

Mais tarde eu dou uma olhada aqui nesse post, e se alguém não tiver resolvido eu faço e posto aqui, beleza!!!!

A não ser q você tenha muita urgência com isso, dae infelizmente não poderei ajudar!!! :unsure:

Mas vou deixar uma dica, do jeito q está o menu, tente configurar a <ul>, dar um tanho pra ela e tals!!! Pq pelo q vi as <li> estão ok!!!!

beleza!!!

[]'s

Mau B. Miranda · Março 1, 2008

Como prometido, óh nóis aqui de novo!!!

Vamos lá Balero, já resolvi o seu problema aqui!!! Segue o código!

HTML:

CODE

<body><div id="container">
	<div id="topo"></div>
    <div id="contentMenu"><ul id="menuNav">
        <li><a href="#" title="Section 1"><strong>Section 1</strong></a></li>
        <li><a href="#" title="Section 2"><strong>Section 2</strong></a></li>
        <li><a href="#" title="Section 3"><strong>Section 3</strong></a></li>
        <li><a href="#" title="Section 4"><strong>Section 4</strong></a></li>
    </ul></div>
    <div id="conteudo">
    	<br />
    	<br />
      	<br />
      	<br />
      	<br />
      	<br />
      	<br />
      	<br />
    </div>
</div>
</body>

CSS:

CODE

body {		background:#CCC;
	text-align:center;
	font-family:Arial, Helvetica, sans-serif;
}
#container {
	width:650px;
	margin:20px auto;
	text-align:left;
}
#topo {
	background:#000;
	height:100px;
}
#contentMenu {
	height:42px;
	background:#00c;
	text-align:center;
	border-top:1px solid #FFF;
}
	#contentMenu ul#menuNav {
		list-style:none;
		margin:0 auto;
		padding:0;
		width:428px;
	}
		ul#menuNav li {	
			float:left;
			line-height:42px;
			width:102px;
			margin:0 2px;
			display:inline;
		}
		ul#menuNav li a {	
			color:#FFF;
			font-size:12px;
			text-decoration:none;
		}
		ul#menuNav li a:hover {	
			color:#FFF;
			text-decoration:underline;
		}
 
#conteudo {
	background:#FFF;
}

Bom, talvez você só tenha q fazer mais alguns ajustes nas margens e width das <li>, mas acho q ja ta quase no esquema!!!

Se der certo avisa ae!!!! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

E sei lá, se tiver alguma dúvida em alguma parte mande a pergunta, beleza!!!

Mas cara, tenta dar uma sacada em q cada parte do código faz, tipo, não apenas copie, o lance é aprender tbm http://forum.imasters.com.br/public/style_emoticons/default/joia.gif

[]'s

Balero · Março 5, 2008

Pessoal, desculpa o "up", mas é para avisar que deu tudo certo!

Obrigado a todos que ajudaram :D

Até mais! http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Arquivado

Textos não alinhados

Recommended Posts

Balero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

William Bruno 1501

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Balero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Balero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Mau B. Miranda 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Balero 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

editor quill configuração

PHP - Orientação com UPDATE

BelogsTo do laravel

Fóruns

Tempo Real

Informação importante