[Resolvido] Imagem dentro de DIV e sobre um DIV

[Anderson Narciso 3]

Tenho essa parte do codigo.

 

CODE

<div id="head">

<hl>

<img src="img/logo.gif" alt="">

 

</hl>

</div><!-- Fim div#head -->

 

Com essa CSS

 

CODE

#head {

width:760px;

height:200px;

overflow:hidden;

background:#fff url('topo.gif') top no-repeat }

 

#head h1 {

float:left;

position: absolute;

top: 27px;

left: 24px;

}

 

Porque a imagem logo não segue (top: 27px; left: 24px;)?

Ela fica toda no lado <----

To me batendo aqui, ela ta dentro de um div e sobre o div head.

Alguém sabe?

[Anderson Narciso 3]

Me ferrei então? :(

Niguém sabe?

[Nícolas 4]

Da uma estudada melhor sobre CSS

 

Tem muito conteúdo a respeito aqui no fórum também.

 

<style type="text/css">
#head {
	width:760px;
	height:200px;
	overflow:hidden;
	background:#fff url('topo.gif') top no-repeat;
	padding-top: 27px;
	padding-left: 24px;
}
</style>

<div id="head">
	<hl><img src="img/logo.gif" alt=""></hl>
</div>

[Anderson Narciso 3]

Da uma estudada melhor sobre CSS

 

Tem muito conteúdo a respeito aqui no fórum também.

 

<style type="text/css">
#head {
	width:760px;
	height:200px;
	overflow:hidden;
	background:#fff url('topo.gif') top no-repeat;
	padding-top: 27px;
	padding-left: 24px;
}
</style>

<div id="head">
	<hl><img src="img/logo.gif" alt=""></hl>
</div>

\o/ te amo

 

hahaha me salvo muito obrigado brother, vou seguir teu conselho, eu tava usando esse padding mas era no head h1 =/ ai n adianto

Mas meu vlwww http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif http://forum.imasters.com.br/public/style_emoticons/default/clap.gif

[Anderson Narciso 3]

Brother resolvido ali, mas querendo entender, você colocou o padding no head e ele serviu pro logo e se eu quizer colocar mais imagens nesse head? com posicionamentos diferentes. :mellow::S

[programador php 0]

\o/ te amo

 

 

que papo é esse nick171

[Anderson Narciso 3]

lol

 

ciumes programador?

:D

[inforsis 1]

Brother resolvido ali, mas querendo entender, você colocou o padding no head e ele serviu pro logo e se eu quizer colocar mais imagens nesse head? com posicionamentos diferentes. mellow.gif:S

Você pode definir uma id para cada imagem, e aplicar respectivamente as regras. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Anderson Narciso 3]

Brother resolvido ali, mas querendo entender, você colocou o padding no head e ele serviu pro logo e se eu quizer colocar mais imagens nesse head? com posicionamentos diferentes. mellow.gif:S

Você pode definir uma id para cada imagem, e aplicar respectivamente as regras. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Sim mas o caso que o head ali é uma div fixa eh o topo e ele colocou os padding-top e left pra imagem "logo.gif" la dentro do div head entendes?

 

isso aqui (padding-left: 24px;) (padding-top: 27px;)

CODE

#head {

width:760px;

height:200px;

overflow:hidden;

background:#fff url('img/topo.gif') top no-repeat;

(padding-top: 27px;)

(padding-left: 24px;)

Funcionou para o logo.gif que está dentro de outra div em cima da div head

Então vou tem que criar outro "head" igual a esse acima para colocar o padding da proxima imagem? Não vai afetar em nada? Ou não entendi nada :S

[Nícolas 4]

heheh, deve ser porque mudei meu visual, depois que deixei o cabelo crescer o percentual de mulher que olha para mim aumentou em 35%.... e de homens em 47, hahahaha

 

Mas claro... olham com medo de perder a mulher.. antes que alguem diga alguma coisa pra me zuar, ahahaha

 

-------------

 

Bom cara, como eu disse o lance é você dar uma estudada e entender como funciona pra depois tentar quebrar a cabeça.

 

O que me ajudou muito no inicio e sempre to indicando é essa video aula que eles montam a home inteira do site da visie em tableless...

 

Tem uns efeitos sonoros bacanas no meio tipo, moto passando na rua, se pá até caminhão do gás, ahhaha

 

Mas é coisa inevitavel ^^

 

A Video aula é excelente e da para pegar muita coisa.

 

http://www.tableless.com.br/video-tutorial...me-da-visie-css

 

É 1 hora mas que conta muito

 

 

Mais alguns links.

http://www.tableless.com.br/explorando-o-tablelesscombr

 

Flw aeee

=)

[Anderson Narciso 3]

heheh, deve ser porque mudei meu visual, depois que deixei o cabelo crescer o percentual de mulher que olha para mim aumentou em 35%.... e de homens em 47, hahahaha

 

Mas claro... olham com medo de perder a mulher.. antes que alguem diga alguma coisa pra me zuar, ahahaha

 

-------------

 

Bom cara, como eu disse o lance é você dar uma estudada e entender como funciona pra depois tentar quebrar a cabeça.

 

O que me ajudou muito no inicio e sempre to indicando é essa video aula que eles montam a home inteira do site da visie em tableless...

 

Tem uns efeitos sonoros bacanas no meio tipo, moto passando na rua, se pá até caminhão do gás, ahhaha

 

Mas é coisa inevitavel ^^

 

A Video aula é excelente e da para pegar muita coisa.

 

http://www.tableless.com.br/video-tutorial...me-da-visie-css

 

É 1 hora mas que conta muito

 

 

Mais alguns links.

http://www.tableless.com.br/explorando-o-tablelesscombr

 

Flw aeee

=)

 

hahAHAhahaha caminhão do gás eh pra caba.

cara ja to baxando o video poxa uma hora da nada muito bom.

mas ei soh me diz ali ;x o que eu faço pra bota mais imagens em cima da head huhuhu

brigadão pela força até agora. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Nícolas 4]

Tenta postar uma imagem explicando como deve ficar o visual e explicando aonde cai cada imagem que ajuda mais porque li o que você escreveu e fiquei boiando =)

[Anderson Narciso 3]

Tenta postar uma imagem explicando como deve ficar o visual e explicando aonde cai cada imagem que ajuda mais porque li o que você escreveu e fiquei boiando =)

Como é para ficar

http://www.aguasdeitapema.com.br/layoutchs/assim.jpg

 

Fica assim

 

http://www.aguasdeitapema.com.br/layoutchs/ficaassim.jpg

 

codigo do logo que você disse para colocar é

CODE

#head {

width:760px;

height:200px;

overflow:hidden;

background:#fff url('img/topo.gif') top no-repeat;

padding-top: 27px;

padding-left: 24px;

}

CODE

<html>

 

<head>

 

<link type="text/css" href="style.css" rel="stylesheet" title="Padrão" />

 

<title>CSH</title>

</head>

 

<body id="body">

 

 

<div id="head">

<hl>

<img src="img/logo.gif" alt="Challenge">

 

</hl>

 

</body>

 

</html>

pro logo funcionou e agora para o resto das imagens que vão em cima desse DIV HEAD? Como você pode ver vou ter que alinha o menu e faze o repeat-x dessa barrinha lazarenta ai que não que alinhar.

Entendeu? :(

Sempre usei taberlas por isso to apanhando.

Mas chega de tabelas, coisa do passado.

[Anderson Narciso 3]

Ei pessoal obrigado por toda ajuda.

Consegui resolver o problema

Eu tava viajando pensava que n importava o lugar que o codigo css estaria na lista tipo

 

#h2 {

margin-left:177px; (por primeiro)

margin-top:-120px; (por segundo)

display:block;

width:15px

height:85px

z-index:8;

visibility:visible;

background: url('img/barra.gif') repeat-x;

 

 

Eu colocava la em baixco o codigo ou no meio.. viaje e falta de atenção

mas ja aprendi vlw a ajuda denovo.

Na real nem é bom colocar margin-top e left e sim soh margin, assim economizando bytes no css ficando mais leve, usa soh usa só margin: 10px 0 0 10px; (exemplo)

Abraço.

[Nícolas 4]

Ei pessoal obrigado por toda ajuda.

Consegui resolver o problema

Eu tava viajando pensava que n importava o lugar que o codigo css estaria na lista tipo

 

#h2 {

margin-left:177px; (por primeiro)

margin-top:-120px; (por segundo)

display:block;

width:15px

height:85px

z-index:8;

visibility:visible;

background: url('img/barra.gif') repeat-x;

 

 

Eu colocava la em baixco o codigo ou no meio.. viaje e falta de atenção

mas ja aprendi vlw a ajuda denovo.

Na real nem é bom colocar margin-top e left e sim soh margin, assim economizando bytes no css ficando mais leve, usa soh usa só margin: 10px 0 0 10px; (exemplo)

Abraço.

heheh agora que eu to em casa e ia responder...

^^

 

Quando eu acessava tava mandando do trampo, la até da pra acessar com os chefes por perto pq é importante postar pesquisas também, afinal trabalho nessa área.

 

Mas só não pode ficar muito tempo, precisa ser raramente e tal.

 

Bom, mas espero que a video aula tenha ajudado (y)

 

Quanto a abreviações de CSS, tem muitas.

 

 

 

Margin que é identico ao padding - obs: para memorizar a ordem dos atributos na abreviação é facil, é só você reparar que você joga os valores no sentido horario: cima, esquerda, baixo, direita.

margin-top: 15px;
	margin-left: 20px;
	margin-bottom: 25px;
	margin-right: 30px;

margin: 15px 20px 25px 30px;

 

Background

background-color: #FFF;
	background-image: url(imagem.jpg);
	background-repeat: no-repeat;
	background-position: top left;
	background-attachment: scroll;

background: #FFF url(imagem.jpg) no-repeat top left scroll;

 

Fonte

font-weight: bold;
	font-style: italic;
	font-size: 12px;
	line-height: 15px;
	font-family: Verdana, Arial, Helvetica, sans-serif;

font: bold italic 12px/15px Verdana, Arial, Helvetica, sans-serif;

 

Ainda tem mais como border, list-style, ou os não muito conhecidos outline, speak e etc.

 

Até código de cor RGB você pode abreviar.

 

http://www.maujor.com/tutorial/cores.php

http://www.maujor.com/tutorial/abreviacss.php

 

Flw aee

[Anderson Narciso 3]

Poooxa brigadão heim, copiei tudo aqui!

Vlw a força.

Abraço.

[brcontainer 16]

Ehtnies acho que seu problema já ta resolvido né

qualquer coisa volte a perguntar

 

falow ;)