Anmelden | Registrieren | FAQ
Anonymous

Problemas con div

+ Antwort erstellen

2 Beiträge Seite 1 von 1


Problemas con div

von davidgui » Mo Okt 23, 2017 3:50 pm

Hola buenas. Estoy empezando con los divs y css y me estoy rompiendo la cabeza porque no soy capaz de hacer la imagen 1ª
Bild
No me sale del todo, me falta poco, me sale esto:
Bild
Aquí os dejo el código html con style en el head
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Pizarra</title>
<style>
#Amarillo {
border:1px solid black;
background-color: yellow;
margin-left: 50px;
margin-right: 50px;
height: 100px;
}
#Rojo {
border: 1px solid black;
background-color:red;
height: 500px;
width: 500px;
margin-left:100px;
margin-top:20px;
float:left
}
#Azul {
border: 1px solid black;
background-color:blue;
height: 500px;
width: 500px;
margin-right:100px;
margin-top:20px;
float: right
}
#Gris {
border: 1px solid black;
background-color: gray;
height: 100px;
margin-top: 540px;
margin-right: 300px;
margin-left: 50px;
}
#Rosa {
border: 1px solid black;
background-color: pink;
height: 100px;
width: 300px;
float:right;
}
</style>
</head>
<body>
<div id="Amarillo">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.
</p>
</div>
<div id="Rojo">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.
</p>
</div>
<div id="Azul">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.
</p>
</div>
<div id="Gris">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis assumenda laboriosam, hic quas itaque modi dolorum repellendus, perspiciatis nemo facere nobis quos reiciendis nisi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur ratione sint suscipit, ipsa inventore, blanditiis
</p>
</div>
<div id="Rosa">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam amet voluptatem, rem harum illum suscipit ullam placeat animi aliquid cumque minima nobis quam ipsa hic
</p>
</div>
</body>
</html>

Dateianhänge

  1. 2.PNG (144.19 KiB) 100-mal heruntergeladen

Benutzeravatar

davidgui

  • Beiträge: 1
  • Registriert: Mo Okt 23, 2017 3:45 pm

Re: Problemas con div

von nhadat180 » So Nov 05, 2017 2:35 am

hjjjjjjjjjjj
Benutzeravatar

nhadat180

  • Beiträge: 1
  • Registriert: So Nov 05, 2017 2:26 am
  • Wohnort: phu quoc


+ Antwort erstellen

Seite 1 von 1