Solucionado (ver solução)

Solucionado
(ver solução)

5
respostas

Referente ao curso HTML5 e CSS3 I: Suas primeiras páginas da Web, no capítulo Posicionamento mais a fundo e atividade Posicionamento mais a fundo

por ARTHUR DA SILVA NUNES

| 51.7k xp | 13 posts

Pessoal, eu segui o mesmo esquema do professor sobre como colocar a foto e o menu dentro do main (.corpo-pagina). Porém a imagem fica do lado de fora, como vocês podem ver no link a seguir. Outro detalhe é, se eu deixo o width: 15% ao invés de 10% no aside e imagem (.menu-pagina, img), a largura da imagem é afetada. Queria saber como resolver isso!

https://pasteboard.co/HrfLoIO.png

CÓDIGO CSS

.corpo-pagina {
    background-color: #F2FFFC;
    font-family: "Crimson Text", serif;
    font-size: 120%;
    line-height: 1.5;
    float:left;
    width: 85%;

}

.corpo-pagina h1 {
    background-color: #851944;
    color: #FFF;
    text-align: center;
    padding: 20px;
    margin: 0;
    border-bottom: 10px solid black;
    font-size: 60px;
    text-transform: uppercase;

}
h1 {
    font-family: "Arial Black", sans-serif;
    font-size: 30px;
}

h2 {
    clear: both;
    font-family: "Arial", sans-serif;
    font-size: 30px;
}

h3 {
    font-family: "Arial Black", sans-serif;   
}

.texto-pagina {
    width:720px;
    margin: auto;
    padding: 30px 0;
}

p {
    font-family: "Roboto", sans-serif;
    text-align: justify;
    margin: 20px 0;
}

blockquote {
    background-color: #D3DDDA;
    padding: 16px;
    border: 10px solid #C2CCCA;
    width: 250px;
    margin: 20px 40px;
    box-sizing: border-box;
    border-bottom-color: #333;
    border-right-color: #FFF;   
}

.peça {
     float: right;
}

.votorantim {
     float: left;
}

.menu-pagina, img {
    font-family: "Roboto", sans-serif;
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
    float: left;
    line-height: 1.2;
    width: 10%;  
    height: 200px;
    position:static;
    box-sizing: border-box;


}

.menu-pagina h1 {
    color: inherit;
    margin: 10px;
    font-size: 20px;
}

.menu-pagina {
    clear:right;
    box-sizing: border-box;
}

nav a {
    color: #F2FFFC;
}

.icones-sociais li {
    display: inline-block;
    height: 40px;
}

.rodape-pagina {
    background-color: #000;
    color: #F2FFFC;
    padding: 5px;
    font-family: 'Roboto', sans-serif;
    background-color: #000;
    clear: both;
}

.leia-mais {
    padding: 8px;
    margin: 16px;
    display: block;
    font-size: 24px;
    text-align: center;
    background-color: #E6E7E8;
}

.icones-sociais a {
    width: 40px;
    height: 40px;
    display: inline-block;
    text-indent: -9999px;
}

.linkedin {
    background-image: url(linkedin.png);    
}

.twitter {
    background-image: url(twitter.png);
}

.github{
    background-image: url(github.png);
}

5 respostas

por Lucas Amaral Taylor

| 130.7k xp | 59 posts

24/06/2018

Olá, tudo bom? Sobre a largura da imagem ser afetada: acontece pelo fato de ser uma maneira do próprio de navegador de deixa-la proporcional (para não ficar mais esticado verticalmente ou horizontalmente), tente utilizar outra forma de medida como o "px" ou as medidas relativas que é a primeira aula do próximo módulo (em, rem e ch)Sobre ela estar distante do conteúdo principal, tente alterar os valores de margin, border ou padding no próprio html ou da imagem.Espero ter ajudado!

por Eduardo Rodrigues da Silva

| 34.8k xp | 2 posts

estagiario

26/06/2018

Oi tudo bem? Amigo você esta usando o position: static; talvez isso esteja te impedindo de ter controle total de seu menu e imagem, aconselho que tente usar position: absolute e controlar com espaçamentos. Se conseguir alguma mudança mas não der certo tenta enviar o html para que pessoal do fórum possa ajudar melhor!

por ARTHUR DA SILVA NUNES

| 51.7k xp | 13 posts

26/06/2018

Pessoal, ainda não encontrei nenhuma solução. É como se tivesse algo sobrescrevendo a "position" do menu e da foto. porém, eu não faço ideia o que seja isso. :(

CÓDIGO HTML

<!DOCTYPE html>

Sobre mim

Com 24 anos de idade, morando em São Paulo/capital, sou designer gráfico há 04 anos, sou apaixonado por cores, traços, formas e códigos.

Procuro sempre me atualizar e expandir meu conhecimento para novas ideias e funcionalidades, este pensamento me fez ingressar no front-end development, acredito que saber HTML, CSS e JavaScript é fundamental para obter resultados melhores, projetando sites que oferecem ótimas experiências aos usuários.

Design

Tenho ótima experiência na criação de layouts, sejam eles para sites institucionais, blogs, lojas virtuais, malas diretas ou sistemas.

Também não trabalho com prazos fechados: qualidade é importante demais para ser sacrificada.

Arthur é o melhor designer com quem já trabalhei. Muito efitivo e dedicado no seu trabalho. Recomendo a todos!
Ricardo Silva, Canal da Peça

Experiência

Arthur consegue entender as tecnologias como ninguém. Eu apresentava um problema, ele tinha a solução na ponta da língua.
Felipe Gaspar, Grupo Votorantim

Já desenvolvi projetos para grandes empresas como Mitsubishi, JBS e IBM. Neles, o foco principal era entregar uma amostra digital de um brinde personalizado para divulgação, o resultado foi positivo e impactante para o usuário final.

Responsabilidades:

- Promoção: Preparação de email Marketing e envio (foco/público/época) - Elaboração Visual: Lay Out / Imagens site / Banner / Site -Contato com Área de Vendas: Interatividade

Competência:

- Criatividade - Trabalho em Equipe -Conhecimento Técnico.

Entre em Contato

11 99121.8749

arthursn193@gmail.com

Arthur Nunes

solução!

por Lucas Amaral Taylor

| 130.7k xp | 59 posts

27/06/2018

.menu-pagina, img {
    font-family: "Roboto", sans-serif;
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
    float: left;
    line-height: 1.2;
    width: 10%;  
    height: 200px;
    position:static;
    box-sizing: border-box;

Ao invés de colocar o Position static, tente colocar:

    position: absolute;
    top: x px;
    right: y px ;
    height: z px;
    padding: w px;

No caso w,x,y e z são incógnitas para números que deseja posicionar a img.

((Está é um solução encontrada com base no próximo módulo))

Mas baseando-se no módulo atual, ainda sugiro que altere ou defina os valores da margin, padding e border dos elementos de preferência utilizando a mesma unidade de medida (px ou "%")

por ARTHUR DA SILVA NUNES

| 51.7k xp | 13 posts

27/06/2018

Cara, valeu pelo Help. Me baseando no que tu disse, acabei lidando com alguns problemas para endireitar o menu e a imagem. Eu tinha percebido alguns erros que eu fiz:

Em vez de deixar o width: 90% do .corpo-pagina (main), deixei 100%. Assim ele pega todo o corpo do site, sem deixar aquela imagem branca lateral

E com a sua sugestão de controlar o menu e a imagem através do position, height, right e top, consegui endireitar o menu e a imagem, porém só deu certo quando separei a imagem e o menu em duas funções separadas.

.corpo-pagina {
    background-color: #F2FFFC;
    font-family: "Crimson Text", serif;
    font-size: 120%;
    line-height: 1.5;
    width: 100%;
    float: left;  
}
.menu-pagina {
    font-family: "Roboto", sans-serif;
    background-color: #3C1D3D;
    color: #F2FFFC;
    text-align: center;
    float: left;
    position: absolute;
    width: 10%;
    top: 20%;
    right: 0% ;
    height: 18%;
    padding: none;
    box-sizing: border-box;

}
img {
    clear:right;
    width: 10%;
    position: absolute;
    top: 0%;
    right: 0% ;
    height: 20%;
    padding: none;     
}