0

@charset="UTF-8";
@import url('https://fonts.googleapis.com/css?family=Krub');
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
/* CSS Document */

header {
	width:1900px;
	height:100px;
	margin:auto;
	background-color:black;
	font-family: 'Krub', sans-serif;
	color:white;
}
body{
    background-color: #363636;
}

nav {
	width:1900px;
	height:50px;
	margin:auto;
	background-color:#ff4425;
	font-family: 'Krub', sans-serif;
	position:absolute;
	display:table;
	top:100px;
	right:0px;
    border:none;
}

.button{
	float:left;
	color:black;
	border:none;
	background-color:#ff4425;
	transition-duration:1s;
	height:50px;
	width:100px;
	font-family: 'Krub', sans-serif;
	align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.computadores{
	float:left;
	color:black;
	border:none;
	background-color:#ff4425;
	transition-duration:1s;
	height:50px;
	width:150px;
	font-family: 'Krub', sans-serif;
	
}

.computadores:hover{
	background-color:white;
	color:black;
	border: 0.5px solid #2f3542;
	font-family: 'Krub', sans-serif;
	cursor:pointer;
}

.button:hover{
	background-color:white;
	color:black;
	border: 0.5px solid #2f3542;
	font-family: 'Krub', sans-serif;
	cursor:pointer;
	-webkit-transition:1s; /*Chrome e Safari */
}

#crono {
    color:#F26B38 ;
    background-color:#2A2A2A;
    font-family: 'Varela Round', sans-serif;
    font-size: 30px;
    border:none;
    
}
    
}

#destaque {
    font-family: 'Varela Round', sans-serif;
    background-color:white;
    color:black;
    display:table;
}

section{
	height:1000px; 
	width:600px;
	color:white;
}
atricle.crono{
	height:500px;
	width:300px;
	
	font-family: 'Krub', sans-serif;
}

.saiba{
    background-color:white;
    color:black;
    border:none;
    width:200px;
    height:100px;
    font-size: 28px;
    font-family: 'Krub', sans-serif;
    transition:0.5s;
    border:5px solid black;
    
}

.saiba:hover{
    color:white;
    background-color:black;
    border:none;
    width:200px;
    height:100px;
}

#bulldog{
    color:#e84118;
    background-color:#2A2A2A;
    font-family: 'Varela Round', sans-serif;
    border:none;
    margin-left:800px;
    
    
}
<!Doctype HTML>
<html>
<head>

<meta charset= "UTF-8"/>
<title>Alfa Hardware</title>

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

</head>
<body>
<div>

<header>
<h1 align="center" >ALFA HARDWARE</h1>
</header>

<nav>
<a href="index.html"><button class="button">INÍCIO</button></a>
<a href="_sections\computers.html"><button class="computadores">COMPUTADORES</button></a>
<a href="index.html"><button class="button">NOTEBOOKS</button></a>
<a href="index.html"><button class="button">CELULARES</button></a>
<a href="index.html"><button class="button">PERIFÉRICOS</button></a>
<a href="index.html"><button class="button">SOFTWARES</button></a>


</nav>

<section>
    <div id="destaque">
    <article style="float:left;">
    
    <div id="crono">
        <h1 style="display:block;">
        NZXT CRONOS
        </h1>
        <br>
    <span>A NOVA GERAÇÃO DE COMPUTADORES</span>
        
    <img style = "height:500px; width: 700px;"src= "_images/crono.png">
        <a href=""><button class="saiba">SAIBA MAIS </button></a>
        
    </div>
    </article>
    
    <article style="float:left;">
        
        <div id="bulldog">
        <img style= "height:500px; width: 700px;" src="_images/bulldog.png">
            
            
            
    </div>
    </article>
        
    </div>
</section>

</div>
</body>
</html>

Olá, estou com uma dúvida no CSS, onde tento alinhar uma imagem para a direita, já tentei o comando "float:left;", e já usei até mesmo o comando "margin-left", onde consegui mover a imagem para o lado, mas não ficou alinhado. Como eu consigo alinhar a imagem ? Quem puder me ajudar, ficaria muito grato. OBS: Sou iniciante em HTML.

inserir a descrição da imagem aqui

2
  • Lucas sem o código não da para te dar uma resposta precisa, por favor edite a sua pergunta e inclua seu HTML e CSS
    – hugocsl
    Commented 30/10/2018 às 15:17
  • Desculpa, eu tinha me esquecido de inserir o código. Commented 30/10/2018 às 15:21

2 Respostas 2

5

Lucas seu código está bem estranho... na verdade está com propriedades CSS aplicadas de forma equivocada, por exemplo sua section está com 600px, de largura, sendo que cada imagem sua tem 700px de largura... assim não tem como ficar uma do lado da outra... Alé disso a palavra article estava escrito errado e o css não estava sendo aplicado no elemento.

Cara vou ser bem sincero com vc, estou vendo que vc está começando. Acho que o basicão vc já sabe, mas pare um pouco para estudar os fundamentos. Estudo FlexBox, Position e Display do CSS que vai te ajudar para o resto da vida. E não tenha medo de começar novamente esse projeto do 0, mas de forma mais organizada no CSS.

Olha ai o seu código, execute em tela toda que vc vai ver que agora fica uma do lado da outra, simplesmente pq agora cabem as duas na mesma linha... Mas se eu fosse vc deletaria tudo e parava pra estudar um pouco mais antes de seguir, pq esse layout nunca vai ficar bom e vai te dar problema no futuro...

@charset="UTF-8";
@import url('https://fonts.googleapis.com/css?family=Krub');
@import url('https://fonts.googleapis.com/css?family=Varela+Round');
/* CSS Document */

header {
	width:1900px;
	height:100px;
	margin:auto;
	background-color:black;
	font-family: 'Krub', sans-serif;
	color:white;
}
body{
    background-color: #363636;
}

nav {
	width:1900px;
	height:50px;
	margin:auto;
	background-color:#ff4425;
	font-family: 'Krub', sans-serif;
	position:absolute;
	display:table;
	top:100px;
	right:0px;
    border:none;
}

.button{
	float:left;
	color:black;
	border:none;
	background-color:#ff4425;
	transition-duration:1s;
	height:50px;
	width:100px;
	font-family: 'Krub', sans-serif;
	align-content: center;
    margin-left: auto;
    margin-right: auto;
}

.computadores{
	float:left;
	color:black;
	border:none;
	background-color:#ff4425;
	transition-duration:1s;
	height:50px;
	width:150px;
	font-family: 'Krub', sans-serif;
	
}

.computadores:hover{
	background-color:white;
	color:black;
	border: 0.5px solid #2f3542;
	font-family: 'Krub', sans-serif;
	cursor:pointer;
}

.button:hover{
	background-color:white;
	color:black;
	border: 0.5px solid #2f3542;
	font-family: 'Krub', sans-serif;
	cursor:pointer;
	-webkit-transition:1s; /*Chrome e Safari */
}

#crono {
    color:#F26B38 ;
    background-color:#2A2A2A;
    font-family: 'Varela Round', sans-serif;
    font-size: 30px;
    border:none;
    
}
    
}

#destaque {
    font-family: 'Varela Round', sans-serif;
    background-color:white;
    color:black;
    display:table;
}

section{
	height:1000px; 

	color:white;
}
article.crono{
	height:500px;
	width:300px;
	
	font-family: 'Krub', sans-serif;
}

.saiba{
    background-color:white;
    color:black;
    border:none;
    width:200px;
    height:100px;
    font-size: 28px;
    font-family: 'Krub', sans-serif;
    transition:0.5s;
    border:5px solid black;
    
}

.saiba:hover{
    color:white;
    background-color:black;
    border:none;
    width:200px;
    height:100px;
}

#bulldog{
    color:#e84118;
    background-color:#2A2A2A;
    font-family: 'Varela Round', sans-serif;
    border:none;
    /* margin-left:800px; */
    
    
}
<div>

<header>
<h1 align="center" >ALFA HARDWARE</h1>
</header>

<nav>
<a href="index.html"><button class="button">INÍCIO</button></a>
<a href="_sections\computers.html"><button class="computadores">COMPUTADORES</button></a>
<a href="index.html"><button class="button">NOTEBOOKS</button></a>
<a href="index.html"><button class="button">CELULARES</button></a>
<a href="index.html"><button class="button">PERIFÉRICOS</button></a>
<a href="index.html"><button class="button">SOFTWARES</button></a>


</nav>

<section>
    <div id="destaque">
    <article style="float:left;">
    
    <div id="crono">
        <h1 style="display:block;">
        NZXT CRONOS
        </h1>
        <br>
    <span>A NOVA GERAÇÃO DE COMPUTADORES</span><br>
        
    <img style = "height:500px; width: 300px;"src= "_images/crono.png"><br>
        <a href=""><button class="saiba">SAIBA MAIS </button></a>
        
    </div>
    </article>
    
    <article style="float:left;">
        
        <div id="bulldog">
        <img style= "height:500px; width: 300px;" src="_images/bulldog.png">
            
            
            
    </div>
    </article>
        
    </div>
</section>

6
  • 1
    Indiquei ele a usar bootstrap, fazer um site assim do zero na mão é bem complicado, dá muita dor de cabeça ahah
    – Renan
    Commented 30/10/2018 às 16:11
  • 2
    Só isso aqui já vale o +1 Cara vou ser bem sincero com vc, estou vendo que vc está começando. Acho que o basicão vc já sabe, mas pare um pouco para estudar os fundamentos. Estudo FlexBox, Position e Display do CSS que vai te ajudar para o resto da vida. E não tenha medo de começar novamente esse projeto do 0, mas de forma mais organizada no CSS - Na hora, pode doer um pouco o ego ler isso, mas é um conselho que se for seguido, vai abrir o caminho para o autor realmente se desenvolver como bom profissional.
    – Largato
    Commented 30/10/2018 às 16:15
  • 1
    Muito obrigado pelo conselho, estou recomeçando o site novamente, é a primeira vez que estou fazendo um site. Faço Técnico em Informática, e o HTML e CSS foram as áreas que eu mais gostei de usar. Muito obrigado por responderem a minha dúvida Commented 30/10/2018 às 16:31
  • 1
    @LucasMarcato legal que vc levou o recado a sério. Encara como uma crítica construtiva ;). "Desenhar" com código realmente é bem legal, e se vc já gostou do HTML e CSS vc vai pegar o jeito rápido, pois eles representam 90% da estrutura do que se vê na tela. Recomece, mas tb para um pouco para estudar, existe muito material disponível por ai, inclusive aulas no Youtube que podem te ajudar. Boa sorte nos estudos!
    – hugocsl
    Commented 30/10/2018 às 16:50
  • 2
    @Bacco é uma situação complicada pq a gente nunca sabe como as pessoas vão reagir aos "conselhos" que damos. Mas me arrisquei... e sei que o Lucas entendeu a mensagem, isso me deixa feliz e vejo que sempre vale a pena dar esse feedback, mesmo que alguns não levem na boa no início, talvez em algum momento da vida podem refletir e reconsiderar... []´s
    – hugocsl
    Commented 30/10/2018 às 16:58
0

Pelo que entendi é isso que você precisa.

Olha o Código a baixo.

<style type="text/css">
#esquerda{
 	float: left;
}	
#direita{
		float: right;
	}
</style>

<div id="banner">
	<img src="seulogo.jpg" id="esquerda"/>
	<img src="seutexto.jpg" id="direita"/>
</div>

CODE

4
  • Eu já tentei inserir esse código, mas deu falha. Commented 30/10/2018 às 15:26
  • 1
    Ok, primeiro eu indico você a estudar bootstrap, que é um framework muito utilizado no desenvolvimento web, com ele você não vai passar esse tipo de problema, não precisa ficar reinventando a roda. Segundo, eu indico a você estudar tambem CSS FlexBox aqui w3schools.com/css/css3_flexbox.asp isso irá te ajudar muito também. Estou meio sem tempo no momento pra arrumar seu código, se precisar de algo é só avisar
    – Renan
    Commented 30/10/2018 às 16:00
  • Cara, muito obrigado com a recomendação do FlexBox, consegui fazer direitinho aqui. Só o Bootstrap que fiquei meio sem entender, mas o FlexBox funcionou direitinho. Commented 30/10/2018 às 16:28
  • Bah, que bom. Seguinte, assim que tiver um tempo da uma estudada no bootstrap, no mesmo site que te passei ou em video aulas na internet, tem bastante e vai te ajudar muito.
    – Renan
    Commented 30/10/2018 às 17:33

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .