How to align an image to the right with in CSS and HTML?

Question

How to align an image to the right with in CSS and HTML?

Asked 5 years, 8 months ago

Viewed 2,473 times

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>

Hello, I have a question in CSS, where I try to align an image to the right, I’ve tried the command "float:left;", and I’ve even used the command "margin-left", where I was able to move the image to the side, but it wasn’t aligned. How can I align the image ? Anyone who can help me would be very grateful. NOTE: I’m a beginner in HTML.

Lucas without the code does not give you an accurate answer, please edit your question and include your HTML and CSS

– hugocsl

2018/10/30 at 15:17
Sorry, I forgot to enter the code.

– Lucas Marcato

2018/10/30 at 15:21

2 answers

5

Lucas your code is very strange... actually is with CSS properties applied in a wrong way, for example your section is 600px wide, and each image of you is 700px wide... so there’s no way to stand next to each other... Beyond that the word article was misspelled and the css was not being applied to the element.

Dude I’m going to be very honest with you, I can see you’re getting started. I think the basics you already know, but take a moment to study the basics. Study Flexbox, Position and Display CSS that will help you for the rest of your life. And don’t be afraid to start this 0 project again, but in a more organized way in CSS.

Look at your code, run all screen you will see that now stands next to each other, simply because now fit the two in the same line... But if I were you I would delete everything and stop to study a little more before following, because this layout will never get good and will give you trouble in the future...

@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>

1

I pointed him to use bootstrap, make a site so from scratch in the hand is very complicated, gives a lot of headache ahah

– Renan

2018/10/30 at 16:11
2

This alone is worth the +1 Dude I’m going to be very honest with you, I can see you’re getting started. I think the basics you already know, but take a moment to study the basics. Study Flexbox, Position and Display CSS that will help you for the rest of your life. And don’t be afraid to start this 0 project again, but in a more organized way in CSS - At the time, it may hurt a little the ego to read this, but it is advice that if it is followed, it will open the way for the author to actually develop as a good professional.

– Bacco

2018/10/30 at 16:15
1

Thank you so much for the advice, I’m starting the site again, it’s the first time I’m making a website. I do Computer Technician, and HTML and CSS were the areas I liked most to use. Thank you very much for answering my question

– Lucas Marcato

2018/10/30 at 16:31
1

@Lucasmarcato legal that you took the message seriously. Regards as a constructive criticism ;). " Drawing" with code is really cool, and if you already liked HTML and CSS vc will get the hang of it fast, because they represent 90% of the structure of what you see on the screen. Start again, but also for a little studying, there is a lot of material out there, including Youtube lessons that can help you. Good luck in school!

– hugocsl

2018/10/30 at 16:50
2

@Bacco is a complicated situation because we never know how people will react to the "advice" we give. But I took a risk... and I know that Lucas understood the message, it makes me happy and I see that it is always worth giving this feedback, even if some do not take well at first, maybe at some point in life they can reflect and reconsider... []s

– hugocsl

2018/10/30 at 16:58
1

One of the main problems in the development of the site is that I, who am beginner, already think I will be able to make a site level Corsair, Acer, etc. I tried to get a little inspired in these sites, but.

– Lucas Marcato

2018/10/30 at 18:00

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.

by Renan • **744** points · Answer 1 · 2018-10-30T15:15:57+00:00

0

From what I understand that’s what you need.

Look at the code below.

<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

I already tried to enter this code, but failed.

– Lucas Marcato

2018/10/30 at 15:26
1

Ok, first I point you to study bootstrap, which is a framework very used in web development, with it you will not pass this kind of problem, do not need to keep reinventing the wheel. Second, I urge you to also study CSS Flexbox here https://www.w3schools.com/css/css3_flexbox.asp this will help you a lot as well. I’m a little out of time right now to fix your code, so if you need anything just let me know

– Renan

2018/10/30 at 16:00
Man, thank you so much for the Flexbox recommendation, I got it right here. Only the Bootstrap I didn’t quite understand, but the Flexbox worked perfectly.

– Lucas Marcato

2018/10/30 at 16:28
Bah, this is good. Next, as soon as you have a bootstrap time, the same website I gave you or video lessons on the Internet, there is a lot and will help you a lot.

– Renan

2018/10/30 at 17:33