Images within DIV’s - How?

Question

Images within DIV’s - How?

Asked 7 years, 3 months ago

Viewed 46 times

-1

I want to apply 2 company logos, one on the left side and the other on the right side within this DIV. How?!
I can only apply one, when I’m going to apply another, the first one goes away.

@media (min-width: 1280px) and (max-width: 1980px) and (min-height: 1024px) and (min-height: 1080px) {
*{
    font-family: Oswald;
}

.box {
    margin-left: -110px;
    width: 170%;
}

.box-chart {
    width: 100%;
    margin: 0 auto;
}

body{
  background-color: #363636;
  overflow: hidden;
}

.painel-principal {
  width: 100%;
  height: 910px;
  border: 1px solid #FDCA2E;
  display: inline-flex;
  font-family: Oswald;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
}
.linhaS {
  width: 19.1111%;
  height: 880px;
  border: 1px solid red;
  margin: 4px 4px 4px 4px;
  padding-left: 5px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  border: none;
}

.cabecalho-topo p {
  width: 100%;
  background: #FDCA2E;
  color: #000000;
  border: 1px solid #000000;
  text-align: center;
  font-family: Oswald;
  font-size: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  margin-bottom: 10px;
  margin-top: 5px;
}
.cabecalho-inferior p {
  width: 100%;
  background: #D3D3D3;
  color: #000000;
  border: 1px solid #D3D3D3;
  text-align: center;
  font-family: Oswald;
  font-size: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
  margin-top: 5px;
}

.cabecalho-inferior-whs p {
  width: 100%;
  /*margin-bottom: 5px;*/
  background: #FDCA2E;
  color: #000000;
  border: 1px solid #000000;
  text-align: center;
  font-family: Oswald;
  font-size: 30px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
	-moz-border-radius: 5px;
}

.linha{
    box-sizing: border-box;
}

.linha:before,
.linha:after {
    content: " ";
    display: table;
}

.linha:after {
    clear: both;
}

.linha {
    margin-top: 10px;
}

.linha:last-child {
    margin-bottom: 0;
}

.inicio .row{
  display: inline-block;
  vertical-align: top;
  min-height: 1px;
  padding-left: 5px;
  padding-right: 5px;
  width: 272px;
  margin-left: 7px;
  *zoom: 1;
  *display: inline;
  border: 1px solid #FF0000;
  background-color: #FF0000;
  color: #FFFFFF;
  margin-top: 5px;
  font-size: 30px;
  text-align: center;
}
.inicio .oee{
  width: 282px;
  margin-left: 7px;
  border: 1px solid #FDCA2E;
  background-color: #FDCA2E;
  color: #000000;
  font-size: 25px;
  text-align: center;
}
.inicio .porcentagem{
  margin-top: 5px;
  width: 284px;
  margin-left: 5px;
  border: 1px solid #FFFFFF;
  background-color: #FFFFFF;
  color: #000000;
  border-radius: 5px;
  font-size: 40px;
  text-align: center;
}
.controle .column{
  width: 29.4333%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-2 .perc{
  width: 29.4333%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 30px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-3 .rate{
  width: 55%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-3 .head{
  width: 36.5333%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-4{
  width: 55%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: left;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.controle-5{
  width: 36.5333%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  margin: 5px;
  padding: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.prod .prods{
  width: 95%;
  background: #D3D3D3;
  border: 1px solid #D3D3D3;
  color: #000000;
  margin: 5px;
  min-height: 30px;
  font-size: 20px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.grafico .plaxpro{
  width: 95%;
  background: #FDCA2E;
  border: 1px solid #FDCA2E;
  color: #000000;
  font-size: 20px;
  margin: 5px;
  min-height: 30px;
  font-size: 25px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.perc-plaxpro{
  width: 95%;
  background: #FFFFFF;
  border: 1px solid #FFFFFF;
  color: #000000;
  font-size: 20px;
  margin: 5px;
  margin-bottom: 30px;
  min-height: 30px;
  font-size: 25px;
  text-align: center;
  border-radius: 4px;
  position: relative;
  float: left;
  display: block;
  box-sizing: border-box;
}
.perc-plaxpro .pla{
  color: #FF0000;
}
.perc-plaxpro .pro{
  color: #FDCA2E;
}
}

<!doctype html>
<html lang="pt" class="no-js">

<head>
	<meta charset="UTF-8" />
	<title>DASHBOARD OEE - v1</title>

	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<link rel="icon" href="css/imagens/dhl_icon.ico" type="image/x-icon" />
	<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css'>
	<link href="css/style.css" rel="stylesheet">

	<script src="js/Chart.min.js"></script>

	<script type="text/javascript">
			var randomnb = function(){ return Math.round(Math.random()*300)};
	</script>

</head>

<body>
<div class="cabecalho-topo">
  <p>OEE DASHBOARD</p>
</div>

<div class="painel-principal">

  <div class="linhaS"><!-- /PAINEL DA LINHA A -->

					<div class="inicio">
		    		<div class="row">LINHA A</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div class="pla">Planejado: &emsp; null</div>
							<div class="pro">Produzido: &emsp; null</div>
						</div>

						<div class="box">

				        <div class="box-chart">

				            <canvas id="GraficoDonut1" style="width:100%;"></canvas>

				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]



				                    var ctx = document.getElementById("GraficoDonut1").getContext("2d");
				                    var PizzaChart1 = new Chart(ctx).Doughnut(data, options);

				            </script>

				        </div>

				    </div>
  </div><!-- / FIM DO PAINEL DA LINHA A -->

	<div class="linhaS"><!-- /PAINEL DA LINHA B -->

					<div class="inicio">
						<div class="row">LINHA B</div>
						<div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
						</div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div class="pla">Planejado: &emsp; null</div>
							<div class="pro">Produzido: &emsp; null</div>
						</div>

						<div class="box">
				        <div class="box-chart">
				            <canvas id="GraficoDonut2" style="width:100%;"></canvas>
				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]



				                    var ctx = document.getElementById("GraficoDonut2").getContext("2d");
				                    var PizzaChart2 = new Chart(ctx).Doughnut(data, options);

				            </script>
				        </div>

				    </div>
	</div><!-- / FIM DO PAINEL DA LINHA B -->

	<div class="linhaS"><!-- /PAINEL DA LINHA C -->

					<div class="inicio">
		    		<div class="row">LINHA C</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div class="pla">Planejado: &emsp; null</div>
							<div class="pro">Produzido: &emsp; null</div>
						</div>

						<div class="box">
				        <div class="box-chart">
				            <canvas id="GraficoDonut3" style="width:100%;"></canvas>
				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]



				                    var ctx = document.getElementById("GraficoDonut3").getContext("2d");
				                    var PizzaChart3 = new Chart(ctx).Doughnut(data, options);

				            </script>
				        </div>

				    </div>
  </div><!-- / FIM DO PAINEL DA LINHA C -->

	<div class="linhaS"><!-- /PAINEL DA  LINHA D -->

					<div class="inicio">
		    		<div class="row">LINHA D</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div class="pla">Planejado: &emsp; null</div>
							<div class="pro">Produzido: &emsp; null</div>
						</div>

						<div class="box">
				        <div class="box-chart">
				            <canvas id="GraficoDonut4" style="width:100%;"></canvas>
				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]



				                    var ctx = document.getElementById("GraficoDonut4").getContext("2d");
				                    var PizzaChart4 = new Chart(ctx).Doughnut(data, options);

				            </script>
				        </div>

				    </div>
  </div><!-- / FIM DO PAINEL DA LINHA D -->

	<div class="linhaS"><!-- /PAINEL DA LINHA E -->

					<div class="inicio">
		    		<div class="row">LINHA E</div>
				    <div class="oee">OEE</div>
						<div class="porcentagem">0%</div>
					</div>

						<div class="controle">
								<div class="column">DESEMP.</div>
								<div class="column">DISPONIB.</div>
								<div class="column">QUALID.</div>
					  </div>

						<div class="controle-2">
							<div class="perc">0%</div>
							<div class="perc">0%</div>
							<div class="perc">0%</div>
						</div>

						<div class="controle-3">
							<div class="rate">RATE</div>
							<div class="head">HEAD</div>
						</div>

						<div class="controle-4">
							<div class="meta">Meta(cx/h): </div>
							<div class="real">Real(cx/h): </div>
						</div>

						<div class="controle-5">
							<div>0</div>
							<div>0</div>
						</div>

						<div class="prod">
							<div class="prods">(Nome do produto)</div>
						</div>

						<div class="grafico">
							<div class="plaxpro">Planejado x Produzido</div>
						</div>

						<div class="perc-plaxpro">
							<div class="pla">Planejado: &emsp; null</div>
							<div class="pro">Produzido: &emsp; null</div>
						</div>

						<div class="box">
				        <div class="box-chart">
				            <canvas id="GraficoDonut5" style="width:100%;"></canvas>
				            <script type="text/javascript">

				                var options = {
				                    responsive:true
				                };

				                var data = [
				                    {
				                        value: randomnb(),
				                        color:"#F7464A",
				                        highlight: "#FF5A5E",
				                        label: "Planejado"
				                    },
				                    {
				                        value: randomnb(),
				                        color: "#FDCA2E",
				                        highlight: "#5AD3D1",
				                        label: "Produzido"
				                    }
				                ]



				                    var ctx = document.getElementById("GraficoDonut5").getContext("2d");
				                    var PizzaChart5 = new Chart(ctx).Doughnut(data, options);

				            </script>
				        </div>

				    </div>
  </div><!-- / FIM DO PAINEL DA LINHA E -->

</div><!-- /FIM DO PAINEL PRINCIPAL -->

<div class="cabecalho-inferior">
	<p><marquee>Planejado(Turno): &emsp; null  &emsp; Realizado(turno): &emsp; null  &emsp; %Total: &emsp; null</marquee></p>
</div>

<div class="cabecalho-inferior-whs">
	<p>WHS DASHBOARD</p>
</div>

<!-- <div class="desenvolvido">
	<p> &copy; Alexandre Amado </p>
</div> -->

</body>
</html>

Show your code, the question is far from being answered with this shortage of information.

– Bsalvo

2017/07/25 at 14:28
All right. Sorry.

– Alexandre Amado

2017/07/25 at 14:29

2 answers

0

.hello{
  width: 100%;
  float: left;
}

.left{
  float: left;
}

.left img{
  width: 100px;
}

.right{
  float: right
}

.right img{
  width: 100px;
}

<div class="hello">
    <div class="left"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/a9/Mcdonalds-90s-logo.svg/1280px-Mcdonalds-90s-logo.svg.png"></div>
    <div class="right"><img src="https://pbs.twimg.com/profile_images/694921357864386563/p0nF8Bj8.jpg"></div>
  </div>

That’s what you want?

Almost! However, I need you to stay inside the div the 2 images, one on the left and the other on the right. I took your code and edited it a little bit, I managed to put one in, but the other one doesn’t come in kkk

– Alexandre Amado

2017/07/25 at 14:37
I’m editing here and almost getting it, you already gave me a light! Thanks, I think I can proceed from here.

– Alexandre Amado

2017/07/25 at 14:40
@Alexandreamado Needing to help me warns :D

– Rafael Augusto

2017/07/25 at 15:11
I came back here to say that I did it! Thank you very much Rafael :D

– Alexandre Amado

2017/07/25 at 16:01
http://prntscr.com/g04og3

– Alexandre Amado

2017/07/25 at 16:02
@Alexandreamado Nothing, if you can leave +1 ai :D

– Rafael Augusto

2017/07/25 at 17:13

Show 1 more comment

Browser other questions tagged css html5 css3

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

by Anderson Galdino • 85 points · Answer 1 · 2017-07-25T14:30:25+00:00

I think this can help you, Oce can put the logo in one corner or next to the other just changing the size of the col.

<div class="container">
	<div class="col-lg-12">
		 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
		 	 <img src="" alt="">
		 </div>
		 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
		 	<img src="" alt="">
		 </div>
		 <div class="col-lg-4 col-md-4 col-sm-12 col-xs-12">
		 	<img src="" alt="">
		 </div>
	</div>
</div>