Dependendo da resolução imagem ultrapassa a borda da direita

[mestre fyoda]

Eu testei na resolução 1024 e 1280, na 1024 fica tudo certo mas na 1280 a imagem passa a borda.

Editado Maio 19, 2010 por mestre fyoda

[*FIT*]

Na verdade isso vai ocorrer porque a div abaixo, aonde estão sendo expostos os produtos, está pegando o width em porcentagem, e essa imagem que fica acima, tem um tamanho fixo, aconselho que deixe a div de baixo com um tamanho fixo também.

[mestre fyoda]

*FIT* , qual div div eu terei que colocar valor fixo ?

Se é a div do .listaProdVitrine, não dá para usar fixo, pois eu preciso que a largura da div conteudo fique flexivel dependendo da resolução do usuario.

Editado Maio 19, 2010 por mestre fyoda

[_Vinny_]

*FIT* , qual div div eu terei que colocar valor fixo ?

Se é a div do .listaProdVitrine, não dá para usar fixo, pois eu preciso que a largura da div conteudo fique flexivel dependendo da resolução do usuario.

Qual é a DIV exatamente que tens o problema?

[*FIT*]

Se é a div do .listaProdVitrine, não dá para usar fixo, pois eu preciso que a largura da div conteudo fique flexivel dependendo da resolução do usuario.

Bom, nesse caso você vai ter problemas, porque a DIV aonde está o problema, está com valor fixo, valor esse que não vai bater com o outro, pois está proporcional.

Faça o seguinte, coloque as duas divs dentro de uma única, essa única você atribui o width de 98% para ficar do tamanho que você quer, e as duas de dentro, deixe com 100% o width, ai ambas vão ter o mesmo tamanho, e não vão ultrapassar o limite que você espera.

Abraços.

[mestre fyoda]

*FIT* , eu atualizei o site mas piorou ainda mais, eu devo estar fazendo alguma coisa errada .

O que está errado ?

OBS: Estranho que no IE piorou ainda mais e no FireFox continua a mesma coisa

Editado Maio 20, 2010 por mestre fyoda

[*FIT*]

O que exatamente você fez? poste a parte do css aqui.

[mestre fyoda]

#conteudoTodo
{
    width: 100%;   
}

.DesTaques
{    
    float: left;
    height: 33px;
    width: 98%;
    margin-top: 10px;    
}

.tituloVitrineHome 
{
    background: url(../img/images/fundo.png) no-repeat;
    height: 33px;
    width: 98%;
}

#conteudo .listaProdVitrine{
    width: 98%;
    float: left;
    padding-left: 2px;
    border: solid 4px #DDD;    
    overflow: hidden;
}

A div <div id="conteudoTodo"> foi adicionada depois da div Conteudo, e fechada antes da div Conteudo .

Editado Maio 20, 2010 por mestre fyoda

[*FIT*]

Eu acho que você entendeu errado, crie um div com 98% de width, e dentro dela coloque as duas divs, tituloVitrineHome e listaProdVitrine, ambas com 100%.

O que isso irá fazer, você terá um div que pegará os 98% que é a medida que você pretende para que não varie de acordo com a resolução, correto?

Dentro dessa, vai as outras duas, ambas com 100%, ou seja pegarão toda a área correspondente a anterior, que são os 98%.

Isso fará, que as divs mantenham o tamanho que você precise, mas ambas com o mesmo tamanho e unidade de medida, para que possam se equivaler no width.

[mestre fyoda]

FIT então eu fiz assim :

#conteudo
{
    float: left; 
    width: 78%; 
    margin-left: 15px;
}

#conteudoTodo
{
    width: 98%;   
}


.tituloVitrineHome 
{
    background: url(../img/images/fundo.png) no-repeat;
    height: 33px;
    width: 100%;
}

#conteudo .listaProdVitrine{
    width: 100%;
    float: left;
    padding-left: 2px;
    border: solid 4px #DDD;    
    overflow: hidden;
}

<!-- CONTEUDO -->
    <div id="conteudo">
        <div id="conteudoTodo">

            <div class="tituloVitrineHome" style="left: 0px; color: #666; padding-top: 10px; padding-left: 30px;"> Destaques</div>

            <asp:ListView runat="server" GroupItemCount="3" ID="ltvPromocao" DataKeyNames="pro_cod"> 
                <LayoutTemplate>
                    <div class="listaProdVitrine" style="padding-bottom: 10px;">
                        <ul>
                            <asp:PlaceHolder ID="GroupPlaceholder" runat="server" />
                        </ul>
                    </div>                    
                </LayoutTemplate>
                <GroupTemplate>
                    <li runat="server" id="itemPlaceholder"></li>
                </GroupTemplate>
                <ItemTemplate>
                    <li><asp:LinkButton ID="Detalhe" OnClick="Detalhe_Click" CommandArgument='<%# Eval("pro_cod") %>' runat="server">
                        <div style="padding-top:10px; text-align:center; height:170px;">
                            <div style="vertical-align: bottom">
                                <asp:Image ID="imagemProduto" ImageUrl='<%# Eval("pro_ima_pri", "redimensionarImagem.ashx?w=150&h=150&img=img/img_produto/{0}") %>' runat="server" />
                            </div>
                        </div>          
                        <!-- Nome do produto -->
                        <div class="nomeMercadoria" style="padding-top:3px; padding-left:10px;">
                            <asp:Label id="lblDescricaoProduto" runat="server" Text='<%# Eval("pro_nom") %>' ></asp:Label>
                        </div>
                        <div style="width: 190px; padding-top: 5px;">
                            <div class="quadroDesconto">
                                <div class="de" style="padding-left:10px; padding-top: 3px;">
                                    <asp:Label CssClass="de" Font-Bold="true" id="lblPrecoDe" runat="server" Text='<%# string.format( "&nbsp;&nbsp;De: {0}", FormatCurrency(Eval("pro_pre"))) %>' ></asp:Label>
                                </div>
                                <div class="por" style="padding-left:10px; padding-top: 3px;">
                                    <asp:Label CssClass="por" Font-Bold="true" id="lblPrecoPor" runat="server" Text='<%# string.format( "Por: {0}", FormatCurrency(Eval("pro_pre_ofe"))) %>' ></asp:Label>
                                </div> 
                            </div>
                        </div>
                        <div class="style3" style="clear: both; padding-left:10px; padding-top: 3px; height: 20px; text-align: center">
                            até 10x sem juros no cartão
                        </div></asp:LinkButton>
                        <div class="nomeMercadoria" style="padding-top: 10px; text-align: center; padding-left: 10px;">
                            <asp:LinkButton ID="lbkGrupo" OnClick="lbkGrupo_Click" CommandArgument='<%# Eval("gru_cod") %>' runat="server"><asp:Label Font-Bold="true" id="lblSubGrupo" runat="server" Text='<%# String.format("+ {0}", Eval("gru_nom")) %>' ></asp:Label></asp:LinkButton>
                        </div>
                        <div style="padding-left: 20px;"></div>
                    </li>    
                </ItemTemplate>
                <GroupSeparatorTemplate>
                    <div style="clear: both;">
                        <hr style="border-top: dashed 1px #999;" />
                    </div>
                </GroupSeparatorTemplate>
            </asp:ListView>
        </div>
    </div>

Seria isso ?

Se for isso aqui não deu certo.

Editado Maio 20, 2010 por mestre fyoda

[*FIT*]

Bom, teoricamente teria que resolver, e na verdade agora está certo, o que acontece é que a imagem "fundo.png" é menor do que a div, e por isso ela não preenche a div toda. Mas o css está correto.

[mestre fyoda]

esta estranho porque está ultrapassando .

[*FIT*]

O que ta ultrapassando é a div tituloVitrineHome, pois está com padding-left de 30px

tente zerar esse padding.

[Pedro Vítor10]

Olá, boa tarde, sou Pedro, e estou enfrentando problemas quanto a meu código em HTML / CSS. A borda da imagem está ultrapassando, ela não está acompanhando. Alguém poderia me ajudar ? Se puder enviar o código já editado, fico agradecido 

INDEX.HTML

<!DOCTYPE html>

<html lang="pt-br">

<head>

    <meta charset="UTF-8"/>

    <title>Tudo sobre Google Glass</title>

    <link rel="stylesheet" type="text/css" href="_css/estilo.css"/>

</head>

<body>

<div id="interface">

 

    <header id="cabecalho">

    <hgroup>

    <h1>Google Glass</h1>

    <h2>A revolução do Google está chegando</h2>

    </hgroup>

 

    <img src="_imagens/glass-oculos-preto-peq.png"/>

 

Menu Principal

- Home

- Especificações

- Fotos

- Multimídia

- Fale conosco

 

    </header>

 

<hgroup>

<h3>Tecnologia > Inovações</h3>

<h1>Saiba tudo sobre o Google Glass</h1>

<h2>Por Gustavo Guanabara</h2>

<h3>Atualizado em 23/Abril/2013</h3>

</hgroup>

 

<h2>O que é</h2>

<p>O <span style="font-weight:900;">Google Glass</span> é um acessório em forma de óculos que possibilita a interação dos usuários com diversos conteúdos em realidade aumentada. Também chamado de <i>Project Glass</i>, o eletrônico é capaz de tirar fotos a partir de comandos de voz, enviar mensagens instantâneas e realizar vídeo&shy;con&shy;ferên&shy;cias. Seu lançamento está previsto para 2014, e seu preço deve ser de US$ 1,5 mil. Atualmente o <em>Google Glass</em> encontra-se em fase de testes e já possui um vídeo totalmente gravado com o dispositivo. Além disso, a companhia de buscas registrou novas patentes anti-furto e de desbloqueio de tela para o acessório.</p>

 

<figure class="foto-legenda">

    <img src="_imagens/glass-quadro-homem-mulher.jpg"/>

    <figcaption>

    <h3>Google Glass</h3>

    <p>Uma nova maneira de ver o mundo</p>

    </figcaption>

</figure>

 

<h1>Data de lançamento</h1>

<p>Não há uma data específica e oficial para o dispositivo ser lançado, ainda. Pode ser que ele esteja disponível em demonstrações a partir de 2013, mas seu lançamento para as lojas fica para, pelo menos, 2014.</p>

 

<h1>Especificações Técnicas</h1>

Tabela Técnica do Google Glass Mar/2013

 

Tela:Resolução equivalente a tela de 25"

Camera: 5MP para fotos / 720p para vídeos

Conectividade: Wi-Fi/ Bluetooth

Memória Interna: 12GB

 

<h1>Como funciona</h1>

<p></p>De acordo com fontes próximas do Google, os óculos vão contar com uma pequena tela de LCD ou AMOLED na parte superior e em frente aos olhos do usuário. Com o uso de uma câmera e GPS, você pode se situar, assim como selecionar opções com o movimento da cabeça.</p>

 

<h1>O que você pode fazer com o Google Glasses</h1>

<p>O vídeo de divulgação do Google mostra que você pode se transformar em uma espécie de “super-<wbr/>humano”, já que o aparelho pode indicar a quantos metros você está de seu destino, se o metrô está aberto ou fechado, mostrar o clima, agenda e até mesmo permitir que você marque encontros apenas com comandos de voz.</p>

 

[AQUI ENTRA UM VÍDEO]

 

<h1>Outras Notícias</h1>

<h2>Vídeo mais recente</h2>

 

[AQUI ENTRA UM VÍDEO]

 

<h2>Novidades no Glass</h2>

<p>O Google enfim revelou as especificações completas do Google Glass, e com ele uma surpresa ainda inédita no mercado: a gigante das buscas usará um sistema de áudio baseado na transdução por condução. Através das hastes dos óculos, o som será transmitido para o ouvido do usuário por meio de microvibrações em determinados ossos de sua cabeça, sem usar nenhum tipo de alto-falante.</p>

 

<p>Além da surpresa do áudio, a tela montada a frente do olho do usuário também chamou atenção. Serão 640 x 360 pixels de resolução que, em proporção, equivaleria a um monitor de 25 polegadas de alta definição colocado a 2,5 metros de distância do espectador.</p>

 

<p>Copyright &copy; 2013 - by Gustavo Guanabara

Facebook | Twitter </p>

</div>

</body>

</html>

 

 

 CSS 

@charset "UTF-8";

 

body {

    background-color: white

    color rgba(0, 0, 0, 1);

 

}

p {

    text-align: justify;

    text-indent: 50px;

}

 

/* Formatação de imagens com legendas */

 

figure.foto-legenda {

    border: 8px solid red;

}

 

figure.foto-legenda img {

    width: 50%;

    height: 50%;

 

 

}

 

 

A imagem é essa, porém a borda não fica junta com o lado direito da imagem