CSS Carregar imagem com float

[felipemaluco]

Boa noite

Estou há mais de uma semana com um problema no código CSS dos meus estudos. O curso pede que eu faça esse código de CSS, para que o banner fique centralizado na tela, porém a imagem acaba ficando abaixo e se eu coloco um float: right; na div, o rodapé desconfigura. Segue código e print do resultado.

PS: Se existir um tópico relacionado, me indiquem. Em anexo o código CSS para análise

 primeira imagem com float

Segunda, abaixo, sem

 

 

reset.txt

[DiF]

Caro usuário,

 

Seja bem-vindo ao Fórum do Clube do Hardware.

 

No intuito de servir como fonte de pesquisa no caso de instituições de ensino, informamos que incorrer no resolvimento por completo de questões relacionadas a disciplinas escolares de cursos técnicos e faculdades podem ser revistas e removidas pela Equipe de Moderação do Clube do Hardware.

 

Para sanar dúvidas sobre esse tipo de problema, por gentileza, publique o passo a passo do desenvolvimento da questão, projeto, monografia ou conteúdo em dúvida para que possamos analisar se a resposta está correta ou não, ou para que possa ser auxiliado com a dúvida no desenvolvimento do exercício.

 

Infelizmente, não há como resolver os trabalhos pelos usuários. O objetivo do Fórum do Clube do Hardware é auxiliar seus usuários a encontrar soluções para que possam sanar suas dúvidas, e não de trazer soluções prontas para seus usuários. Além disso, copiar e colar respostas que não são de autoria própria do qualquer usuário é considerado plágio, o que é ilegal.

 

Esperamos que compreenda.

 

Atenciosamente,

Equipe Clube do Hardware

[felipemaluco]

@DiF Mas esse trabalho é meu e não é pra faculdade, é um curso livre que estou fazendo.

O exercício trata a imagem como um banner que deve ficar ao centro da tela, coisa que eu, seguindo o que foi proposto, fiz mas deu errado e não consigo identificar o erro.

[DiF]

@felipemaluco Essa resposta anterior é de praxe. Como você mencionou curso, apliquei uma resposta padrão para a ocasião.

 

Então, sobre o seu erro, se não postar o que tentou fazer fica difícil de ajudar.

Posta o código CSS e a estrutura html que você fez.  Não esqueça de usar o botão CODE para postar o código.

[felipemaluco]

Esse é o CSS, mais abaixo o HTML onde esse CSS deve se aplicar

.busca,
.menu-departamentos{
    float: left;
    background-color: #DCDCDC;
    font-weight: bold;
    text-transform: uppercase;
    margin-right: 1px;
    width: 250px;
}
.busca h2,
.busca form,
.menu-departamentos h2 {
    margin: 1px;
}
.menu-departamentos li{
    background-color: white;
    margin-bottom: 1px;
    padding: 5px 10px;
}
.menu-departamentos{
    clear: right;
    text-transform: uppercase;
    margin-top: 2px;
    padding-bottom: 2px;
}
.menu-departamentos a{
    color: turquoise;
    text-decoration: none;
}
.busca input[type=search]{
    width: 150px;
}
.item-menu{
    text-decoration: none;
}
.banner-destaque{
    float: left;
    width: 0px;
    margin-top: auto;
    margin-right: 0px;
}

<div class="container destaques">
            <!--Painel de Destaques-->
            <section class="busca">
                <h2>Busca</h2>
                <form>
                    <input type="search">
                    <button>Buscar</button>
            <section class="menu departamentos"></section>
                    <h2>Departamentos</h2>
                    <nav>
                        <ul>
                            <li><a href="#">Blusas e camisas</a></li>
                            <li><a href="#">Calças</a></li>
                            <li><a href="#">Saias</a></li>
                            <li><a href="#">Vestidos</a></li>
                            <li><a href="#">Sapatos</a></li>
                            <li><a href="#">Bolsas e Carteiras</a></li>
                            <li><a href="#">Acessórios</a></li>
                        </ul>
                    </nav>
                </form>
                <!--fim do menu-departamentos-->
            </section>
            <section class="banner-destaque">
                <figure>
                <img src="img/destaque-home.png" alt="Promoção: Big-City Night">
                </figure>
            </section>
            <!--fim do banner-->
        </div>

E agora um print do resultado, quase como deveria, pois a frase acima da imagem é um rodapé.

Eu to pensando em dimensionar a imagem via CSS, já que ela é grande demais.

[Rezando Casto]

Existem problemas nas suas tags HMTL. Você fechou algumas no lugar errado e não fechou outras. Isso pode estar causando o problema na formatação. Corrija isto, e me diga se isso por si só resolve o problema ou não.