Html5 + CSS3- Tem comocolocarimagem no aside pelo css

tadeu.henrique.da.costa · 14 de fevereiro de 2014

Pessoal estou iniciando na areade programação para web.

Estou fazendo um exercicio em que preciso colocar uma imagem de modoqueficaria a imagem e do lado um textosobre a imagem .

Fiz diversas tentativase teste mais nãoobtive exito.

Gostariada ajuda de vocês!!!!

Agradeço desde já.

DiF · 14 de fevereiro de 2014

Olá,

primeiramente bem vindo ao fórum.

Por gentileza poderia postar suas tentativas? assim poderemos lhe ajudar de forma mais efetiva.

Att,

Dif

tadeu.henrique.da.costa · 15 de fevereiro de 2014

Bom dia amigo agradeço a saudação.

Vou lhes enviar umas das minhas tentativas que ate consigui colocar a imagem o problema é alinhar ela de forma que apareça ela e o texto ao lado.

Desculpa se ficar um pouco confuso os links.

Agradeço desde já.

HTML

<!Doctype html><html lang= "pt-br">         <head><title>1974</title><meta charset="utf-8"><link type="text/css" rel="stylesheet" href="Estilo1974.css" />         </head>                   <body>                   <header>                  <p><h1> Surgimento da Telnet<h1></p>                                    </header>      <nav>       </nav><article><p>Telenet era um pacote comercial americano rede que entrou em serviço em 1974. [1] Foi o primeiro serviço de rede de comutação de pacotes , que estava disponível para o público em geral comutada. [2] Vários interesses comerciais e governamentais pagas taxas mensais para linhas dedicadas de conexão seus computadores e redes locais para a rede backbone . Acesso gratuito discada público para Telenet , para aqueles que desejavam acessar esses sistemas , foi fornecido em centenas de cidades em todo os Estados Unidos .A empresa fundador original Telenet Inc. , foi criada por Bolt Beranek and Newman ( BBN) e recrutou Larry Roberts ( ex-chefe da ARPANET ), como presidente da empresa , e Barry Wessler . GTE Telenet adquirido em 1979. [3] Mais tarde foi adquirida pela Sprint e chamado de " Sprintnet " . Sprint migraram clientes de Telenet ao SprintLink [4] rede IP moderna , uma das muitas redes que compõem a Internet de hoje . Telenet teve seus primeiros escritórios no centro de Washington DC, em seguida, mudou-se para McLean , Virginia . Foi adquirida pela GTE enquanto em McLean, e depois mudou-se escritórios em Reston , Virginia .De acordo com os vários nomes, a empresa operava uma rede pública, e também vendeu seu equipamento de comutação de pacotes para outras operadoras e grandes redes corporativas .<p></article><aside><img src="Categories-applications-internet-icon.png" alt="Imagem de um globo." width="256" heigth="256" /></aside></body><section></section<section></section><footer></footer></html>

CSS

@charset "UTF-8";/* Nome: Projeto site sobre jogos.   Data:11/02/2014   Descrição: Criação do site sobre jogos   Versão:0.0   Autor: Tadeu Costa   */body { background-color:orange; }section, article, header, footer, aside, nav {	background-color:#F0FFF0;	border:3px solid #FFEBCD;	margin:10px;		ul li { display:inline; }}h3 { text-align:center; }nav { background-color:#FFFFF0; }    div {    background: url(Debris-LEO1280.jpg) no-repeat center,       }

waghcwb · 3 de março de 2014

Amigo, não entendi muito bem o que você quer ainda, mas vamos lá, você deseja por a imagem em um canto e o texto ao lado dela certo? Partindo desse principio podemos supor que a imagem vai ficar dentro do mesmo elemento que o texto, no caso vou usar um section como exemplo! Então teriamos o seguinte HTML

<section>  <img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Categories-applications-internet-icon.png" alt="Internet icon" />  <p>Telenet era um pacote comercial americano rede que entrou em serviço em 1974. [1] Foi o primeiro serviço de rede de comutação de pacotes , que estava disponível para o público em geral comutada. [2] Vários interesses comerciais e governamentais pagas taxas mensais para linhas dedicadas de conexão seus computadores e redes locais para a rede backbone . Acesso gratuito discada público para Telenet , para aqueles que desejavam acessar esses sistemas , foi fornecido em centenas de cidades em todo os Estados Unidos .        A empresa fundador original Telenet Inc. , foi criada por Bolt Beranek and Newman ( BBN) e recrutou Larry Roberts ( ex-chefe da ARPANET ), como presidente da empresa , e Barry Wessler . GTE Telenet adquirido em 1979. [3] Mais tarde foi adquirida pela Sprint e chamado de " Sprintnet " . Sprint migraram clientes de Telenet ao SprintLink [4] rede IP moderna , uma das muitas redes que compõem a Internet de hoje . Telenet teve seus primeiros escritórios no centro de Washington DC, em seguida, mudou-se para McLean , Virginia . Foi adquirida pela GTE enquanto em McLean, e depois mudou-se escritórios em Reston , Virginia .        De acordo com os vários nomes, a empresa operava uma rede pública, e também vendeu seu equipamento de comutação de pacotes para outras operadoras e grandes redes corporativas .  <p></section>

Note que não fiz o documento completo, apenas estou lhe dando o exemplo!

Agora para que essa imagem fique de um lado e o texto próximo a ela, faça o seguinte no CSS

section img{  float: left;}

Usei essa forma de selecionar porque temos apenas esse elemento no documento, mas se você tiver outras imagens dentro dos seus sections é melhor atribuir classes as suas imagens e estilizar através delas.

Você ainda pode melhorar isso adicionando um margin na imagem para que o texto não fique tão junto

section img{  float: left;  margin: 0 25px 10px 0;}

Lembrando, apenas imaginei que fosse esse o efeito que você desejava! Caso não seja isso, avisa ai para a gente tentar te ajudar

tadeu.henrique.da.costa · 4 de março de 2014

Cara você me salvou .

Obrigadão

Abraços e boa sorte.

Entrar

Html5 + CSS3- Tem comocolocarimagem no aside pelo css

Posts recomendados

tadeu.henrique.da.costa

DiF

tadeu.henrique.da.costa

waghcwb

tadeu.henrique.da.costa

Arquivado

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos