The text comes out of the tag in html-css

Question

The text comes out of the tag in html-css

Navigation

#1 by (2 votes)

2

I need to enter text in a <div> that is the white border box and this is within a <span> .

.

But when I do, the text goes to the bottom of the page, I already tried to use several properties to align text, float, etc.

Code css-html

*{
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: 'Asap Condensed', sans-serif;
  box-sizing: border-box;
  color:white;
  word-break: break-all;
  word-wrap: break-word;
}

body{
	background: url("../img/5.jpg") no-repeat ;
	background-size: 100%;
	    background-attachment: fixed;

}

h1{
	
	float: left;
	font-size: 55px;
	letter-spacing: 4px;
	width: 1288.63px;
	height: 63px;
	margin: 20px 25px 60px;
	text-align: center;
	font-weight: 600;
	line-height: 63px;
	
}

.fila{
	position:relative;
	margin:auto;
	width:100%;
	height: auto;
	clear:both;
	display:table;
}

#anuncios{

	width: 1343px;
	height: 93px;
	text-align: center;
}

#aguile{
	width:1343px;
	height: 93px;
	text-align: center; 
}
h2{
	font-size: 3vw;
    letter-spacing: 1px;
}

p{
	letter-spacing: 2px;
    font-weight: 100;
    font-size: 18px;
    margin: 1em 10px 2em;

}

#examples{
   height: 173px;
   margin-top: 2em;
}

#reloj{
   float:left;
   width: 800px; 	
   height: 172.41px;  
   margin-left: 265px;  
}

#reloj .casillas{
	margin-right: 8px;
	line-height: 172.41;
	float:left;
	width: 192px; 	
    height: 172.41px;	
	border: 1px solid;
	padding: 2vw;
    border-radius: 4px;	
}

.casillas div{
	width: 133.63px;
	height: 114.03px;
	
}	


span{
	position: absolute;
	font-size: 18px;
    letter-spacing: 2px;
    margin-left: 5px;
    color: #55d45a;
    text-transform: capitalize;
    width: 133.63px;
	height: 114.03px;
    
    	
}

[class*="col-"]{
	float:left;
	border:1px solid black;
	padding:0px;
}



/*=============================================
PANTALLA DE ESCRITORIO GRANDE - LARGE (lg) - revisamos en portatil o pc
=============================================*/

@media(min-width:1200px){

	.col-lg-12{width:100%;}
	.col-lg-11{width:91.66666667%;}
	.col-lg-10{width:83.33333333%;}
	.col-lg-9{width:75%;}
	.col-lg-8{width:66.66666667%;}
	.col-lg-7{width:58.33333333%;}
	.col-lg-6{width:50%;}
	.col-lg-5{width:41.66666667%;}
	.col-lg-4{width: 33.33333333%;}
	.col-lg-3{width: 25%;}
	.col-lg-2 {width: 16.66666667%;}
	.col-lg-1 {width: 8.33333333%;}

}

/*=============================================
PANTALLA DE ESCRITORIO MEDIANO - MEDIUM (md) - revisamos en tablet horizontal 1024px
=============================================*/

@media(max-width:1199px) and (min-width:992px){

	.col-md-12{width:100%;}
	.col-md-11{width:91.66666667%;}
	.col-md-10{width:83.33333333%;}
	.col-md-9{width:75%;}
	.col-md-8{width:66.66666667%;}
	.col-md-7{width:58.33333333%;}
	.col-md-6{width:50%;}
	.col-md-5{width:41.66666667%;}
	.col-md-4{width: 33.33333333%;}
	.col-md-3{width: 25%;}
	.col-md-2{width: 16.66666667%;}
	.col-md-1{width: 8.33333333%;}

}

/*=============================================
PANTALLA DE TABLET - SMALL (sm) - revisamos en tablet vertical 768px
=============================================*/

@media(max-width:991px) and (min-width:768px){

	.col-sm-12{width:100%;}
	.col-sm-11{width:91.66666667%;}
	.col-sm-10{width:83.33333333%;}
	.col-sm-9{width:75%;}
	.col-sm-8{width:66.66666667%;}
	.col-sm-7{width:58.33333333%;}
	.col-sm-6{width:50%;}
	.col-sm-5{width:41.66666667%;}
	.col-sm-4{width: 33.33333333%;}
	.col-sm-3{width: 25%;}
	.col-sm-2{width: 16.66666667%;}
	.col-sm-1{width: 8.33333333%;}

}

/*=============================================
PANTALLA DE PHONES - EXTRA SMALL (xs) - revisamos en movil horizontal 480px o vertical 320px
=============================================*/

@media(max-width:767px){

	.col-xs-12{width:100%;}
	.col-xs-11{width:91.66666667%;}
	.col-xs-10{width:83.33333333%;}
	.col-xs-9{width:75%;}
	.col-xs-8{width:66.66666667%;}
	.col-xs-7{width:58.33333333%;}
	.col-xs-6{width:50%;}
	.col-xs-5{width:41.66666667%;}
	.col-xs-4{width: 33.33333333%;}
	.col-xs-3{width: 25%;}
	.col-xs-2{width: 16.66666667%;}
	.col-xs-1{width: 8.33333333%;}

}





<!-- begin snippet: js hide: false console: true babel: false -->

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>demo</title>
		<link rel="stylesheet" type="text/css" href="css/styles.css" />
		<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Asap+Condensed"/>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	</head>
	
	<body>
		<div id="container" class="fila">
			<div id="header" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<h1  >Coming Soon Page</h1>
			</div>	
			<div id="anuncios" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
				<a id="aw0" target="_top" href="https://www.googleadservices.com/pagead/aclk?sa=L&amp;ai=CCvRv4jpqW_3iNZTChwev5pMwmaurtE2T8JbdlQTAjbcBEAEg_NTMJWDf7veNqCWgAYX-keADyAECqAMByAPJBKoE8wFP0K352Soit8M_HTXeO9u8AqtyL4OQakXQrFobh70vG92Jp87ZZaMzzOaqucPx11KyeYzi3AOZLipdpD7o4Ms_qXWiGimXj_IQ_xDwrmcq9vagOUrLTrmFNKtuRQ0qXEoYbv3SllRZirLQFuLbZou8NPEyuW_bqbB3xMXmqvH26fkkF_OGE0wpRRKInrr_T1TrYj2_A3mUREWHbm98oobMl8qRO1_3hYboBHHQpStFp95n7ckN7TP1f_FgsDZPLhlnbeJRGyahnFypnkLOe5MUYbpvsmsEQexw09YOtn4i5EszM3LD4RXNsDE7DNEdYmQA6higBgKAB6PqwyKoB47OG6gH1ckbqAfZyxuoB8_MG6gHpr4bqAeYzhuoB5oG2AcB0ggHCIBhEAEYAfIIG2FkeC1zdWJzeW4tMjUzMTQ4MTgwMDA3MjM5MLEJ7vf4jPCIJFSACgPYEww&amp;num=1&amp;cid=CAASEuRo5jECGZFO1quSTdjRPmw7hA&amp;sig=AOD64_3Fq8N6HpInfn7TJZKZ-C6-DR8FQQ&amp;client=ca-pub-7733626117287363&amp;adurl=http://www.wix.com/startyoursite/hiker-en%3Futm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Dbi_ads_en_sca_4%5Etemplates_img%26experiment_id%3Dp.w3layouts.com%5E158491284446%5E%5Efree%2520html%2520templates" data-original-click-url="https://www.googleadservices.com/pagead/aclk?sa=L&amp;ai=CCvRv4jpqW_3iNZTChwev5pMwmaurtE2T8JbdlQTAjbcBEAEg_NTMJWDf7veNqCWgAYX-keADyAECqAMByAPJBKoE8wFP0K352Soit8M_HTXeO9u8AqtyL4OQakXQrFobh70vG92Jp87ZZaMzzOaqucPx11KyeYzi3AOZLipdpD7o4Ms_qXWiGimXj_IQ_xDwrmcq9vagOUrLTrmFNKtuRQ0qXEoYbv3SllRZirLQFuLbZou8NPEyuW_bqbB3xMXmqvH26fkkF_OGE0wpRRKInrr_T1TrYj2_A3mUREWHbm98oobMl8qRO1_3hYboBHHQpStFp95n7ckN7TP1f_FgsDZPLhlnbeJRGyahnFypnkLOe5MUYbpvsmsEQexw09YOtn4i5EszM3LD4RXNsDE7DNEdYmQA6higBgKAB6PqwyKoB47OG6gH1ckbqAfZyxuoB8_MG6gHpr4bqAeYzhuoB5oG2AcB0ggHCIBhEAEYAfIIG2FkeC1zdWJzeW4tMjUzMTQ4MTgwMDA3MjM5MLEJ7vf4jPCIJFSACgPYEww&amp;num=1&amp;cid=CAASEuRo5jECGZFO1quSTdjRPmw7hA&amp;sig=AOD64_3Fq8N6HpInfn7TJZKZ-C6-DR8FQQ&amp;client=ca-pub-7733626117287363&amp;adurl=http://www.wix.com/startyoursite/hiker-en%3Futm_source%3Dgoogle%26utm_medium%3Dcpc%26utm_campaign%3Dbi_ads_en_sca_4%5Etemplates_img%26experiment_id%3Dp.w3layouts.com%5E158491284446%5E%5Efree%2520html%2520templates"><img src="https://tpc.googlesyndication.com/simgad/3479336216566961221?sqp=4sqPyQQlQiMqIQhaEAEdAAC0QiABKAEwCTgDQPCTCUgAUAFYAWBacAJ4AQ&amp;rs=AOga4qn-JqaZOzNcSySe9nM4QUNEbQS7DA" border="0" width="728" alt="" class="img_ad"></a>
				
			</div>
			<div id="main-content">
				<div id="aguile" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
					<h2>We are on the way</h2>
					<p>Stay tuned for something amazing</p>
				</div>
				<div id="examples"  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
			
					<div id="reloj">
						<div class="casillas">
							<div>		
								<span>x</span>
							</div>
						</div>
						<div class="casillas">
							<div>
								<span></span>
							</div>
						</div>
						<div class="casillas">
							<div>
								<span></span>
							</div>	
						</div>
						<div class="casillas">
							<div>
								<span></span>
							</div>
						</div>
 					</div>

				</div>

			</div>
		<script type="js/main.js"></script>	
		</div>	
		
	</body>
</html>

html5 css3

asked by dougblizz 09.08.2018 в 01:16

source

1 answer

How did a json go to a dictionary? Update record comparing different columns

score 2 · Accepted Answer

What causes this behavior is that within #reloj .casillas you have declared this line: line-height: 172.41; remove it or change the value to a smaller number and you will see how your text fits within your divs.

See this link to see more about this property.

I hope you serve, greetings.