texto ou imagem no mesmo lugar especificado

Annyh · Maio 1, 2010

bom dia pessoal, (a galera mais eficiente da web estão aqui)...

meu problema é o seguinte:

tenho uma div e nela tenho, imagens (thumbnails), mas tenho mais divs que preenchem a página, e queria saber se tem como eu deixar um link, ou uma imagem no rodapé da div, sempre no mesmo lugar, independente do conteúdo que ela possua, queria que o texto ou a imagem ficasse sempre no rodapé dessas div's...

Thiago Retondar · Maio 1, 2010

Defina position:relative para essa div e na imagem/texto defina position:absolute e bottom: 0.

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

Annyh · Maio 2, 2010

ta Tiago, do jeito que você falou deu certo, mas tem um porem...

tenho uma div que esta dentro de outra div, fiz o mesmo, mas no FF fica legal, mas vi no Chrome e fica pouco mas desalinhado...

porque ocorre isso?

@charset "utf-8";
/* CSS Document */

* {
	list-style: none;
    margin: 0;
	outline: none;
    padding: 0;    
}

body {
	background: #000 url('fundoam.png') no-repeat center fixed;
	font-family: Verdana, Tahoma; Geneva, Arial, Helvetica, sans-serif;
    font-size: 100%;
}

div#global {
	margin: 0 auto;
	overflow: hidden;
	padding-left: 20px;
	width: 854px;
}

div#global div {
	background: #fff;
	border: 1.5px dashed #000;
	float: left;
	margin: 5px 10px;
	position: relative;
	width: 260px;
}

div#agenda, div#videos, div#apoio {
	height: 250px;
}

div#fotos, div#wallpapers, div#muralrecados {
	height: 310px;
}

div#faclube, div#novidades, div#enquete {
	height: 210px;
}

div#faclube h2, div#novidades h2, div#enquete h2 {
	margin-bottom: 10px;
}

div#agenda h2 {
	background: url(agenda.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#agenda ul {
	margin-top: 15px;	
}

div#agenda ul li a {
	background: #dbc8ae;
	color: #000;
	font-size: 0.9em;
	float: left;
	margin: 0 0 2px 35px;
	padding: 2px 20px;
	text-decoration: none;
}

div#agenda ul li a:hover {
	background: #f1daa0;
}

div#muralrecados #mensagem {
	border: none;
	height: 257px;
	overflow: auto;
	margin: 1px 9px;
	padding: 5px 10px;
	width: 230px;
}

div#muralrecados #mensagem .vermais {
	bottom: 0px;
	position: relative;
}

div#videos h2 {
	background: url(videos.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#apoio h2 {
	background: url(apoio.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#fotos h2 {
	background: url(fotos.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#wallpapers h2 {
	background: url(wallpapers.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#muralrecados h2 {
	background: url(muralrecados.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#faclube h2 {
	background: url(faclube.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}
div#faclube a {
	color: #f00;
	float: left;
	margin-left: 5px;
}

div#novidades h2 {
	background: url(novidades.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

div#enquete h2 {
	background: url(enquete.png) no-repeat;
	height: 41px;
	text-indent: -9999px;
	width: 259px;
}

h3 {
	font-size: 0.8em;
}

address {
	font-size: 0.7em;
	margin: 2px 0;
}

.mensagem {
	font-size: 0.8em;
	margin-bottom: 15px;
	text-align: justify;
}

button {
	background: #745e52;
	border: 1px solid #745e52;
	color: #fff;
	float: right;
	margin: 10px 58px 0 0;
}

ul.videos li, ul.fotos li, ul.apoio li, ul.wallpapers li {
    display: inline;
	float: left;
    margin: 17px 0 5px 17px;
}

ul.fotos li {
	margin: 17px 0 -5px 17px;
}

img {border: none;}

div#fotos .vermais, div#wallpapers .vermais {
	margin-top: 15px;
}

ul.wallpapers li {
	margin: 17px 0 -5px 17px;
	width: 62px;
}

ul.linkdown li {
	float: left;
	margin: 0 0 -5px -2px;
	text-align: center;
    width: 65px;
}

ul.linkdown li a {
	color: #000;
	font-size: 0.8em;
	text-decoration: none;
}

ul.linkdown li a:hover {
	color: #f00;
}

a.vermais {
	bottom: 5px;
    color: #000;
    float: right;
    font-size: 0.8em;
	font-weight: bold;
	margin-right: 20px;
	position: absolute;
	right: 5px;
	text-decoration: none;
}

a:hover.vermais {
	text-decoration: underline;
}

fieldset {
	border: 1px solid red;
	font-size: 0.8em;
	padding: 0 8px;
    position: relative; 
    text-align: justify; 
}

fieldset input {
	background: #fc0;
	border: 1px solid #333;
	left: 50px;
	margin: 5px 0 0 0;
	position: relative;	
}

input:focus {
    background: #0f0;
}

label {
	position: absolute;
    width: 40px;
    margin: 5px 8px 0 0;
    text-align: right;
}


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
	<head>
		<meta http-equiv="Content-Type" content="application/xml+xhtml; charset=utf-8" />
		<meta name="author" content="" />
		<meta name="description" content="" />
		<meta name="keywords" content="" />
		<meta name="robots" content="" />
		<title>Alvaro e Magão</title>

		<link href="css.css" rel="stylesheet" type="text/css" />
	</head>
	
	<body>
		
		<div id="global"><!-- Envolve todo o conteúdo do site -->

			<div id="agenda">
				
				<h2>Agenda</h2>
				<ul>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
					<li><a href="#">20.05 - Joinville, SC</a></li>
				</ul>
				<a href="#" class="vermais" title="veja mais fotos">Ver mais</a>

			</div><!-- fim da agenda -->


			<div id="videos">
			
				<h2>Vídeos</h2>
				<ul class="videos">
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
				</ul>
				<a href="#" class="vermais" title="veja mais videos">Ver mais</a>
			
			</div><!-- fim dos vídeos -->

			<div id="apoio">
				
				<h2>Apoio</h2>
				<ul class="apoio">
					<li><a href="#"><img src="i.gif" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" alt="" /></a></li>
				</ul>
			
			</div><!-- fim apoio -->

			<div id="fotos">
				
				<h2>Fotos</h2>			
				<ul class="fotos">
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="#"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
					<li><a href="i.gif"><img src="i.gif" title="miniatura de img" alt="" /></a></li>
				</ul>
				<a href="#" class="vermais" title="veja mais fotos">Ver mais</a>
				
			</div><!-- fim das fotos -->

			<div id="wallpapers">
				
				<h2>Wallpapers</h2>
					<ul class="wallpapers">
						<li><img src="i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
							
						<li><img src="i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
						
						<li><img src="i.gif" title="" alt="" />
							<ul class="linkdown">
								<li><a href="#">800x600</a></li>
								<li><a href="#">1024x768</a></li>
								<li><a href="#">1280x960</a></li>
							</ul>
						</li>
												
					</ul>
					<a href="#" class="vermais">Ver mais</a>
					
			</div><!-- fim dos wallpapers -->

			<div id="muralrecados">
				<h2>Mural de recados</h2>
				<div id="mensagem">
					<ul>
						<li>
							<h3>Annyh</h3>
							<address>Curitiba - PR</address>
							<p class="mensagem">Fui no show de vocês, foi demais, gostei de todas as músicas, adoro vocês...</p>
						</li>
						
						<li>
							<h3>Junior Eberhardt</h3>
							<address>Joinville - SC</address>
							<p class="mensagem">Gosto das músicas de vocês, sempre ensaio para canta-las na noite, eu também sou cantor !!!</p>
						</li>
						
						<li>
							<h3>Annyh</h3>
							<address>Curitiba - PR</address>
							<p class="mensagem">Fui no show de vocês, foi demais, gostei de todas as músicas, adoro vocês...</p>
						</li>
						
					</ul>
				<a href="#" class="vermais">Ver mais</a>
				</div>
				
			</div><!-- fim do mural -->

			<div id="faclube">
			
				<h2>Fã clube</h2>			
				<form method="post" action="#">
					<fieldset>
						<p>Faça seu login para ter acesso a área exclusiva do site.</p>
						<label for="faclube_mail">Email:</label><input type="text" id="faclube_mail" /><br />
						<label for="faclube_senha">Senha:</label><input type="password" id="faclube_senha" /><br />                                                       
						<button type="submit">Login</button><br /><br />
						<a href="#">Esqueci minha senha</a><br />
						<a href="#">Quero me cadastrar</a>
					</fieldset>
				</form>
				
			</div><!-- fim do fã clube -->				

			<div id="novidades">
			
				<h2>Novidades</h2>
					<form method="post" action="#">
						<fieldset>
							<p>Receba nossas novidades!</p>
							<label for="novidades_nome">Nome:</label><input type="text" id="novidades_nome" /><br />
							<label for="novidades_mail">Email:</label><input type="password" id="novidades_mail" /><br />
							<button type="submit">Inscrever</button>
						</fieldset>
					</form>
					
			</div><!-- fim novidades -->				

			<div id="enquete">
				<h2>enquete</h2>
					<form method="post" action="#">
						<fieldset>
							<p>Qual a música da dupla que você mais gosta?</p>
								<ul class="radio">
									<li><input type="radio" name="radio" value="opc1" id="opc1" checked="checked" /><label for="opc1">Sei lá</label></li>
									<li><input type="radio" name="radio" value="opc2" id="opc2" /><label for="opc2">Sei cá</label></li>
									<li><input type="radio" name="radio" value="opc3" id="opc3" /><label for="opc3">Sei sim</label></li>
									<li><input type="radio" name="radio" value="opc4" id="opc4" /><label for="opc4">Sei não</label></li>
								</ul>
							<button type="submit">Votar</button>
							<a href="#">Ver parcial</a>
						</fieldset>                             
					</form>
					
			</div><!-- fim enquete -->


		</div>
		
	</body>
</html>

Thiago Retondar · Maio 2, 2010

Annyh,

testei seu código aqui no Opera 10.52, Google Chrome 5 e Firefox 3.6 e todos estão iguais (todos versões for Linux).

Pode postar uma screenshot do erro?

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

Annyh · Maio 2, 2010

Tiago, é coisa mínima, mas sou perfeccionista... hehehe.

olha só:

Imagem Postada

olha com atenção os links (ver mais)... estão desalinhados no CHROME...

e não são só os links, tenho formulários nas divs, e os botões de envio no FF fica perfeito, mas no CHROME, fica ruim, minhas labels tambem a mesma coisa...

Thiago Retondar · Maio 2, 2010

Annyh,

incrivelmente ainda não entendi o erro. As duas imagens para mim estão iguais. @_@ Testei de novo aqui e não achei problema.

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

Annyh · Maio 2, 2010

olha a primeira imagem do CHROME...

a terceira div da esquerda para direita tem um link "Ver mais"...

no CHROME este link esta desalinhado, é só comparar com a imagem do FF...

Thiago Retondar · Maio 2, 2010

Medi aqui e, da barra de rolagem, até o Ver mais tem 74px de distância em ambas imagens.

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

Annyh · Maio 2, 2010

mas o alinhamento vertical... esse é o problema...

Thiago Retondar · Maio 2, 2010

AHAUHAUHAUHAUHAUHA Verdade. Nem tinha notado.

Tente eliminando o bloco div#muralrecados #mensagem .vermais

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

Annyh · Maio 2, 2010

eu tirei o bloco que você sugeriu, mas ai o link não fica no fim da div como esperado...

Evandro Oliveira · Maio 3, 2010

aplique isso aqui logo após a declaração do charset do seu CSS, que deve estar assim:

/* CSS Document */
@charset "utf-8"

body { ... }

...

...

vai ficar assim:

/* CSS Document */
@charset "utf-8"

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* remember to define focus styles! */
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

body { ... }

...
...

Annyh · Maio 3, 2010

eu tenho que reconhecer que os esforços de vcs estã sendo grandiosos, mas não deu certo não... hauahuahauahuahauahuahauahauahau

Thiago Retondar · Maio 3, 2010

É... Tá bem cabuloso isso. :P

Annyh, tem como colocar um link para o site? Acho que assim fica um pouco mais fácil. E coloca com o seu HTML e CSS atuais.

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

Annyh · Maio 3, 2010

olha o link ai:

pagina.html

no FF fica perfeito, com excessão dos radiosbutton que não consigo alinhar...

mas no Chrome os campos de textos ficam fora do lugar e no opera tambem...

Evandro Oliveira · Maio 4, 2010

#muralrecados #mensagem

antes

height: 257px;
margin: 1px 9px;

depois

height: 259px;
margin: 0 9px;

Foi a solução que eu encontrei que menos mexe no lay-out e fluxo

Annyh · Maio 4, 2010

vou te dizer uma coisa, não funfo aki...

o meu problema é que no Chrome e no Opera não esta ficando do jeito que deveria ficar, no FF ta beleza tudo certinho...

Arquivado

texto ou imagem no mesmo lugar especificado

Recommended Posts

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Thiago Retondar 18

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Annyh 4

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